DatetimePicker 时间选择器

使用指南

DatetimePicker组件是时间选择器，选择时间

TIP

此组件基于h3-picker组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div class="list">
    <p>datetime-picker 组件</p>
    <h3-button @click="datetimepickervisible = true" type="primary">
      show datetimepicker
    </h3-button>
    <br />
    <h3-button @click="datetimepickervisible1 = true" type="primary">
      show datetimepicker(mode=time)
    </h3-button>
    <h3-datetime-picker v-model="datetimepickervisible" maskClosable format="YYYY-MM-DD HH:mm:ss" />

    <h3-datetime-picker
      :start-time="6 * 60 * 60 + 45"
      v-model="datetimepickervisible1"
      maskClosable
      value="12:00:00"
      mode="time"
      format="HH:mm:ss"
      extraText=""
    />
  </div>
</template>

<script>
import H3DatetimePicker from '@/components/h3-datetime-picker/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'DatetimePicker',
  components: {
    H3DatetimePicker,
    H3Button,
  },
  data () {
    return {
      datetimepickervisible: false,
      datetimepickervisible1: false,
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件，仅仅是一个简单的picker式的组件，与原来的h3-datetime不同。

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
maskClosable	点击蒙层是否可触发关闭	Boolean	false
mask	是否显示透明蒙层，防止触摸穿透	Boolean	true
maskCls	mask蒙层自定义class	string	无
wrapCls	wrap弹窗内容区域的自定义class	string	无
round	是否圆角	boolean	false
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	标题	string	-
cancelText	第一个按钮文本	string	'取消'
clearText	第二个按钮文本	string	'清空'
extraText	第三个按钮文本	string	'此刻'
confirmText	第四个按钮文本	string	'确定'
value	选中的数据，可以是Date对象或者符合format格式的字符串	date, string	new Date()
startDate	选择范围的开始时间，可以是Date对象或者能转成Date的字符串	date, string	new Date(1980, 0, 1, 0, 0, 0)
endDate	选择范围的结束时间，可以是Date对象或者能转成Date的字符串	date, string	new Date(今年 + 60, 11, 31, 23, 59, 59)
format	时间格式，根据时间格式控制控件显示列数，年:YYYY, 月:MM|M, 日:DD|D, 时:HH|H, 分:mm|m, 秒:ss|s	string	'YYYY-MM-DD'
mode	datetime|time，为time时，控制颗粒度为时分秒，此时startDate endDate失效，通过startTime endTime来控制开始结束范围，若需要显示指定的年月日可以通过timeBaseDate来控制	string	'datetime'
timeBaseDate	mode=time时启用，可以是Date对象或者能转成Date的字符串	date, string	new Date()
startTime	mode=time时启用，00:00:00 ~ 23:59:59 之间开始的秒数	number	0
endTime	mode=time时启用，00:00:00 ~ 23:59:59 之间结束的秒数	number	24 * 60 * 60 - 1

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
select	当点击确认按钮或清空按钮时的回调	(value, Date)
cancel	当点击取消按钮及蒙层回调	-