本文实例为大家分享了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,0,1)
},
maxDate: {
type: Date,
default: () => new Date(new Date().getFullYear()+5,0,1)
},
showToolbar: {
type: Boolean,
default: () => false
},
title: {
type: String,
default: () => \'\'
},
confirmButtonText: {
type: String,
default: () => \'确认\'
},
cancelButtonText: {
type: String,
default: () => \'取消\'
},
loading: {
type: Boolean,
default: () => false
},
readonly: {
type: Boolean,
default: () => false
},
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\', \'02\', \'03\', \'04\', \'05\', \'06\', \'07\', \'08\', \'09\', \'10\', \'11\', \'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,
defaultIndex: Math.floor(year) - minYear
},
{
values: this.monthArr,
defaultIndex: Math.floor(month)
},
{
values: this.dayArr,
defaultIndex: Math.floor(day-1)
},
];
return columns
}
},
watch: {
},
methods: {
onConfirm(value, index) {
// console.log(`当前值：${value}, 当前索引：${index}`);
this.$emit(\'confirm\',value,index);
},
onChange(picker, value, index) {
// console.log(`当前值：${value}, 当前索引：${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,_this.dayArr.slice(minDay-1,d.getDate()));
picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]);
} else {
picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate()));
picker.setColumnValue(i+2,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,_this.dayArr.slice(0,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,_this.dayArr.slice(0,maxDay));
picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]);
} else {
picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate()));
picker.setColumnValue(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,_this.dayArr.slice(0,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,_this.monthArr.slice(0,maxMonth+1));
picker.setColumnValues(6,_this.dayArr.slice(0,maxDay));
}
}
this.$emit(\'change\',picker,finallyVal,index);
},
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, 15),
currentDate: new Date(),
startDate: \'\',
endDate: \'\',
};
},
mounted() {
},
methods: {
onConfirm(value, 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
},
onChange(picker, value, index) {
console.log(`当前值：${value}, 当前索引：${index}`);
},
},
}
</script>
<style scoped>
</style>
UI示例
API：注意红色划掉的没有实现
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容