vant移动端年月日区间选择弹窗

这是一个基于Vant组件库实现的日期范围选择器组件。

<template> <div @click="onCancel" class="range-date"> <van-popup v-model="showPopupvalue" @click.stop round position="bottom" :style="{ height: '60%' }"> <header class="header"> <div class="h-left" @click="onCancel">取消</div> <div class="h-center">{{ title }}</div> <div class="h-right" @click="onConfirm">确认</div> </header> <van-datetime-picker title="开始日期" v-model="startDate" :type="type" :min-date="minDate" :formatter="formatter" visible-item-count="4" @change="startChange" /> <van-datetime-picker title="结束日期" v-model="endDate" :type="type" :min-date="endMinDate" :formatter="formatter" visible-item-count="4" /> </van-popup> </div> </template> <script> import { fixTime } from '@/common/utils'; export default { name: 'Datetime', components: {}, props: { showPopup: { type: Boolean, default: false, }, title: { type: String, default: '', }, type: { type: String, default: 'date', }, }, data() { return { showPopupvalue: this.showPopup, minDate: new Date(2019, 0, 1), // maxDate: new Date(2021, 10, 1), // endMinDate: new Date(2019, 0, 1), endMinDate: new Date(), startDate: new Date(), endDate: new Date(), // endDate: new Date(new Date().getTime() + 24*60*60*1000), } }, watch: { showPopup(val) { this.showPopupvalue = val }, }, methods: { // 弹框处理函数 onConfirm() { this.showPopupvalue = false let value = [ fixTime(this.startDate, 'YYYY-MM-DD'), fixTime(this.endDate, 'YYYY-MM-DD'), ].join(' 至 ') this.$emit('onConfirm', { value: value, falg: false }) }, onCancel() { this.showPopupvalue = false this.$emit('onCancel', false) }, startChange() { let tmpDate = new Date(this.endDate) this.endMinDate = new Date(this.startDate) setTimeout(() => { if (new Date(tmpDate).getTime() > new Date(this.endMinDate).getTime()) { this.endDate = tmpDate } else { this.endDate = this.endMinDate } }, 0) }, // 时间日期 formatter(type, val) { if (type === 'year') { return `${val}年` } else if (type === 'month') { return `${val}月` } else if (type === 'day') { return `${val}日` } return val }, }, } </script> <style lang="less"> .range-date { .van-checkbox-group { display: flex; flex-direction: column; padding-top: 1rem; justify-content: center; min-height: 5rem; .van-checkbox { height: 0.88rem; justify-content: center; font-size: 0.3rem; } } .van-datetime-picker { margin-top: 1.3rem; &+.van-datetime-picker { margin-top: 0.68rem; } .van-picker__toolbar { height: 0.66rem; color: #36395c; font-size: 0.3rem; background-color: #f5f6fb; margin: 0 0.3rem; justify-content: center; button { display: none; } } } } </style> <style lang="less" scoped> .header { position: fixed; background-color: #fff; z-index: 99; left: 0; right: 0; margin: 0 auto; height: 0.88rem; padding: 0 0.3rem; border-radius: 0.24rem 0.24rem 0 0; display: flex; justify-content: space-between; align-items: center; .h-left, .h-right { font-size: 0.28rem; } .h-left { display: block; text-align: left; font-size: 32px; color: rgba(0, 0, 0, 0.9); } .h-right { display: block; text-align: right; font-size: 32px; color: rgb(43, 77, 255); } .h-center { font-size: 34px; font-weight: 600; } } </style>