mirror of https://github.com/ElemeFE/element
doc: date-picker, add date formats section
wacky6.AriesMBP
杨奕
parent
1f58f4f8d5
commit
2fa6935e58
|
|
@ -65,7 +65,8 @@
|
|||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: []
|
||||
value12: '',
|
||||
value13: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -331,45 +332,36 @@ If type is `daterange`, `default-value` sets the left side calendar.
|
|||
```
|
||||
:::
|
||||
|
||||
### Default time for start date and end date
|
||||
### Date Formats
|
||||
Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
|
||||
|
||||
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：{{ value12 }}</p>
|
||||
<el-date-picker
|
||||
v-model="value12"
|
||||
type="daterange"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
:default-time="['00:00:00', '23:59:59']">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value12: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Formatted Value
|
||||
|
||||
By default, DatePicker emits `Date` object. You can use `value-format` to designate the format of emitted value, it accepts the same format string of `format` attribute.
|
||||
By default, the component accepts and emits a `Date` object. Below are supported format strings, using UTC 2017-01-02 03:04:05 as an example:
|
||||
|
||||
:::warning
|
||||
This feature is at alpha stage. Feedback welcome.
|
||||
Pay attention to capitalization
|
||||
:::
|
||||
|
||||
| format | meaning | note | example |
|
||||
|------|------|------|------|------|
|
||||
| `yyyy` | year | | 2017 |
|
||||
| `M` | month | no leading 0 | 1 |
|
||||
| `MM` | month | | 01 |
|
||||
| `W` | week | only for week picker's `format`; no leading 0 | 1 |
|
||||
| `WW` | week | only for week picker's `format`| 01 |
|
||||
| `d` | day | no leading 0 | 2 |
|
||||
| `dd` | day | | 02 |
|
||||
| `H` | hour | 24-hour clock; no leading 0 | 3 |
|
||||
| `HH` | hour | 24-hour clock | 03 |
|
||||
| `h` | hour | 12-hour clock; must be used with `A` or `a`; no leading 0 | 3 |
|
||||
| `hh` | hour | 12-hour clock; must be used with `A` or `a` | 03 |
|
||||
| `m` | minute | no leading 0 | 4 |
|
||||
| `mm` | minute | | 04 |
|
||||
| `s` | second | no leading 0 | 5 |
|
||||
| `ss` | second | | 05 |
|
||||
| `A` | AM/PM | only for `format`, uppercased | AM |
|
||||
| `a` | am/pm | only for `format`, lowercased | am |
|
||||
| `timestamp` | JS timestamp | only for `value-format`; binding value will be a `number` | 1483326245000 |
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
|
|
@ -384,7 +376,7 @@ This feature is at alpha stage. Feedback welcome.
|
|||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits formatted date</span>
|
||||
<span class="demonstration">Use value-format</span>
|
||||
<div class="demonstration">Value: {{ value11 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value11"
|
||||
|
|
@ -394,6 +386,17 @@ This feature is at alpha stage. Feedback welcome.
|
|||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">Timestamp</span>
|
||||
<div class="demonstration">Value：{{ value12 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value12"
|
||||
type="date"
|
||||
placeholder="Pick a Date"
|
||||
format="yyyy/MM/dd"
|
||||
value-format="timestamp">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -402,6 +405,38 @@ This feature is at alpha stage. Feedback welcome.
|
|||
return {
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</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：{{ value13 }}</p>
|
||||
<el-date-picker
|
||||
v-model="value13"
|
||||
type="daterange"
|
||||
start-placeholder="Start date"
|
||||
end-placeholder="End date"
|
||||
:default-time="['00:00:00', '23:59:59']">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value13: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -421,14 +456,14 @@ This feature is at alpha stage. Feedback welcome.
|
|||
| 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/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss`, AM/PM `A` | yyyy-MM-dd |
|
||||
| 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 | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| 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 | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss`, AM/PM `A` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -278,14 +278,14 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
|||
| end-placeholder | placeholder for the end date in range mode | string | — | — |
|
||||
| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
|
||||
| type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
|
||||
| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss`, AM/PM `A` | yyyy-MM-dd |
|
||||
| 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 DateTimePicker's dropdown | string | — | — |
|
||||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
|
||||
| default-time | 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 | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss`, AM/PM `A` | — |
|
||||
| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
|
||||
| prefix-icon | Custom prefix icon class | string | — | el-icon-date |
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ Can pick an arbitrary time range.
|
|||
| picker-options | additional options, check the table below | object | — | {} |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
|
||||
| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss`, AM/PM `A` | — |
|
||||
| value-format | optional, only for TimePicker, format of binding value. If not specified, the binding value will be a Date object | string | see [date formats](#/en-US/component/date-picker#date-formats) | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
|
||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||
|
|
@ -213,6 +213,6 @@ Can pick an arbitrary time range.
|
|||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|--------|---------|
|
||||
| change | triggers when user confirms the value | component's bounded value |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -65,7 +65,8 @@
|
|||
value9: '',
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: []
|
||||
value12: '',
|
||||
value13: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -283,32 +284,70 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 默认显示日期
|
||||
### 日期格式
|
||||
|
||||
未选择日期时，默认显示今天的日历。使用`default-value`可以指定其他日期，该值需要能够被`new Date()`解析。
|
||||
类型为`daterange`时，指定左侧日历的日期。
|
||||
使用`format`指定输入框的格式；使用`value-format`指定绑定值的格式。
|
||||
|
||||
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
|
||||
:::warning
|
||||
请注意大小写
|
||||
:::
|
||||
|
||||
| 格式 | 含义 | 备注 | 举例 |
|
||||
|------|------|------|------|------|
|
||||
| `yyyy` | 年 | | 2017 |
|
||||
| `M` | 月 | 不补0 | 1 |
|
||||
| `MM` | 月 | | 01 |
|
||||
| `W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
|
||||
| `WW` | 周 | 仅周选择器的 `format` 可用 | 01 |
|
||||
| `d` | 日 | 不补0 | 2 |
|
||||
| `dd` | 日 | | 02 |
|
||||
| `H` | 小时 | 24小时制；不补0 | 3 |
|
||||
| `HH` | 小时 | 24小时制 | 03 |
|
||||
| `h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
|
||||
| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
|
||||
| `m` | 分钟 | 不补0 | 4 |
|
||||
| `mm` | 分钟 | | 04 |
|
||||
| `s` | 秒 | 不补0 | 5 |
|
||||
| `ss` | 秒 | | 05 |
|
||||
| `A` | AM/PM | 仅 `format` 可用，大写 | AM |
|
||||
| `a` | am/pm | 仅 `format` 可用，小写 | am |
|
||||
| `timestamp` | JS时间戳 | 仅 `value-format` 可用；组件绑定值为`number`类型 | 1483326245000 |
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">date</span>
|
||||
<span class="demonstration">默认为 Date 对象</span>
|
||||
<div class="demonstration">值：{{ value10 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value8"
|
||||
v-model="value10"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
default-value="2010-10-01">
|
||||
format="yyyy 年 MM 月 dd 日">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">daterange</span>
|
||||
<span class="demonstration">使用 value-format</span>
|
||||
<div class="demonstration">值：{{ value11 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value9"
|
||||
type="daterange"
|
||||
align="right"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
default-value="2010-10-01">
|
||||
v-model="value11"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">时间戳</span>
|
||||
<div class="demonstration">值：{{ value12 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value12"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
value-format="timestamp">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -317,8 +356,9 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value8: '',
|
||||
value9: ''
|
||||
value10: '',
|
||||
value11: '',
|
||||
value12: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -326,7 +366,7 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 默认的起始与结束时刻
|
||||
### 默认显示日期
|
||||
|
||||
在选择日期范围时，指定起始日期和结束日期的默认时刻。
|
||||
|
||||
|
|
@ -334,9 +374,9 @@
|
|||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<p>组件值：{{ value12 }}</p>
|
||||
<p>组件值：{{ value13 }}</p>
|
||||
<el-date-picker
|
||||
v-model="value12"
|
||||
v-model="value13"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
|
|
@ -349,55 +389,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
value12: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 返回值格式
|
||||
|
||||
默认情况下，组件接受并返回`Date`对象。
|
||||
使用`value-format`指定返回值的格式，支持的格式与`format`相同。
|
||||
|
||||
:::warning
|
||||
该功能处于测试阶段，欢迎提供反馈。
|
||||
:::
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
<span class="demonstration">默认为 Date 对象</span>
|
||||
<div class="demonstration">组件值：{{ value10 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value10"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="block">
|
||||
<span class="demonstration">使用 value-format 进行格式化</span>
|
||||
<div class="demonstration">组件值：{{ value11 }}</div>
|
||||
<el-date-picker
|
||||
v-model="value11"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
format="yyyy 年 MM 月 dd 日"
|
||||
value-format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value10: '',
|
||||
value11: '',
|
||||
value13: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -417,14 +409,14 @@
|
|||
| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
|
||||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | yyyy-MM-dd |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DatePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | — | '-' |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| default-time | 范围选择时选中日期所使用的当日内具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||
|
|
|
|||
|
|
@ -277,14 +277,14 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
|
|||
| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
|
||||
| time-arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
|
||||
| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
|
||||
| format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | yyyy-MM-dd |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd |
|
||||
| align | 对齐方式 | string | left, center, right | left |
|
||||
| popper-class | DateTimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
|
||||
| default-time | 范围选择时选中日期的默认具体时刻 | string[] | 数组，长度为 2，每项值为字符串，形如`12:00:00`，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 `00:00:00` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | — |
|
||||
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| unlink-panels | 在范围选择器里取消两个日期面板之间的联动 | boolean | — | false |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-date |
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@
|
|||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| value-format | 可选，仅TimePicker时可用，绑定值的格式，同DatePicker | string | 小时 `HH`，分 `mm`，秒 `ss`，AM/PM `A` | — |
|
||||
| value-format | 可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
|
||||
|
|
|
|||
Loading…
Reference in New Issue