Datetime picker - 日期时间选择器

2021-01-13 14:38 更新
日期时间选择器,支持自定义类型。

引入

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 ​提供了两个供外部调用的方法:​open ​和 ​close​,分别用于打开和关闭选择器。

<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}​ 会被解析为相应选项的值。

<mt-datetime-picker
  v-model="pickerVisible"
  type="date"
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日">
</mt-datetime-picker>

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

<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 点击确认按钮时的回调函数 目前的选择值


实例演示

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部