【uniapp/uview】u-datetime-picker 选择器的过滤器用法

引入:要求日期选择的下拉框在分钟显示时,只显示 0 和 30 分钟;

html 复制代码
<u-datetime-picker :show="dateShow" :filter="timeFilter" @confirm="selDateConfirm" @cancel="dateCancel" v-model="value1" mode="datetime"></u-datetime-picker>

这里引入了 filter = "timeFilter" 作为其配置项;

javascript 复制代码
timeFilter(mode, options) {
            console.log(mode);
            let d = new Date()
            // console.log(d.getFullYear());
            if(mode === 'year'){
                return options.filter((option)=>option>= d.getFullYear())
            }
            if(mode === 'month'){
                return options.filter((option)=>option>= d.getMonth()+1)
            }
            if (mode === 'minute') {
                return options.filter((option) => option === '00' || option === '30');
            }
            return options;
        },

还补充了开始年份从今年开始的写法,这样就可以按照要求来自定义了。

相关推荐
吴声子夜歌5 小时前
JavaScript——函数
开发语言·javascript·ecmascript
SuperEugene5 小时前
Vue3 + Element Plus 表单开发实战:防重复提交、校验、重置、loading 统一|表单与表格规范篇
前端·javascript·vue.js
SuperEugene5 小时前
Vue3 + Element Plus 中后台弹窗规范:开闭、传参、回调,告别弹窗地狱|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
桜吹雪5 小时前
在前端运行Qwen3.5原生多模态模型
前端·人工智能·机器学习
孟祥_成都5 小时前
前端下午茶:这 3 个网页特效建议收藏(送源码)
前端·javascript·css
SuperEugene5 小时前
VXE-Table 4.x 实战规范:列配置 + 合并单元格 + 虚拟滚动,避坑卡顿 / 错乱 / 合并失效|表单与表格规范篇
开发语言·前端·javascript·vue.js·前端框架·vxetable
Harriet嘉5 小时前
vscode结合code buddy 和figma还原UI设计稿
vue·figma
火车叼位6 小时前
Volta 下 `corepack` 失踪之谜:问题不在 Node,而在命令入口
前端
cmd6 小时前
别再用错!5种JS类型判断方法,从原理到实战一文吃透
前端·javascript
小江的记录本6 小时前
【Redis】Redis常用命令速查表(完整版)
java·前端·数据库·redis·后端·spring·缓存