打赏作者
感谢打赏,创作不易~
  • 微信
  • 支付宝

vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...

vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...

最近项目中有个需求,datePicker选项,需要实现增加一个长期的选中项,用于选择身份证到期时间,思考良久,只能通过自定义的方式进行实现

<template>
<van-picker ref="picker" :columns="datas" @change="onChange" />
</template>
<script setup>
const picker = ref(null);
const current = ref([])
const setYears = ()=>{
//根据需求,设置年份和月份
const date = new Date()
let year = date.getFullYear()
let yearsArr = []
//可选时间,20年后
for(let i=0;i<=20;i++){
yearsArr.push(`${year++}`)
}
//增加长期选项
yearsArr.push('长期')
//初始化时间
datas.value = [
{values:yearsArr},
{values:['01','02','03','04','05','06','07','08','09','10','11','12']},
{values:getDays(date.getFullYear(),date.getMonth())}
]
}
// 获取不同月份有多少天时间,返回时间数组
const getDays = (year, month)=>{
let daysNumber = new Date(year, month, 0).getDate()
let daysNumberArr = []
for(let i=1;i <= daysNumber;i++){
daysNumberArr.push(i)
}
return daysNumberArr
}
const datas = ref({})
// 选中项发生改变时执行
const onChange = (values) => {
//判断选中项,不是长期时,动态更改第三列的日期值
current.value = values
if(!values[0] === '长期'){
picker.value.setColumnValues(1,['01','02','03','04','05','06','07','08','09','10','11','12']);
picker.value.setColumnValues(2, getDays(values[0],values[1]));
}
};
//初始化
setYears()
//监听,当current选中了长期时,删除多余的两列,只留下长期年份列,反之,调用初始化函数
watch(()=>current.value,()=>{
if(current.value.includes('长期')){
const date = new Date()
let year = date.getFullYear()
let yearsArr = []
for(let i=0;i<=20;i++){
yearsArr.push(`${year++}`)
}
yearsArr.push('长期')
datas.value = [
{values:yearsArr}
]
}else if(current.value[1] == null){
setYears()
}
})
</script>

实现效果如图所示

posted @   Lanny-Chung  阅读(1934)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示