DatePicker 时间选择器

Scan me!

选择日期或者时间，支持年/月/日/时/分和按照范围选择

引入

  1. import { DatePicker } from 'mand-mobile'
  3. Vue.component(DatePicker.name, DatePicker)

代码演示

日期选择

2013/9/9 - 2020/9/9
  1. <template>
  2.   <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-0">
  3.     <md-date-picker
  4.       ref="datePicker"
  5.       today-text="今天"
  6.       :minDate="minDate"
  7.       :maxDate="maxDate"
  8.       :default-date="currentDate"
  9.       is-view
  10.       @initialed="onDatePickerInitialed"
  11.     ></md-date-picker>
  12.   </div>
  13. </template>
  15. <script>
  16. import {DatePicker} from 'mand-mobile'
  18. export default {
  19.   name: 'date-picker-demo',
  20.   components: {
  21.     [DatePicker.name]: DatePicker,
  22.   },
  23.   data() {
  24.     return {
  25.       minDate: new Date('2013/9/9'),
  26.       maxDate: new Date('2020/9/9'),
  27.       currentDate: new Date(),
  28.     }
  29.   },
  30.   methods: {
  31.     onDatePickerInitialed() {
  32.       console.log(`[Mand Mobile] DatePicker getFormatDate: ${this.$refs.datePicker.getFormatDate('yyyy/MM/dd')}`)
  33.     },
  34.   },
  35. }
  37. </script>
  38.  
  39.

日期时间选择 getFormatDate()

  1. <template>
  2.   <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-2">
  3.     <md-date-picker
  4.       ref="datePicker"
  5.       type="datetime"
  6.       :default-date="currentDate"
  7.       is-twelve-hours
  8.       is-view
  9.     ></md-date-picker>
  10.   </div>
  11. </template>
  13. <script>
  14. import {DatePicker, Dialog} from 'mand-mobile'
  16. export default {
  17.   name: 'date-picker-demo',
  18.   components: {
  19.     [DatePicker.name]: DatePicker,
  20.   },
  21.   data() {
  22.     return {
  23.       currentDate: new Date(),
  24.     }
  25.   },
  26.   mounted() {
  27.     window.triggerDatePicker0 = () => {
  28.       Dialog.alert({
  29.         content: this.$refs.datePicker.getFormatDate(),
  30.       })
  31.     }
  32.   },
  33. }
  35. </script>
  36.  
  37.

时间选择

  1. <template>
  2.   <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-1">
  3.     <md-date-picker
  4.       type="time"
  5.       :unit-text="['', '', '', 'h', 'm']"
  6.       :half-day-text="['AM', 'PM']"
  7.       :minute-step="30"
  8.       is-twelve-hours
  9.       is-view
  10.     ></md-date-picker>
  11.   </div>
  12. </template>
  14. <script>
  15. import {DatePicker} from 'mand-mobile'
  17. export default {
  18.   name: 'date-picker-demo',
  19.   components: {
  20.     [DatePicker.name]: DatePicker,
  21.   },
  22. }
  24. </script>
  25.

自定义类型和选项文案值

  1. <template>
  2.   <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-3">
  3.     <md-field>
  4.       <md-field-item
  5.         name="name"
  6.         title="出险时间"
  7.         arrow="arrow-right"
  8.         align="right"
  9.         :value="datePickerValue"
  10.         @click.native="isDatePickerShow = true">
  11.       </md-field-item>
  12.     </md-field>
  13.     <md-date-picker
  14.       ref="datePicker"
  15.       v-model="isDatePickerShow"
  16.       type="custom"
  17.       today-text="&(今天)"
  18.       title="选择出险时间"
  19.       is-twelve-hours
  20.       :text-render="textRender"
  21.       :custom-types="['yyyy', 'MM','dd', 'hh', 'mm']"
  22.       :default-date="currentDate"
  23.       @change="onDatePickerChange"
  24.       @confirm="onDatePickerConfirm"
  25.     ></md-date-picker>
  26.   </div>
  27. </template>
  29. <script>
  30. import {DatePicker, Field, FieldItem} from 'mand-mobile'
  32. export default {
  33.   name: 'date-picker-demo',
  34.   components: {
  35.     [DatePicker.name]: DatePicker,
  36.     [Field.name]: Field,
  37.     [FieldItem.name]: FieldItem,
  38.   },
  39.   data() {
  40.     return {
  41.       currentDate: new Date(),
  42.       isDatePickerShow: false,
  43.       datePickerValue: '',
  44.     }
  45.   },
  46.   methods: {
  47.     textRender() {
  48.       const args = Array.prototype.slice.call(arguments)
  49.       const typeFormat = args[0] // 类型
  50.       const column0Value = args[1] // 第1列选中值
  51.       const column1Value = args[2] // 第2列选中值
  52.       const column2Value = args[3] // 第3列选中值
  54.       if (typeFormat === 'dd') {
  55.         return `${column0Value}/${column1Value}/${column2Value}`
  56.       }
  57.     },
  58.     onDatePickerChange(columnIndex, itemIndex, value) {
  59.       console.log(
  60.         `[Mand Mobile] DatePicker Change\ncolumnIndex: ${columnIndex},\nitemIndex:${itemIndex},\nvalue: ${JSON.stringify(
  61.           value,
  62.         )}`,
  63.       )
  64.     },
  65.     onDatePickerConfirm(columnsValue) {
  66.       console.log(`[Mand Mobile] DatePicker Confirm\nvalue: ${JSON.stringify(columnsValue)}`)
  67.       this.datePickerValue = this.$refs.datePicker.getFormatDate('yyyy/MM/dd hh:mm')
  68.     },
  69.   },
  70. }
  72. </script>
  73.

