需要在Group组件里使用
该组件支持以plugin形式调用：
// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)
// 组件内使用
this.$vux.datetime.show({
value: '', // 其他参数同 props
onHide () {
const _this = this
},
onShow () {
const _this = this
}
})
this.$vux.datetime.hide()
API
Variables
Props
| name | type | default | description | required version |
| format | string | YYYY-MM-DD | date format. Special characters are not supported, for example, YYYY-MM-DD HH:mm(do not support ss) | -- |
| title | string | cell title | -- | |
| value | string | form's value, use v-model for binding | -- | |
| inline-desc | string | description of the cell | -- | |
| placeholder | string | placeholder, works when value is empty | -- | |
| min-year | number | min-year of the form | -- | |
| max-year | number | max-year of the form | -- | |
| min-hour | number | 0 | min hour | -- |
| max-hour | number | 23 | max hour | -- |
| confirm-text | string | ok(确认) | confirm button's text | -- |
| cancel-text | string | cancel(取消) | cancel button's text | -- |
| clear-text | string | custom button's text which shows in the middle of the header | -- | |
| year-row | string | {value} | render template for the year column | -- |
| month-row | string | {value} | render template for the month column | -- |
| day-row | string | {value} | render template for the day column | -- |
| hour-row | string | {value} | render template for the hour column | -- |
| minute-row | string | {value} | render template for the minute column | -- |
| start-date | string | start date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours | -- | |
| end-date | string | end date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours | -- | |
| required | boolean | false | if required | -- |
| display-format | function | used to format display value | v2.1.1-rc.11 | |
| readonly | string | readonly mode, show like a cell | v2.3.6 | |
| show | boolean | control visibility of datetime, require vue^2.3 | v2.3.7 | |
| minute-list | array | specify minute list, for instance ['00', '15', '30', '45'] | v2.3.7 | |
| hour-list | array | specify hour list, for instance ['09', '10', '11', '12'] | v2.3.7 | |
| default-selected-value | string | set default selected value, works only when value is empty | v2.4.1 | |
| compute-hours-function | function | dynamically set hours list, params (value, isToday, generateRange) | v2.5.5 | |
| compute-days-function | function | dynamically set days list, params ({year, month, min, max}, generateRange) | v2.6.1 | |
| order-map | object | set column order, {year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6} | v2.9.0 |
Events
| name | params | description | required version |
| @on-change | (value) | $emits when value changes, (newVal) | -- |
| @on-clear | -- | $emits when click the button in the middle of the header | -- |
| @on-show | -- | fires when datetime shows | -- |
| @on-hide | (type), type is one of [cancel, confirm] | fires when datetime hides | v2.7.4 |
| @on-cancel | -- | fires when cancel button is clicked or mask is clicked | v2.7.4 |
| @on-confirm | (value) v2.9.0 支持该参数 | fires when confirm button is clicked | v2.7.4 |
Slots
| name | description | required version |
| default | trigger element content | -- |
| title | title slot | v2.3.6 |
Variables
| name | default | description | inherited name |
| @datetime-header-item-font-color | #04BE02 | -- | @theme-color |
| @datetime-header-item-cancel-font-color | #828282 | -- | |
| @datetime-header-item-confirm-font-color | #04BE02 | -- | @datetime-header-item-font-color |
Contributors
Contributors
Total commits quantity: 94，Total contributors quantity: 10
airyland__FresHmaNLinHaobinmaiiunclaylyh2668Qiongrong Jiang万刚项振兴刘杨Changelog
Releases
- v2.9.0 [feature] support order-map to customize column orders #2300
- v2.9.0 [fix] fix mask cause body scroll in iOS #2593
- v2.9.0 [feature] add arg:value for event:on-confirm #2632
- v2.9.0 [fix] fire event:on-confirm after nextTick #2632
- v2.9.0 [feature] support format YYYY-MM-DD A #2627 @jack87918
- v2.7.8 [fix] fix `on-hide` event trigger twice #2379
- v2.7.8 [fix] fix cannot set `show` to `true` initially
- v2.7.6 [fix] column value use number type, fix binding value is not equal to datetimepicker value #2296
- v2.7.4 [feature] add event:on-confirm event:on-cancel #2221
- v2.7.2 [enhance] set default start-date if end-date is specified but start-date is not #2158
- v2.7.1 [fix] fix less variables do not work in plugin usage #2152
- v2.7.0 [fix] fix ssr i18n bug
- v2.7.0 [fix] fix datetime still shows when prop:readonly is true #2079
- v2.6.1 [feature] support prop:compute-days-function for dynamically setting days #1992
- v2.6.0 [fix] fix i18n for cancel_text confirm_text
- v2.5.11 [fix] fix :show.syc="false" do no work #1918
- v2.5.11 [fix] fix prop:compute-hours-function not working when month is changed
- v2.5.10 [feature] support @cell-value-color #1874
- v2.5.9 [fix] fix error when format is YYYY #1861
- v2.5.5 [feature] support prop:compute-hours-function #1749
- v2.5.5 [enhance] better mask transition
- v2.4.1 [fix] Re-render when readonly is changed #1593
- v2.4.1 [feature] Support prop:default-selected-value #1576
- v2.4.0 [enhance] use the same popup header style as popup-picker
- v2.3.7 [feature] Add prop:show to control visibility #1538
- v2.3.7 [fix] Fix range error with format YYYY-MM #1358
- v2.3.7 [feature] Add prop:hourList prop:minuteList
- v2.3.7 [fix] startDate year should overwrite minYear #1358
- v2.3.6 [feature] Add slot:title
- v2.3.6 [feature] Add prop:readonly
- v2.3.6 [fix] Fix a bug caused by scroller #1406
- v2.3.4 [fix] do not trigger on-change on first-value-setting
- v2.2.1-rc.8 [enhance] now changing prop:format will trigger re-rendering
- v2.2.0 [fix] render picker on nextTick #1180
- v2.1.1-rc.11 [feature] Support prop:display-format #1086 @greedying
- v2.1.1-rc.7 [enhance] Support PC mouse drag #1039 @michael829