这是一个基于Vant组件库实现的日期范围选择器组件。template div clickonCancel classrange-date van-popup v-modelshowPopupvalue click.stop round positionbottom :style{ height: 60% } header classheader div classh-left clickonCancel取消/div div classh-center{{ title }}/div div classh-right clickonConfirm确认/div /header van-datetime-picker title开始日期 v-modelstartDate :typetype :min-dateminDate :formatterformatter visible-item-count4 changestartChange / van-datetime-picker title结束日期 v-modelendDate :typetype :min-dateendMinDate :formatterformatter visible-item-count4 / /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 langless .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 langless 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