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

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

相关推荐
小满zs9 小时前
Next.js第五章(动态路由)
前端
清沫9 小时前
VSCode debugger 调试指南
前端·javascript·visual studio code
一颗宁檬不酸10 小时前
页面布局练习
前端·html·页面布局
zhenryx10 小时前
React Native 自定义 ScrollView 滚动条:开箱即用的 IndicatorScrollView(附源码示例)
javascript·react native·react.js·typescript
金木讲编程11 小时前
Claude、Agent与Copilot协作生成Angular应用
前端·ai编程
振华OPPO11 小时前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架
欧雷殿12 小时前
在富阳银湖成立地域化的软件研发团队
前端·程序员·创业
2501_9159184112 小时前
移动端 HTTPS 抓包实战,多工具组合分析与高效排查指南
数据库·网络协议·ios·小程序·https·uni-app·iphone
狂炫冰美式12 小时前
前端实时推送 & WebSocket 面试题(2026版)
前端·http·面试
JefferyXZF13 小时前
新手建站零门槛!Vercel+Cloudflare+Namesilo域名购买部署全流程
前端