1987WEB视界-分享互联网热门产品和行业

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

vant DatetimePicker 时间选择年份

1987web2024-03-25WEB开发62
由于vant组件自带没有只选择年的方法所以需要我们自己写这个方法,网上大多数的方法都是通过改node_modules下的组件文件,这个方法不是很友好,下面的方法是我在网上

由于vant组件自带没有只选择年的方法 所以需要我们自己写这个方法,网上大多数的方法都是通过改node_modules下的组件文件,这个方法不是很友好,下面的方法是我在网上找到一篇可以使用的方法,下附原文地址,原文包括了(年选、月选、周选、日选)方法,这里只用到了年选,因为原文写的年选方法有一点小问 ...

由于vant组件自带没有只选择年的方法 所以需要我们自己写这个方法,网上大多数的方法都是通过改node_modules下的组件文件,这个方法不是很友好,下面的方法是我在网上找到一篇可以使用的方法,下附原文地址,原文包括了(年选、月选、周选、日选)方法,这里只用到了年选,因为原文写的年选方法有一点小问题,所以进行了微调改动

原文参考地址:(15条消息) vant 日期选择器(年选、月选、周选、日选)_长夜将尽 来日可期的博客-CSDN博客_vant 日期选择器

本文代码

要点:Field 输入框+ActionSheet 动作面板+DatetimePicker 时间选择 组合使用

我这里的需求是进入页面后默认最新时间所以加上了setTime()里面的方法 如果没有这个需求可以删除setTime()方法

v-model="queryParams.taskYear"is-linkreadonlyarrow-direction="down"label="年份"placeholder="请选择年份"@click="dateSelect"/> v-model="yearShow"> title="请选择年份"show-toolbar:columns="yearColumns":default-index="yearSelect"@confirm="yearConfirm"@cancel="cancel"/>exportdefault{data(){return{// 查询参数queryParams:{taskYear:null,},yearSelect:null,yearColumns:[],yearShow:false// 年份}}created(){this.setTime();this.yearData();},methods:{formatDates(date){return`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;},// 进入页面后默认最新时间setTime(){varnowTime=newDate();letyear=nowTime.getFullYear();letmonth=nowTime.getMonth();letday=nowTime.getDate();vartaskYear=;taskYear=this.formatDates(newDate(year,month,day));this.queryParams.taskYear=taskYear.slice(0,4);}// 监听年份打开dateSelect(){this.yearShow=true;},//年选择器yearConfirm(value){this.queryParams.taskYear=value.toString();this.yearShow=false;},//年数据yearData(){// 获取默认显示的时间varnowTime=newDate(this.queryParams.taskYear);letyear=nowTime.getFullYear();letmonth=nowTime.getMonth();letday=nowTime.getDate();// 循环数组 填写最小时间和最大时间范围 推进数组for(leti=2000;i<2099;i++){this.yearColumns.push(i);}// 格式化时间并截取varyears=this.formatDates(newDate(year,month,day));varYear=years.slice(0,4);// 将截取的年份赋值给绑定值 用于点击弹出日期窗口后显示当前的时间this.yearSelect=this.yearColumns.indexOf(Number(Year));},// 点击取消按钮时触发的事件cancel(){this.yearShow=false;},}