DateTime 时间选择器 - 图1

参数

参数	说明	类型	可选值	默认值
value	选中的时间	string	——	——
type	类型	string	[‘datetime’, ‘date’, ‘month’, ‘day’, ‘time’]	date
startDate	开始日期	string	——	——
endDate	结束日期	string	——	——
startHour	开始时间	string	——	——
endHour	结束日期	string	——	——
yearFormat	年格式化	string	——	{value}年
monthFormat	月格式化	string	——	{value}月
dayFormat	日格式化	string	——	{value}日
hourFormat	小时格式化	string	——	{value}时
minuteFormat	分钟格式化	string	——	{value}分
ActionDialog参数	所有 ActionDialog 支持的参数	——	——	——

Events

事件名称	说明	回调参数
confirm	点击确定回调	——
close	点击取消回调	——
closed	消失动画结束回调	——

使用示例

<template>
  <div class="datetime">
    <p @click="onPick('show')">全量选择</p>
    <p @click="onPick('show2')">时间选择</p>
    <p @click="onPick('show3')">年月日选择</p>
    <p @click="onPick('show4')">月份选择</p>
    <p @click="onPick('show5')">日期选择</p>
    <date-time :show.sync="show" v-model="d" type="datetime" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show2" v-model="d2" type="time" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show3" v-model="d3" type="date" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show4" v-model="d4" type="month" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show5" v-model="d5" type="day" @confirm="onConfirm"></date-time>
  </div>
</template>
<script>
import Vue from "vue";
import { DateTime } from "genie-ui";
export default {
  components: {
    DateTime,
  },
  data () {
    return {
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      d: '1998-02-03 11:03',
      d2: '12:15',
      d3: '2010-01-30', // [2017-12-22]
      d4: '2009-02',
      d5: '11-11',
      d6: '30: 40',
      date: '',
    }
  },
  created() {
  },
  methods: {
    onPick (vm) {
      this[vm] = true
    },
    onConfirm (v) {
      console.log(v)
    },
  }
};
</script>
<style scoped>
.datetime{
    padding: 30px;
}
p{
  margin-top: 20px;
}
.select-list{
  margin-top: 20px;
}
</style>