mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-23 08:30:36 +03:00
Code Activity

docs: update readme

Browse Source
This commit is contained in:
mengxiong10
2019-11-12 10:34:19 +08:00
parent 741fcf8d7b
commit 67fc307a3f
2 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+41 -13
View File
@@ -117,8 +117,8 @@ You can override the default locale by `lang`.
| input-class | input classname | `string` | 'mx-input' | | input-class | input classname | `string` | 'mx-input' |
| input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — | | input-attr | input attrs(eg: { name: 'date', id: 'foo'}) | `object` | — |
| open | open state of picker | `boolean` | - | | open | open state of picker | `boolean` | - |
| popupStyle | popup style | `object` | — | | popup-style | popup style | `object` | — |
| popupClass | popup classes | | — | | popup-class | popup classes | | — |
| shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - | | shortcuts | set shortcuts to select | `Array<{text, onClick}>` | - |
| title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' | | title-format | format of the tooltip in calendar cell | [token](#token) | 'YYYY-MM-DD' |
| range-separator | text of range separator | `string` | ' ~ ' | | 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 | | Year | YY | 70 71 ... 10 11 |
| | YYYY | 1970 1971 ... 2010 2011 | | | YYYY | 1970 1971 ... 2010 2011 |
| | Y | -1000 ...20 ... 1970 ... 9999 +10000 |
| Month | M | 1 2 ... 11 12 | | Month | M | 1 2 ... 11 12 |
| | MM | 01 02 ... 11 12 | | | MM | 01 02 ... 11 12 |
| | MMM | Jan Feb ... Nov Dec | | | MMM | Jan Feb ... Nov Dec |
@@ -173,6 +174,33 @@ You can override the default locale by `lang`.
| Unix Timestamp | X | 1360013296 | | Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 | | Unix Millisecond Timestamp | x | 1360013296123 |
#### custom format
the `format` accepts an object to customize formatting.
```html
<date-picker :format="momentForamt" />
```
```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 #### value-type
set the format of binding value set the format of binding value
@@ -223,17 +251,17 @@ set fixed time list to select;
### Events ### Events
| Name | Description | Callback Arguments | | Name | Description | Callback Arguments |
| ----------- | ------------------------------------ | ---------------------- | | ----------- | ------------------------------------ | -------------------------------------------- |
| input | When the value change(v-model event) | the currentValue | | input | When the value change(v-model event) | date |
| change | When the value change(same as input) | the currentValue, type | | change | When the value change(same as input) | date, type(date, hour, minute, second, ampm) |
| open | When panel opening | | | open | When panel opening | |
| close | When panel closing | | | close | When panel closing | |
| confirm | When click 'confirm' button | the currentValue | | confirm | When click 'confirm' button | date |
| clear | When click 'clear' button | | | clear | When click 'clear' button | |
| input-error | When user type a invalid Date | the input text | | input-error | When user type a invalid Date | the input text |
| focus | When input focus | | | focus | When input focus | |
| blur | When input blur | | | blur | When input blur | |
### Slots ### Slots
README.zh-CN.md
+41 -13
View File
@@ -115,8 +115,8 @@ import 'vue2-datepicker/locale/zh-cn';
| input-class | 输入框的类 | `string` | 'mx-input' | | input-class | 输入框的类 | `string` | 'mx-input' |
| input-attr | 输入框的其他属性(eg: { name: 'date', id: 'foo'}) | `object` | — | | input-attr | 输入框的其他属性(eg: { name: 'date', id: 'foo'}) | `object` | — |
| open | 控制弹出层的显示 | `boolean` | - | | open | 控制弹出层的显示 | `boolean` | - |
| popupStyle | 弹出层的样式 | `object` | — | | popup-style | 弹出层的样式 | `object` | — |
| popupClass | 弹出层的类 | | — | | popup-class | 弹出层的类 | | — |
| shortcuts | 设置快捷选择 | `Array<{text, onClick}>` | - | | shortcuts | 设置快捷选择 | `Array<{text, onClick}>` | - |
| title-format | 日历单元格的 tooltip | [token](#token) | 'YYYY-MM-DD' | | title-format | 日历单元格的 tooltip | [token](#token) | 'YYYY-MM-DD' |
| range-separator | 范围分隔符 | `string` | ' ~ ' | | range-separator | 范围分隔符 | `string` | ' ~ ' |
@@ -141,6 +141,7 @@ import 'vue2-datepicker/locale/zh-cn';
| -------------------------- | ---- | -------------------------------------- | | -------------------------- | ---- | -------------------------------------- |
| Year | YY | 70 71 ... 10 11 | | Year | YY | 70 71 ... 10 11 |
| | YYYY | 1970 1971 ... 2010 2011 | | | YYYY | 1970 1971 ... 2010 2011 |
| | Y | -1000 ...20 ... 1970 ... 9999 +10000 |
| Month | M | 1 2 ... 11 12 | | Month | M | 1 2 ... 11 12 |
| | MM | 01 02 ... 11 12 | | | MM | 01 02 ... 11 12 |
| | MMM | Jan Feb ... Nov Dec | | | MMM | Jan Feb ... Nov Dec |
@@ -171,6 +172,33 @@ import 'vue2-datepicker/locale/zh-cn';
| Unix Timestamp | X | 1360013296 | | Unix Timestamp | X | 1360013296 |
| Unix Millisecond Timestamp | x | 1360013296123 | | Unix Millisecond Timestamp | x | 1360013296123 |
#### custom format
`format` 接受一个对象去自定义格式化
```html
<date-picker :format="momentForamt" />
```
```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 #### value-type
设置绑定值的类型 设置绑定值的类型
@@ -221,17 +249,17 @@ import 'vue2-datepicker/locale/zh-cn';
### 事件 ### 事件
| 名称 | 描述 | 回调函数的参数 | | 名称 | 描述 | 回调函数的参数 |
| ----------- | -------------------- | ---------------------- | | ----------- | -------------------- | -------------------------------------------- |
| input | 当选择日期的事件触发 | 选择的日期 | | input | 当选择日期的事件触发 | date |
| change | 当选择日期的事件触发 | 选择的日期, 选择的类型 | | change | 当选择日期的事件触发 | date, type(date, hour, minute, second, ampm) |
| open | 当弹出层打开时候 | | | open | 当弹出层打开时候 | |
| close | 当弹出层关闭时候 | | | close | 当弹出层关闭时候 | |
| confirm | 当点击确认按钮 | 选择的日期 | | confirm | 当点击确认按钮 | date |
| clear | 当点击清除按钮 | | | clear | 当点击清除按钮 | |
| input-error | 当输入一个无效的时间 | 输入的值 | | input-error | 当输入一个无效的时间 | 输入的值 |
| focus | 当输入框有焦点 | | | focus | 当输入框有焦点 | |
| blur | 当输入框失焦 | | | blur | 当输入框失焦 | |
### Slots ### Slots