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

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

相关推荐
Python私教20 分钟前
从主题闪烁到 Markdown 阅读体验:RuyiBlog v0.1.1 的前端实现复盘
前端·状态模式
SuperEugene21 分钟前
菜单架构设计:递归渲染、权限过滤、多级菜单与面包屑统一|权限与菜单架构篇
前端·vue.js·架构
边界条件╝22 分钟前
Pinia 深度使用实战
前端·vue.js
英俊潇洒美少年24 分钟前
前端 Jest 单元测试零基础实战:模板、提效、避坑、面试题(Vue 项目可用)
前端·vue.js·单元测试
和blue一起变得更好27 分钟前
周三:Vue3高级组件特性
前端·javascript·vue.js
happyprince31 分钟前
10-Hugging Face Transformers 量化系统深度分析
java·前端·数据库
AskHarries31 分钟前
如何使用 OpenClaw Skill
前端
Rauser Mack44 分钟前
编程纯小白,五分钟用AI做了个小游戏(附Prompt)
人工智能·python·html·prompt·ai编程
AI周红伟44 分钟前
Agent Skills生产级Skills 案例实操-周红伟
前端·chrome·react.js·langchain
Java编程爱好者1 小时前
Spring AI 1.0 实战:从原理到落地的完整指南
javascript