From 2fa6935e58bc494db0d4b8b0a5ee4bb378045e0b Mon Sep 17 00:00:00 2001 From: "wacky6.AriesMBP" <416707889@qq.com> Date: Sun, 21 Jan 2018 17:13:25 +0800 Subject: [PATCH] doc: date-picker, add date formats section --- examples/docs/en-US/date-picker.md | 111 ++++++++++++++------- examples/docs/en-US/datetime-picker.md | 4 +- examples/docs/en-US/time-picker.md | 4 +- examples/docs/zh-CN/date-picker.md | 132 ++++++++++++------------- examples/docs/zh-CN/datetime-picker.md | 4 +- examples/docs/zh-CN/time-picker.md | 2 +- 6 files changed, 142 insertions(+), 115 deletions(-) diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index 69da9ccda..3b9cc9530 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -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 - - - -``` -::: - -### 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 +``` +::: + +### 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 + + + -``` -::: - -### 返回值格式 - -默认情况下，组件接受并返回`Date`对象。 -使用`value-format`指定返回值的格式，支持的格式与`format`相同。 - -:::warning -该功能处于测试阶段，欢迎提供反馈。 -::: - -:::demo -```html - - -