mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: date-picker, add date formats section

Browse Source
This commit is contained in:
wacky6.AriesMBP
2018-01-21 17:13:25 +08:00
committed by 杨奕
parent 1f58f4f8d5
commit 2fa6935e58
6 changed files with 142 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
examples/docs/en-US/date-picker.md
View File

@@ -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 |

4
examples/docs/en-US/datetime-picker.md
View File

@@ -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 |

4
examples/docs/en-US/time-picker.md
View File

@@ -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 |