【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;
        },

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

相关推荐
一袋米扛几楼981 分钟前
【前端开发】基于TypeScript打破 React 黑盒——组件的“工厂心智模型”与源码解剖
javascript·react.js·typescript
启山智软12 分钟前
前沿主流技术栈商城系统(Java JDK21 + Vue3 + Uniapp)
java·开发语言·uni-app
明月_清风19 分钟前
Nginx 生产环境配置完全指南:从安全加固到性能调优
前端·nginx
用户6000718191021 分钟前
【翻译】用 Reanimated CSS 动画为 TextInput 添加发光效果
前端
李剑一27 分钟前
前后端命名冲突?驼峰与下划线的统一方案(附可直接复用代码)
前端
用户114818678948430 分钟前
Git Stash 丢失后的完整找回指南
前端·git
代码不加糖31 分钟前
2026 React 面试“通关秘籍”:高频 12 问 + 深度解析(含Hooks源码思想)
前端·react.js·面试
我滴老baby32 分钟前
ReAct推理模式详解让智能体学会边思考边行动
前端·react.js·前端框架
菜鸟小码1 小时前
MapReduce 核心阶段深度解析:Map 阶段与 Reduce 阶段的作用及执行流程
前端·javascript·mapreduce
步步为营DotNet1 小时前
深入剖析.NET 11 中 Semantic Kernel 于智能后端集成的创新实践
前端·.net·easyui