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

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

相关推荐
morethanilove1 小时前
新建vue3 + ts +vite 项目
前端·javascript·vue.js
行思理1 小时前
UniApp 打包配置 iOS的UniversalLinks
uni-app·universal link
GISer_Jing1 小时前
微软AI战略全景:从基础设施到智能体生态
前端·人工智能·microsoft
发际线向北1 小时前
0x03 单元测试与Junit
前端·单元测试
忆往wu前1 小时前
搞懂 SPA 再学路由!Vue Router 从0到完善 + 嵌套路由一次性梳理
前端·vue.js
小智社群1 小时前
获取贝壳中介列表,并且自动导入excel
开发语言·javascript·ecmascript
Aliex_git1 小时前
前端监控笔记(三)
前端·笔记·学习
布局呆星1 小时前
Vue3 笔记:过渡动画与自定义指令
javascript·css·vue.js·python·es6·html5
M ? A1 小时前
Vue Suspense 组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
im_AMBER1 小时前
Leetcode 159 无重复字符的最长子串 | 长度最小的子数组
javascript·数据结构·学习·算法·leetcode