demo 原始链接:https://vux.li/demos/v2/#/component/datetime
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" plain @click.native=\"showPlugin\">{{ $t('Used as a plugin') }}</x-button>\n </div>\n\n <group :title=\"$t('Default format: YYYY-MM-DD')\">\n <datetime\n v-model=\"value1\"\n @on-change=\"change\"\n :title=\"$t('Birthday')\"\n @on-cancel=\"log('cancel')\"\n @on-confirm=\"log('confirm')\"\n @on-hide=\"log('hide', $event)\"></datetime>\n </group>\n\n <group :title=\"$t('Custom minute list: every 15 minutes')\">\n <datetime v-model=\"minuteListValue\" format=\"YYYY-MM-DD HH:mm\" :minute-list=\"['00', '15', '30', '45']\" @on-change=\"change\" :title=\"$t('Birthday')\"></datetime>\n </group>\n\n <group :title=\"$t('Custom hour list')\">\n <datetime v-model=\"hourListValue\" format=\"YYYY-MM-DD HH:mm\" :hour-list=\"['09', '10', '11', '12', '13', '14', '15', '16']\" :minute-list=\"['00', '15', '30', '45']\" @on-change=\"change\" :title=\"$t('Birthday')\"></datetime>\n </group>\n\n <group title=\"Readonly\">\n <datetime v-model=\"valueReadonly\" :readonly=\"readonly\" @on-change=\"change\" :title=\"$t('Birthday')\"></datetime>\n </group>\n <div style=\"padding:15px\">\n <x-button type=\"primary\" plain @click.native=\"readonly = !readonly\"> {{ $t('Toggle readonly') }} </x-button>\n </div>\n\n <group :title=\"$t('Format display value')\">\n <datetime v-model=\"formatValue\" :display-format=\"formatValueFunction\" @on-change=\"change\" :title=\"$t('Birthday')\"></datetime>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"formatValue = '2017-11-11'\">{{ $t('Set value: 2017-11-11') }}</x-button>\n </div>\n\n <group :title=\"$t('Define range of hours')\">\n <datetime v-model=\"limitHourValue\" format=\"YYYY-MM-DD HH:mm\" :min-hour=9 :max-hour=18 @on-change=\"change\" :title=\"$t('Define range of hours')\" :inline-desc=\"$t('Working hours: 09-18')\"></datetime>\n </group>\n\n <group :title=\"$t('Set start-date and end-date') + ' 2015-11-11 ~ 2017-10-11'\">\n <datetime v-model=\"limitHourValue\" :start-date=\"startDate\" :end-date=\"endDate\" format=\"YYYY-MM-DD HH:mm\" @on-change=\"change\" :title=\"$t('Start time')\"></datetime>\n </group>\n\n <group :title=\"$t('Set end-date only') + ' 2017-10-11'\">\n <datetime v-model=\"onlySetEndDateValue\" :end-date=\"onlySetEndDate\" format=\"YYYY-MM-DD HH:mm\" @on-change=\"change\" :title=\"$t('Start time')\"></datetime>\n </group>\n\n <group :title=\"$t('Format') + ': ' + format\">\n <datetime v-model=\"value2\" :format=\"format\" @on-change=\"change\" :title=\"$t('Start time')\"></datetime>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"toggleFormat\">{{ $t('Toggle format') }}</x-button>\n </div>\n\n <group :title=\"$t('Placeholder')\">\n <datetime v-model=\"value3\" default-selected-value=\"2017-06-18 13\" format=\"YYYY-MM-DD HH\" :placeholder=\"$t('Please select')\" @on-change=\"change\" :title=\"$t('Start time')\"></datetime>\n </group>\n\n <group :title=\"$t('Set default-selected-value to 2017-11-11')\">\n <datetime v-model=\"value3_1\" default-selected-value=\"2017-11-11\" format=\"YYYY-MM-DD\" :placeholder=\"$t('Please select')\" @on-change=\"change\" :title=\"$t('Start time')\" :inline-desc=\" $t('Current value') + `: ${value3_1}`\"></datetime>\n </group>\n\n <group :title=\"$t('Set min-year and max-year')\">\n <datetime v-model=\"value4\" :placeholder=\"$t('Please select')\" :min-year=2000 :max-year=2016 format=\"YYYY-MM-DD HH:mm\" @on-change=\"change\" :title=\"$t('Years after 2000')\"></datetime>\n </group>\n\n <group :title=\"$t('Prop: compute-hours-function')\">\n <datetime format=\"YYYY-MM-DD HH\" v-model=\"computeHoursValue\" :compute-hours-function=\"computeHoursFunction\" :title=\"$t('Birthday')\" @on-change=\"change\"></datetime>\n </group>\n\n <group :title=\"$t('Prop: compute-days-function')\">\n <datetime format=\"YYYY-MM-DD HH\" v-model=\"computeDaysValue\" :compute-days-function=\"computeDaysFunction\" :title=\"$t('Birthday')\" @on-change=\"change\"></datetime>\n </group>\n\n <group :title=\"$t('Specified template text in Chinese')\">\n <datetime v-model=\"value5\" :placeholder=\"$t('Please select')\" :min-year=2000 :max-year=2016 format=\"YYYY-MM-DD HH:mm\" @on-change=\"change\" :title=\"$t('Chinese')\" year-row=\"{value}年\" month-row=\"{value}月\" day-row=\"{value}日\" hour-row=\"{value}点\" minute-row=\"{value}分\" confirm-text=\"完成\" cancel-text=\"取消\"></datetime>\n </group>\n\n <group :title=\"$t('Show center button and clear the value')\">\n <datetime v-model=\"value6\" @on-change=\"change\" :title=\"$t('Birthday')\" clear-text=\"clear\" @on-clear=\"clearValue\"></datetime>\n </group>\n\n <group :title=\"$t('Show center button to set date to today')\">\n <datetime v-model=\"value7\" @on-change=\"change\" :title=\"$t('Birthday')\" clear-text=\"today\" @on-clear=\"setToday\"></datetime>\n </group>\n\n <group :title=\"$t('Custom trigger slot')\">\n <datetime v-model=\"value7\" @on-change=\"change\" :title=\"$t('Birthday')\" clear-text=\"today\" @on-clear=\"setToday\">\n <x-button>{{$t('Click me')}}</x-button>\n </datetime>\n </group>\n\n <group :title=\"$t('Required')\">\n <datetime v-model=\"value8\" :title=\"$t('Required')\" clear-text=\"clear\" @on-clear=\"clearValue8\" :required=\"true\"></datetime>\n </group>\n\n <group :title=\"$t('Use prop: show.sync (vue^2.3) to control visibility')\">\n <datetime v-model=\"value9\" @on-change=\"change\" :title=\"$t('Birthday')\" :show.sync=\"visibility\"></datetime>\n </group>\n\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" plain @click.native=\"visibility = true\">显示</x-button>\n </div>\n\n </div>\n</template>\n\n\n\n<script>\nimport { Datetime, Group, XButton } from 'vux'\n\nexport default {\n components: {\n Datetime,\n Group,\n XButton\n },\n data () {\n return {\n readonly: true,\n minuteListValue: '2017-06-12 09:00',\n hourListValue: '2017-06-12 09:00',\n format: 'YYYY-MM-DD HH:mm',\n value1: '2015-11-12',\n valueReadonly: '2015-11-12',\n value2: '',\n value3: '',\n value3_1: '',\n value4: '',\n value5: '',\n value6: '2016-08-18',\n value7: '',\n value8: '',\n limitHourValue: '',\n startDate: '2015-11-11',\n endDate: '2017-10-11',\n formatValue: '2017-10-11',\n formatValueFunction (val) {\n return val.replace(/-/g, '$')\n },\n value9: '',\n visibility: false,\n computeHoursValue: '',\n computeDaysValue: '',\n computeHoursFunction (date, isToday, generateRange) {\n if (isToday) {\n return generateRange(new Date().getHours(), 23)\n } else {\n return generateRange(0, 23)\n }\n },\n computeDaysFunction (options, generateRange) {\n return [options.month] // if current month is n, days are [n]\n },\n onlySetEndDate: '2017-10-11',\n onlySetEndDateValue: ''\n }\n },\n methods: {\n log (str1, str2 = '') {\n console.log(str1, str2)\n },\n showPlugin () {\n this.$vux.datetime.show({\n cancelText: '取消',\n confirmText: '确定',\n format: 'YYYY-MM-DD HH',\n value: '2017-05-20 18',\n onConfirm (val) {\n console.log('plugin confirm', val)\n },\n onShow () {\n console.log('plugin show')\n },\n onHide () {\n console.log('plugin hide')\n }\n })\n },\n toggleFormat () {\n this.format = this.format === 'YYYY-MM-DD HH:mm' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm'\n },\n change (value) {\n console.log('change', value)\n },\n clearValue (value) {\n this.value6 = ''\n },\n clearValue8 (value) {\n this.value8 = ''\n },\n setToday (value) {\n let now = new Date()\n let cmonth = now.getMonth() + 1\n let day = now.getDate()\n if (cmonth < 10) cmonth = '0' + cmonth\n if (day < 10) day = '0' + day\n this.value7 = now.getFullYear() + '-' + cmonth + '-' + day\n console.log('set today ok')\n }\n }\n}\n</script>\n\n<style scoped lang=\"less\">\n.center {\n padding-top: 10px;\n padding-left: 15px;\n color: green;\n}\n</style>\n\n
\n