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 = [] |
| |
| 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() |
| |
| 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> |
实现效果如图所示

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!