From 67fc307a3fa985938a164e7ac53dfdde68d5ade4 Mon Sep 17 00:00:00 2001
From: mengxiong10 <15623530290@163.com>
Date: Tue, 12 Nov 2019 10:34:19 +0800
Subject: [PATCH] docs: update readme
---
README.md | 54 +++++++++++++++++++++++++++++++++++++------------
README.zh-CN.md | 54 +++++++++++++++++++++++++++++++++++++------------
2 files changed, 82 insertions(+), 26 deletions(-)
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