element-plus/website/docs/en-US/date-picker.md
2020-12-09 12:08:45 +08:00

428 lines
11 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## DatePicker
Use Date Picker for date input.
### Enter Date
Basic date picker measured by 'day'.
:::demo The measurement is determined by the `type` attribute. You can enable quick options via `shortcuts` property. The disabled date is set by `disabledDate`, which is a function.
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Picker with quick options</span>
<el-date-picker
v-model="value2"
type="date"
placeholder="Pick a day"
:disabled-date="disabledDate"
:shortcuts="shortcuts"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [{
text: 'Today',
value: new Date(),
}, {
text: 'Yesterday',
value: (() => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
})(),
}, {
text: 'A week ago',
value: (() => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
})(),
}],
value1: '',
value2: '',
};
}
};
</script>
```
:::
### Other measurements
You can choose week, month, year or multiple dates by extending the standard date picker component.
:::demo
```html
<div class="container">
<div class="block">
<span class="demonstration">Week</span>
<el-date-picker
v-model="value1"
type="week"
format="[Week] ww"
placeholder="Pick a week">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Month</span>
<el-date-picker
v-model="value2"
type="month"
placeholder="Pick a month">
</el-date-picker>
</div>
</div>
<div class="container">
<div class="block">
<span class="demonstration">Year</span>
<el-date-picker
v-model="value3"
type="year"
placeholder="Pick a year">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">Dates</span>
<el-date-picker
type="dates"
v-model="value4"
placeholder="Pick one or more dates">
</el-date-picker>
</div>
</div>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: ''
};
}
};
</script>
```
:::
### Date Range
Picking a date range is supported.
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
:shortcuts="shortcuts"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
shortcuts: [{
text: 'Last week',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
})(),
}, {
text: 'Last month',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
})(),
}, {
text: 'Last 3 months',
value: (() => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
})(),
}],
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Month Range
Picking a month range is supported.
:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current years independently, you can use the `unlink-panels` attribute.
```html
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="monthrange"
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With quick options</span>
<el-date-picker
v-model="value2"
type="monthrange"
align="right"
unlink-panels
range-separator="To"
start-placeholder="Start month"
end-placeholder="End month"
:shortcuts="shortcuts"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
shortcuts: [{
text: 'This month',
value: [new Date(), new Date()],
}, {
text: 'This year',
value: (() => {
const end = new Date()
const start = new Date(new Date().getFullYear(), 0)
return [start, end]
})(),
}, {
text: 'Last 6 months',
value: (() => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 6)
return [start, end]
})(),
}],
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Default Value
If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
If type is `daterange`, `default-value` sets the left side calendar.
:::demo
```html
<template>
<div class="block">
<span class="demonstration">date</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a date"
:default-value="new Date(2010, 9, 1)">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">daterange</span>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
start-placeholder="Start Date"
end-placeholder="End Date"
:default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
```
:::
### Date Formats
Use `format` to control displayed text's format in the input box.
By default, the component accepts and emits a `Date` object.
Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-available-formats) of all available formats of Day.js.
:::warning
Pay attention to capitalization
:::
:::demo
```html
<template>
<div class="block">
<span class="demonstration">Emits Date object</span>
<div class="demonstration">Value: {{ value1 }}</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a Date"
format="YYYY/MM/DD">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
};
}
};
</script>
```
:::
### Default time for start date and end date
When picking a date range, you can assign the time part for start date and end date.
:::demo By default, the time part of start date and end date are both `00:00:00`. Setting `default-time` can change their time respectively. It accepts an array of up to two strings with the format of `12:00:00`. The first string sets the time for the start date, and the second for the end date.
```html
<template>
<div class="block">
<p>Component value{{ value }}</p>
<el-date-picker
v-model="value"
type="daterange"
start-placeholder="Start date"
end-placeholder="End date"
:default-time="defaultTime"
></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
defaultTime: [
new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59)
] // '00:00:00', '23:59:59'
};
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| size | size of Input | string | large/medium/small/mini | large |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |
| type | type of the picker | string | year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange | date |
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | yyyy-MM-dd |
| align | alignment | left/center/right | left |
| popper-class | custom class name for DatePicker's dropdown | string | — | — |
| range-separator | range separator | string | — | '-' |
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
| default-time | optional, the time value to use when selecting date range | string[] | Array with length 2, each item is a string like `12:00:00`. The first item for the start date and then second item for the end date | — |
| name | same as `name` in native input | string | — | — |
| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
| validate-event | whether to trigger form validation | boolean | - | true |
| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
| shortcuts | an object array to set shortcut options | object[{ text: string, value: Date }] | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|
| change | triggers when user confirms the value | component's binding value |
| blur | triggers when Input blurs | component instance |
| focus | triggers when Input focuses | component instance |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | — |
### Slots
| Name | Description |
|---------|-------------|
| range-separator | custom range separator content |