实现基于Vant实现日期时间选择器(选到秒)组件。
dateTimePicker.vue
<template>
<div class="container">
<van-calendar v-model="showPicker" color="#357cea"
:default-date="defaultDate"
:min-date="minDate" class="calendar"
:max-date="maxDate"
:show-confirm="true"
@confirm="onConfirmDate"
@cancel="showPicker = false"
>
<template v-if="type !== 'date'" slot="title">
<div class="calendar-title" @click="timerPicker = true">
{{ selectTimeToSeconds }}
</div>
</template>
</van-calendar>
<van-overlay class="time-picker" :show="timerPicker" @click="timerPicker = false">
<van-picker show-toolbar title="选择时间" :columns="timeColumns" @confirm="confirmTime" />
</van-overlay>
</div>
</template>
<script>
import moment from 'moment';
import {
Picker, Calendar, Overlay,
} from 'vant';
export default {
name: 'DateTimePicker',
components: {
[Picker.name]: Picker,
[Calendar.name]: Calendar,
[Overlay.name]: Overlay,
},
props: {
// 类型 选择到秒还是只到日期
type: {
type: String,
default() {
return 'seconds';
},
},
showTimePicker: {
type: Boolean,
default() {
return false;
},
},
minDate: {
type: Date,
default() {
return new Date(2010, 0, 1);
},
},
defaultDate: {
type: Date,
default() {
return new Date();
},
},
maxDate: {
type: Date,
default() {
return new Date(2050, 0, 1);
},
},
},
data() {
return {
showPicker: this.showTimePicker,
timerPicker: false,
selectTimeToSeconds: moment().format('HH:mm:ss'),
timeColumns: [
{
values: this.createTimeList(23),
defaultIndex: Number(moment().format('HH')),
},
{
values: this.createTimeList(59),
defaultIndex: Number(moment().format('mm')),
},
{
values: this.createTimeList(59),
defaultIndex: Number(moment().format('ss')),
},
],
};
},
watch: {
showTimePicker: {
handler() {
this.showPicker = true;
},
immidiate: true,
},
},
methods: {
createTimeList(N) {
const foo = [];
for (let i = 0; i <= N; i += 1) {
if (i < 10) {
foo.push(`0${i}`);
} else {
foo.push(i);
}
}
return foo;
},
// 发现时间
onConfirmDate(date) {
let selectTime = '';
if (this.type === 'date') {
selectTime = `${moment(date).format('YYYY-MM-DD')
} `;
} else {
selectTime = `${moment(date).format('YYYY-MM-DD')
} ${this.selectTimeToSeconds}`;
}
this.$emit('onConfirmDate', selectTime);
this.showPicker = false;
},
confirmTime(value) {
this.selectTimeToSeconds = `${value[0]}:${value[1]}:${value[2]}`;
this.timerPicker = false;
},
},
};
</script>
<style scoped lang="less">
.container {
.time-picker {
z-index: 2100 !important;
display: flex;
align-items: center;
/deep/ .van-picker {
width:100%;
}
}
}
</style>