Mand Mobile

DatePicker 时间选择器

选择日期或者时间，支持年/月/日/时/分/秒自定义时间列表选择

引入

import { DatePicker } from 'mand-mobile-next'

Vue.createApp().component(DatePicker.name, DatePicker)

代码演示

API

DatePicker Props

属性说明类型默认值备注
v-model选中日期Date/Arraynew Date()如果type是time或者custom, 选中时间是Array, 如[23,59,59], 其他type则是Date类型
type日期选择类型Stringdatedate, time, datetime, custom
custom-types自定义类型包含的日期元素: 'yyyy', 'MM', 'dd', 'hh', 'mm', 'ss'Array-仅用于type为custom
min-date最小可选日期（时间）Date--
max-date最大可选日期（时间）Date--
unit-text元素单位展示文案设置Array['年', '月', '日', '时', '分', '秒']复杂逻辑使用text-render
text-render自定义选项展示文案方法Function(typeFormat, column0Value, column1Value, ...): String-如果使用text-render则unit-text无效, 示例见附录
today-text今天展示文案设置String今天使用&可占位日期数字，如&(今天)
line-height选择器选项行高Number45单位px
keep-index当列数据变化时保持上次停留的位置Booleanfalse-
is-view是否内嵌在页面内展示, 否则以弹层形式Booleanfalse-
title选择器标题String--
describe选择器描述String--
ok-text选择器确认文案String确认-
cancel-text选择器取消文案String取消-
mask-closable点击蒙层是否可关闭弹出层Booleantrue-

DatePicker Methods

getColumnValues(): columnsValue

获取所有列选中项的值

返回

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

DatePicker Events

@change(columnIndex, itemIndex, value)

选择器选中项更改事件

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

@confirm()

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

附录

  • columnData

const columnData = [
  // 年
  [
    {
      text: '2017年', // 日期元素展示文案
      value: 2017, // 日期元素数字
      typeFormat: 'yyyy' // 日期元素类型 yyyy, MM, dd, hh, mm, HalfDay
    }
  ],
  // 月
  [
    {
      text: '1月', // 日期元素展示文案
      value: 1, // 日期元素数字
      typeFormat: 'MM' // 日期元素类型 yyyy, MM, dd, hh, mm, HalfDay
    }
  ],
  // 日, 时, 分, 秒
  [
    ...,
  ]
]
  • textRender
  const MONTH_MAP = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sept',
    'Oct',
    'Nov',
    'Dec',
  ]

  const textRender = (
    typeFormat: string,
    columnValue: number
  ) => {
    if (typeFormat === 'MM') {
      return MONTH_MAP[columnValue - 1]
    }
    return
  }