DateTime 时间选择器

更新时间：2019/08/02 访问次数：1567

参数

继承 ActionDialog，理论上 ActionDialog 支持的，它都支持

参数	说明	类型	可选值	默认值
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}分
activeColor	选中的颜色	string	——	#333
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" activeColor="#0082aa" @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>

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

天猫精灵IoT开放平台

DateTime 时间选择器

参数

Events

使用示例

FAQ