// 以 plugin 形式使用时,请在入口处引入:
import { DatetimePlugin } from 'vux'

// 组件内使用
  value: '', // 其他参数同 props
  onHide () {
    const _this = this
  onShow () {
    const _this = this




nametypedefaultdescriptionrequired version
formatstringYYYY-MM-DDdate format. Special characters are not supported, for example, YYYY-MM-DD HH:mm(do not support ss)--
titlestringcell title--
valuestringform's value, use v-model for binding--
inline-descstringdescription of the cell--
placeholderstringplaceholder, works when value is empty--
min-yearnumbermin-year of the form--
max-yearnumbermax-year of the form--
min-hournumber0min hour--
max-hournumber23max hour--
confirm-textstringok(确认)confirm button's text--
cancel-textstringcancel(取消)cancel button's text--
clear-textstringcustom button's text which shows in the middle of the header--
year-rowstring{value}render template for the year column--
month-rowstring{value}render template for the month column--
day-rowstring{value}render template for the day column--
hour-rowstring{value}render template for the hour column--
minute-rowstring{value}render template for the minute column--
start-datestringstart date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours--
end-datestringend date, must be YYYY-MM-DD. Please use min-hour and max-hour to limit the range of hours--
requiredbooleanfalseif required--
display-formatfunctionused to format display valuev2.1.1-rc.11
readonlystringreadonly mode, show like a cellv2.3.6
showbooleancontrol visibility of datetime, require vue^2.3v2.3.7
minute-listarrayspecify minute list, for instance ['00', '15', '30', '45']v2.3.7
hour-listarrayspecify hour list, for instance ['09', '10', '11', '12']v2.3.7
default-selected-valuestringset default selected value, works only when value is emptyv2.4.1
compute-hours-functionfunctiondynamically set hours list, params (value, isToday, generateRange)v2.5.5
compute-days-functionfunctiondynamically set days list, params ({year, month, min, max}, generateRange)v2.6.1
order-mapobjectset column order, {year: 1, month: 2, day: 3, hour: 4, minute: 5, noon: 6}v2.9.0


nameparamsdescriptionrequired 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 hidesv2.7.4
@on-cancel--fires when cancel button is clicked or mask is clickedv2.7.4
@on-confirm(value) v2.9.0 支持该参数fires when confirm button is clickedv2.7.4


namedescriptionrequired version
defaulttrigger element content--
titletitle slotv2.3.6


namedefaultdescriptioninherited 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



Total commits quantity: 94,Total contributors quantity: 10

airyland__FresHmaNLinHaobinmaiiunclaylyh2668Qiongrong Jiang万刚项振兴刘杨



  • 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