基於Vant UI框架實現時間段選擇器
阿新 • • 發佈：2020-12-27
本文例項為大家分享了Vant UI框架實現時間段選擇器的具體程式碼，供大家參考，具體內容如下
元件程式碼如下：
<template>
<van-picker
:title="title"
:show-toolbar="showToolbar"
:columns="columns"
@confirm="onConfirm"
@cancel="onCancel"
@change="onChange"
:confirm-button-text="confirmButtonText"
:cancel-button-text="cancelButtonText"
:loading="loading"
:readonly="readonly"
:item-height="itemHeight"
:visible-item-count="visibleItemCount"
:swipe-duration="swipeDuration"
>
<template slot="default">
<slot name="default"></slot>
</template>
<template slot="title">
<slot name="title"></slot>
</template>
<template slot="confirm">
<slot name="confirm"></slot>
</template>
<template slot="cancel">
<slot name="cancel"></slot>
</template>
<template slot="option">
<slot name="option"></slot>
</template>
<template slot="columns-top">
<slot name="columns-top"></slot>
</template>
<template slot="columns-bottom">
<slot name="columns-bottom"></slot>
</template>
</van-picker>
</template>
<script>
import Vue from 'vue'
import { Field,Picker,Popup } from 'vant';
Vue.use(Field).use(Picker).use(Popup);
export default {
name: "VanDatePicker",props: {
value: {
type: Date,default: () => new Date()
},minDate: {
type: Date,default: () => new Date(new Date().getFullYear()-5,1)
},maxDate: {
type: Date,default: () => new Date(new Date().getFullYear()+5,showToolbar: {
type: Boolean,default: () => false
},title: {
type: String,default: () => ''
},confirmButtonText: {
type: String,default: () => '確認'
},cancelButtonText: {
type: String,default: () => '取消'
},loading: {
type: Boolean,readonly: {
type: Boolean,itemHeight: {
type: Number||String,default: () => 44
},visibleItemCount: {
type: Number||String,default: () => 6
},swipeDuration: {
type: Number||String,default: () => 1000
},},data() {
return {
monthArr: ['01','02','03','04','05','06','07','08','09','10','11','12'],dayArr: ['01','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],};
},computed: {
columns: function () {
let minYear = this.minDate.getFullYear();
let maxYear = this.maxDate.getFullYear();
let year = this.value.getFullYear();
let month = this.value.getMonth();
let day = this.value.getDate();
let yearArr = [];
let i = 0;
while (i < maxYear - minYear + 1) {
yearArr.unshift((maxYear - i) + '');
i ++;
}
let columns = [
{
values: yearArr,defaultIndex: Math.floor(year) - minYear
},{
values: this.monthArr,defaultIndex: Math.floor(month)
},{
values: this.dayArr,defaultIndex: Math.floor(day-1)
},{
values: ['-']
},{
values: yearArr,];
return columns
}
},watch: {
},methods: {
onConfirm(value,index) {
// console.log(`當前值：${value},當前索引：${index}`);
this.$emit('confirm',value,index);
},onChange(picker,當前索引：${index}`);
let _this = this;
let minMonth = this.minDate.getMonth();
let minDay = this.minDate.getDate();
let maxMonth = this.maxDate.getMonth();
let maxDay = this.maxDate.getDate();
let d = new Date(value[0],value[1],0);
setDate(0);
setDate(4);
function setDate(i) {
//最小年份
if (value[i]-0===_this.minDate.getFullYear()) {
picker.setColumnValues(i+1,_this.monthArr.slice(minMonth));
let strMinM = '';
if (minMonth<9) {
strMinM = '0'+(minMonth+1)
} else {
strMinM = strMinM + 1 + ''
}
picker.setColumnValue(i+1,value[i+1]-1<minMonth?strMinM:value[i+1]);
if (index===i&&value[i+1]-1<minMonth) {
picker.setColumnValues(i+2,_this.dayArr.slice(minDay-1,d.getDate()));
picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]);
} else {
if (value[i+1]-1===_this.minDate.getMonth()) {
picker.setColumnValues(i+2,d.getDate()));
picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]);
} else {
picker.setColumnValues(i+2,_this.dayArr.slice(0,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
}
}
}
//最大年份
else if (value[i]-0===_this.maxDate.getFullYear()) {
picker.setColumnValues(i+1,_this.monthArr.slice(0,maxMonth+1));
let strManM = '';
if (maxMonth<9) {
strManM = '0'+(maxMonth+1)
} else {
strManM = maxMonth + 1 + ''
}
picker.setColumnValue(i+1,value[i+1]-1>maxMonth?strManM:value[i+1]);
if (index===i&&value[i+1]-1>maxMonth) {
picker.setColumnValues(i+2,maxDay));
picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]);
} else {
if (value[i+1]-1===_this.maxDate.getMonth()) {
picker.setColumnValues(i+2,maxDay));
picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]);
} else {
picker.setColumnValues(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
}
}
}
//其他年份
else {
picker.setColumnValues(i+1,_this.monthArr);
picker.setColumnValue(i+1,value[i+1]);
picker.setColumnValues(i+2,d.getDate()));
picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]);
}
}
let finallyVal = picker.getValues();
let len = Math.floor(finallyVal.length/2);
//開始時間不大於結束時間
if (finallyVal.slice(0,len).join("")>finallyVal.slice(len+1).join("")){
picker.setValues([...finallyVal.slice(0,len),"-",...finallyVal.slice(0,len)]);
if (new Date(finallyVal.slice(0,len).join("-")+' 00:00:00').getTime()===this.maxDate.getTime()) {
console.log(111);
picker.setColumnValues(5,maxMonth+1));
picker.setColumnValues(6,maxDay));
}
}
this.$emit('change',picker,finallyVal,onCancel() {
// console.log('取消');
this.$emit('cancel');
},}
</script>
<style scoped>
</style>呼叫demo
<template>
<div>
<van-field
readonly
clickable
label="時間段"
:value="value"
placeholder="選擇時間段"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
<van-date-picker
show-toolbar
v-model="currentDate"
title="選擇時間段"
:min-date="minDate"
:max-date="maxDate"
@cancel="showPicker = false"
@confirm="onConfirm"
@change="onChange"
>
</van-date-picker>
</van-popup>
</div>
</template>
<script>
import VanDatePicker from '@/components/VanDatePicker';
export default {
name: "Test",components: {VanDatePicker},data() {
return {
value: '',showPicker: false,minDate: new Date(2010,5,15),maxDate: new Date(2025,10,currentDate: new Date(),startDate: '',endDate: '',mounted() {
},index) {
console.log(`當前值：${value},當前索引：${index}`);
this.startDate = value.slice(0,3).join('-');
this.endDate = value.slice(4,7).join('-');
this.value = this.startDate + '至' + this.endDate;
this.showPicker = false
},當前索引：${index}`);
},}
</script>
<style scoped>
</style>UI示例
API：注意紅色劃掉的沒有實現
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。