首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

日期时间选择器 | Datetime picker

日期时间选择器,支持自定义类型。

引入

代码语言:javascript
复制
import { DatetimePicker } from 'mint-ui';

Vue.component(DatetimePicker.name, DatetimePicker);

例子

v-model 属性为组件的绑定值。

type 属性表示 datetime-picker 组件的类型,它有三个可能的值:

  • datetime: 日期时间选择器,可选择年、月、日、时、分,value 值为一个 Date 对象
  • date: 日期选择器,可选择年、月、日,value 值为一个 Date 对象
  • time: 时间选择器,可选择时、分,value 值为一个格式为 HH:mm 的字符串

datetime-picker 提供了两个供外部调用的方法:openclose,分别用于打开和关闭选择器。

代码语言:javascript
复制
<template>
  <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue">
  </mt-datetime-picker>
</template>

<script>
  export default {
    methods: {
      openPicker() {
        this.$refs.picker.open();
      }
    }
  };
</script>

可以为选项提供自定义模板。模板须为一个包含了 {value} 的字符串,{value} 会被解析为相应选项的值。

代码语言:javascript
复制
<mt-datetime-picker
  v-model="pickerVisible"
  type="date"
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日">
</mt-datetime-picker>

当点击确认按钮时会触发 confirm 事件,参数为当前 value 的值。

代码语言:javascript
复制
<mt-datetime-picker
  v-model="pickerVisible"
  type="time"
  @confirm="handleConfirm">
</mt-datetime-picker>

API

参数

说明

类型

可选值

默认值

type

组件的类型

String

'datetime', 'date', 'time'

'datetime'

cancelText

取消按钮文本

String

'取消'

confirmText

确定按钮文本

String

'确定'

startDate

日期的最小可选值

Date

十年前的 1 月 1 日

endDate

日期的最大可选值

Date

十年后的 12 月 31 日

startHour

小时的最小可选值

Number

0

endHour

小时的最大可选值

Number

23

yearFormat

年份模板

String

'{value}'

monthFormat

月份模板

String

'{value}'

dateFormat

日期模板

String

'{value}'

hourFormat

小时模板

String

'{value}'

minuteFormat

分钟模板

String

'{value}'

Events

事件名称

说明

回调参数

confirm

点击确认按钮时的回调函数

目前的选择值

扫码关注腾讯云开发者

领取腾讯云代金券