# DatetimePicker
# 基础渲染
选择年月日
年月日
选择年月
年月
选择月日
月日
选择时分
时分
选项过滤器
过滤器
选项完整时间
完整时间
<template>
<div class="datetime-picker-demo">
<p class="title">选择年月日</p>
<d-cell
label="年月日"
desc="描述文字"
right-icon="return"
@click="showDatetime(1)"
>
<input
slot="desc"
readonly
type="text"
@click="showDatetime(1)"
v-model="value1"
placeholder="请选择年月日"
/>
</d-cell>
<p class="title">选择年月</p>
<d-cell
label="年月"
desc="描述文字"
right-icon="return"
@click="showDatetime(2)"
>
<input
slot="desc"
readonly
type="text"
@click="showDatetime(2)"
v-model="value2"
placeholder="请选择年月"
/>
</d-cell>
<p class="title">选择月日</p>
<d-cell
label="月日"
desc="描述文字"
right-icon="return"
@click="showDatetime(3)"
>
<input
slot="desc"
readonly
v-model="value3"
type="text"
@click="showDatetime(3)"
placeholder="请选择月日"
/>
</d-cell>
<p class="title">选择时分</p>
<d-cell
label="时分"
desc="描述文字"
right-icon="return"
@click="showDatetime(4)"
>
<input
slot="desc"
readonly
type="text"
v-model="value4"
@click="showDatetime(4)"
placeholder="请选择时分"
/>
</d-cell>
<p class="title">选项过滤器</p>
<d-cell
label="过滤器"
desc="描述文字"
right-icon="return"
@click="showDatetime(5)"
>
<input
slot="desc"
readonly
type="text"
v-model="value5"
@click="showDatetime(5)"
placeholder="请选择选项过滤器"
/>
</d-cell>
<p class="title">选项完整时间</p>
<d-cell
label="完整时间"
desc="描述文字"
right-icon="return"
@click="showDatetime(5)"
>
<input
slot="desc"
readonly
type="text"
v-model="value6"
@click="showDatetime(6)"
placeholder="请选择完整时间"
/>
</d-cell>
<d-popup
:position="position"
:visible="visible"
render-in-place
@maskClick="handleMaskClick"
>
<d-datetime-picker
v-model="value1"
v-if="datetimeNum === 1"
type="yearMonthDate"
title="请选择年月日"
@cancel="visible = false"
@confirm="visible = false"
:formatter="formatter"
></d-datetime-picker>
<d-datetime-picker
v-model="value2"
v-if="datetimeNum === 2"
type="yearMonth"
title="请选择年月"
@cancel="visible = false"
@confirm="confirm"
:formatter="formatter"
></d-datetime-picker>
<d-datetime-picker
v-if="datetimeNum === 3"
type="monthDate"
title="请选择月日"
@cancel="visible = false"
@confirm="confirm"
:formatter="formatter"
></d-datetime-picker>
<d-datetime-picker
v-if="datetimeNum === 4"
type="hourMinute"
title="请选择时分"
@cancel="visible = false"
@confirm="confirm"
:formatter="formatter"
></d-datetime-picker>
<d-datetime-picker
v-if="datetimeNum === 5"
type="hourMinute"
title="请选择过滤器"
@cancel="visible = false"
@confirm="confirm"
:filter="filter"
:formatter="formatter"
></d-datetime-picker>
<d-datetime-picker
v-model="value6"
v-if="datetimeNum === 6"
:maxDate="new Date(2030, 11, 31)"
@cancel="visible = false"
@confirm="confirm"
></d-datetime-picker>
</d-popup>
</div>
</template>
<script>
export default {
data() {
return {
datetimeNum: '',
value1: new Date(),
value2: '',
value3: '',
value4: '',
value5: '',
value6: new Date(),
position: 'bottom',
visible: false,
};
},
methods: {
showDatetime(num) {
this.datetimeNum = num;
this.visible = true;
},
handleMaskClick() {
this.visible = false;
},
confirm(valueData) {
this.visible = false;
if (this.datetimeNum === 2) {
this.value2 = valueData.dateData;
} else if (this.datetimeNum === 3) {
this.value3 = valueData.dateString;
} else if (this.datetimeNum === 4) {
this.value4 = valueData.dateString;
} else if (this.datetimeNum === 5) {
this.value5 = valueData.dateString;
} else if (this.datetimeNum === 5) {
this.value6 = valueData.dateData;
}
},
filter(type, options) {
if (type === 'minute') {
return options.filter(option => option.value % 5 === 0);
}
return options;
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`;
} else if (type === 'month') {
return `${value}月`;
} else if (type === 'date') {
return `${value}日`;
}
return value;
},
},
};
</script>
<style scoped lang="scss">
.datetime-picker-demo {
.title {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
input {
outline: none;
padding: 0;
width: 100%;
height: 22px;
border: none;
font-size: 15px;
line-height: 1;
}
::v-deep .d-cell {
cursor: pointer;
&-box {
border-bottom: 0 !important;
}
i {
transform: rotate(180deg);
}
}
}
</style>
# 常见问题
# 设置 minDate 或 maxDate 后出现页面卡死的情况？
请注意不要在模板中直接使用类似minDate="new Date()"的写法，这样会导致每次渲染组件时传入一个新的 Date 对象，
而传入新的数据会触发下一次渲染，从而陷入死循环。
正确的做法是将minDate作为一个数据定义在data函数中。
# 在 iOS 系统上初始化组件失败？
如果你遇到了在 iOS 上无法渲染组件的问题，
请确认在创建 Date 对象时没有使用new Date('2021-01-01')这样的写法，
iOS 不支持以中划线分隔的日期格式，正确写法是new Date('2020/01/01')。
# 是否有年份或月份选择器？
如果仅需要选择年份或者月份，建议直接使用 Picker 组件。
# # API
# # 属性
| 名称 | 说明 | 类型 | 默认值 |
| value | 当前选中的值 | string | date | function _default() { return new Date(); } |
| title | 标题 | string | 选择完整时间 |
| nowDate | 是否选中当前时间 | boolean | false |
| confirmButtonText | 确认按钮文字 | string | 确认 |
| cancelButtonText | 取消按钮文字 | string | 取消 |
| type | 时间类型，可选值为 datetime yearMonthDate yearMonth monthDate hourMinute | string | datetime |
| formatter | 选项格式化函数 | function | function _default(type, val) { return val; } |
| filter | 选项过滤函数 | function | function _default(type, options) { return options; } |
| visibleItemCount | 可见的选项个数 | string | number | 6 |
| minDate | 可选的最小时间，精确到分钟 | date | function _default() { return new Date(2021, 0, 1); } |
| maxDate | 可选的最大时间，精确到分钟 | date | function _default() { return new Date(2026, 0, 1); } |
# # 插槽
无
# # 事件
| 名称 | 说明 | 参数 | ||||||
| cancel | 点击取消时触发 | 无 | ||||||
| confirm | 点击确认时触发 |
| ||||||
| change | 选中选项时触发 | 无 |