天猫精灵IoT开放平台
DateTime 时间选择器
更新时间：2019/08/02
访问次数：1338
参数
继承 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>
