diff --git a/README.md b/README.md index e8c017b..521874f 100644 --- a/README.md +++ b/README.md @@ -117,8 +117,8 @@ You can override the default locale by `lang`. | input-class | input classname | `string` | 'mx-input' | | input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — | | open | open state of picker | `boolean` | - | -| popupStyle | popup style | `object` | — | -| popupClass | popup classes | | — | +| popup-style | popup style | `object` | — | +| popup-class | popup classes | | — | | shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - | | title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' | | range-separator | text of range separator | `string` | ' ~ ' | @@ -143,6 +143,7 @@ You can override the default locale by `lang`. | -------------------------- | ----- | -------------------------------------- | | Year | YY | 70 71 ... 10 11 | | | YYYY | 1970 1971 ... 2010 2011 | +| | Y | -1000 ...20 ... 1970 ... 9999 +10000 | | Month | M | 1 2 ... 11 12 | | | MM | 01 02 ... 11 12 | | | MMM | Jan Feb ... Nov Dec | @@ -173,6 +174,33 @@ You can override the default locale by `lang`. | Unix Timestamp | X | 1360013296 | | Unix Millisecond Timestamp | x | 1360013296123 | +#### custom format + +the `format` accepts an object to customize formatting. + +```html + +``` + +```js +data() { + return { + // Use moment.js instead of the default + momentForamt: { + // Date to String + stringify: (date) => { + return date ? moment(date).format('LL') : '' + }, + // String to Date + parse: (value) => { + return value ? moment(value, 'LL').toDate() : null + } + } + } +} + +``` + #### value-type set the format of binding value @@ -223,17 +251,17 @@ set fixed time list to select; ### Events -| Name | Description | Callback Arguments | -| ----------- | ------------------------------------ | ---------------------- | -| input | When the value change(v-model event) | the currentValue | -| change | When the value change(same as input) | the currentValue, type | -| open | When panel opening | | -| close | When panel closing | | -| confirm | When click 'confirm' button | the currentValue | -| clear | When click 'clear' button | | -| input-error | When user type a invalid Date | the input text | -| focus | When input focus | | -| blur | When input blur | | +| Name | Description | Callback Arguments | +| ----------- | ------------------------------------ | -------------------------------------------- | +| input | When the value change(v-model event) | date | +| change | When the value change(same as input) | date, type(date, hour, minute, second, ampm) | +| open | When panel opening | | +| close | When panel closing | | +| confirm | When click 'confirm' button | date | +| clear | When click 'clear' button | | +| input-error | When user type a invalid Date | the input text | +| focus | When input focus | | +| blur | When input blur | | ### Slots diff --git a/README.zh-CN.md b/README.zh-CN.md index ba881fe..917fc38 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -115,8 +115,8 @@ import 'vue2-datepicker/locale/zh-cn'; | input-class | 输入框的类 | `string` | 'mx-input' | | input-attr | 输入框的其他属性(eg: { name: 'date', id: 'foo'}) | `object` | — | | open | 控制弹出层的显示 | `boolean` | - | -| popupStyle | 弹出层的样式 | `object` | — | -| popupClass | 弹出层的类 | | — | +| popup-style | 弹出层的样式 | `object` | — | +| popup-class | 弹出层的类 | | — | | shortcuts | 设置快捷选择 | `Array<{text, onClick}>` | - | | title-format | 日历单元格的 tooltip | [token](#token) | 'YYYY-MM-DD' | | range-separator | 范围分隔符 | `string` | ' ~ ' | @@ -141,6 +141,7 @@ import 'vue2-datepicker/locale/zh-cn'; | -------------------------- | ---- | -------------------------------------- | | Year | YY | 70 71 ... 10 11 | | | YYYY | 1970 1971 ... 2010 2011 | +| | Y | -1000 ...20 ... 1970 ... 9999 +10000 | | Month | M | 1 2 ... 11 12 | | | MM | 01 02 ... 11 12 | | | MMM | Jan Feb ... Nov Dec | @@ -171,6 +172,33 @@ import 'vue2-datepicker/locale/zh-cn'; | Unix Timestamp | X | 1360013296 | | Unix Millisecond Timestamp | x | 1360013296123 | +#### custom format + +`format` 接受一个对象去自定义格式化 + +```html + +``` + +```js +data() { + return { + // 使用moment.js 替换默认 + momentForamt: { + // Date to String + stringify: (date) => { + return date ? moment(date).format('LL') : '' + }, + // String to Date + parse: (value) => { + return value ? moment(value, 'LL').toDate() : null + } + } + } +} + +``` + #### value-type 设置绑定值的类型 @@ -221,17 +249,17 @@ import 'vue2-datepicker/locale/zh-cn'; ### 事件 -| 名称 | 描述 | 回调函数的参数 | -| ----------- | -------------------- | ---------------------- | -| input | 当选择日期的事件触发 | 选择的日期 | -| change | 当选择日期的事件触发 | 选择的日期, 选择的类型 | -| open | 当弹出层打开时候 | | -| close | 当弹出层关闭时候 | | -| confirm | 当点击确认按钮 | 选择的日期 | -| clear | 当点击清除按钮 | | -| input-error | 当输入一个无效的时间 | 输入的值 | -| focus | 当输入框有焦点 | | -| blur | 当输入框失焦 | | +| 名称 | 描述 | 回调函数的参数 | +| ----------- | -------------------- | -------------------------------------------- | +| input | 当选择日期的事件触发 | date | +| change | 当选择日期的事件触发 | date, type(date, hour, minute, second, ampm) | +| open | 当弹出层打开时候 | | +| close | 当弹出层关闭时候 | | +| confirm | 当点击确认按钮 | date | +| clear | 当点击清除按钮 | | +| input-error | 当输入一个无效的时间 | 输入的值 | +| focus | 当输入框有焦点 | | +| blur | 当输入框失焦 | | ### Slots