API

DatePicker Props

属性说明类型默认值备注
type日期选择类型Stringdatedate, time, datetime, custom
custom-types自定义类型包含的日期元素, [yyyy, MM, dd, hh, mm]Array-仅用于type为custom
minDate最小可选日期Date--
maxDate最大可选日期Date--
default-date初始选中日期Date--
minute-step分钟数递增步长Number1-
unit-text元素单位展示文案设置Array['年', '月', '日', '时', '分']复杂逻辑使用text-render
text-render自定义选项展示文案方法Function(typeFormat, column0Value, column1Value, …): String-如果使用text-render则unit-text无效, 示例见附录
today-text今天展示文案设置String今天使用&可占位日期数字，如&(今天)
half-day-text上下午展示文案设置Array['上午', '下午']-
is-twelve-hours是否为12时制Booleanfalse-
is-view是否内嵌在页面内展示, 否则以弹层形式Booleanfalse-
title选择器标题String--
ok-text选择器确认文案String确认-
cancel-text选择器取消文案String取消-
mask-closable点击蒙层是否可关闭弹出层Booleantrue-

DatePicker Methods

getFormatDate(format): dateStr

获取特定格式的日期时间字符串（format中的日期元素需在列数据中存在），需在initialed事件触发之后或异步调用

参数说明类型默认
format格式Stringyyyy-MM-dd hh:mm

返回

属性说明类型
dateStr日期时间字符串String

列表项值属性介绍见附录

getColumnValue(index): activeItemValue

获取某列当前选中项的值，需在initialed事件触发之后或异步调用

参数说明类型
index列索引Number

返回

属性说明类型
activeItemValue选中项的值Object: {text, value, typeFormat}
getColumnValues(): columnsValue

获取所有列选中项的值，需在initialed事件触发之后或异步调用

返回

属性说明类型
columnsValue所有列选中项的值Array<{text, value, typeFormat}>
getColumnIndex(index): activeItemIndex

获取某列当前选中项的索引值，需在initialed事件触发之后或异步调用

参数说明类型
index列索引Number

返回

属性说明类型
activeItemIndex选中项的索引值Number
getColumnIndexs(): columnsIndex

获取所有列选中项的索引值，需在initialed事件触发之后或异步调用

返回

属性说明类型
columnsIndex所有列选中项的索引值Array

DatePicker Events

@initialed()

选择器数据初始化完成事件

@change(columnIndex, itemIndex, value)

选择器选中项更改事件

参数说明类型
columnIndex更改列的索引值Number
itemIndex更改列选中项的索引值Number
value更改列选中项的的值Object: {text, value, typeFormat}
@confirm(columnsValue)

选择器确认选择事件（仅is-view为false）

参数说明类型
columnsValue所有列选中项的值Array<{text, value, typeFormat}>

附录

  • columnData 
  2. const columnData = [
  3.   // 年
  4.   [
  5.     {
  6.       text: '2017年', // 日期元素展示文案
  7.       value: 2017, // 日期元素数字
  8.       typeFormat: 'yyyy' // 日期元素类型 yyyy, MM, dd, hh, mm, HalfDay
  9.     }
  10.   ],
  11.   // 月, 日，时， 分
  12.   [
  13.     //..,
  14.   ],
  15.   // 上午/下午
  16.   [
  17.     {
  18.       text: '上午',
  19.       value: 0,
  20.       typeFormat: 'HalfDay'
  21.     }, {
  22.       text: '下午',
  23.       value: 1,
  24.       typeFormat: 'HalfDay'
  25.     }
  26.   ]
  27. ]
  • textRender
  2.   export default {
  3.     // ...
  4.     methods: {
  5.       textRender() {
  6.         const args = Array.prototype.slice.call(arguments)
  7.         const typeFormat = args[0] // 类型
  8.         const column0Value = args[1] // 第1列选中值
  9.         const column1Value = args[2] // 第2列选中值
  10.         const column2Value = args[3] // 第2列选中值
  11.       },
  12.     }
  13.     // ...
  14.   }