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

这篇具有很好参考价值的文章主要介绍了【uniapp/uview】u-datetime-picker 选择器的过滤器用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

【uniapp/uview】u-datetime-picker 选择器的过滤器用法,微信小程序,Vue,uniapp,uni-app,前端,javascript,uview,vue,html

还补充了开始年份从今年开始的写法,这样就可以按照要求来自定义了。文章来源地址https://www.toymoban.com/news/detail-695892.html

到了这里,关于【uniapp/uview】u-datetime-picker 选择器的过滤器用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uView中picker限制选择时间,让过去的时间不可选

    如下 找到picker的源码位置==uview-ui==components==u-picker==u-picker.vue

    2024年02月11日
    浏览(46)
  • uniapp uni-datetime-picker结束时间不能高于开始时间,精确到时分秒

    类似于问卷出题,问卷的开始时间不能低于当前时间,结束时间必须不能早于开始时间,精确到时分秒 在当前页面导入import {dataConversion} from “@/utils/index”; 第二天结束时间的时分秒可以往前选 当天的结束时间,时分秒只能往后选 我是uniapp的小浣熊,也是小火龙大哥,有事直接去群

    2024年02月16日
    浏览(54)
  • Element UI el-date-picker datetime 日期时间选择器 底部添加清除按钮

    客户需要在时间选择器点击后在选择面板的下方添加一个清除按钮进行时间的清除,不想使用自带的清除小x按钮。 element-ui并没有暴露可以自定义按钮与事件。 我想到了两个方案解决 1.使用组件提供的快捷方法 Shortcuts 完成,需要把样式调整到对应的位置。由于我最终没有选

    2024年04月10日
    浏览(63)
  • uni小程序中 picker选择器的使用,如省市区样式的多列选择实现

    uni.app自带的滚动选择器。一共有五种方式,通过mode来区分,分别是:普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。 本文展示 多列选择器的使用 对你有用就给个赞。。。赞。。。赞。。

    2024年02月02日
    浏览(62)
  • Vue中的el-date-picker时间选择器的使用

    1、value-format属性设置需要什么格式的时间 2、type类型选择datetime、date type类型改成date时,日期选择器就变成了年月日。 value-format不指定时,也默认时年月日。

    2024年02月12日
    浏览(67)
  • ElementUI中的el-date-picker日期选择器的格式转换问题

    使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式 1、在这个组件后面加上这两个,可以修改格式 2、在后端实体类上加上注解 即使前端的是string类型,但是通过json自带的格式匹配注解工具,将string转换成LocalDateTime类型 用npm下载一个moment.js 1、 2、在

    2024年02月12日
    浏览(56)
  • uni-app uni-ui 微信小程序 uni-datetime-picker 时间选择组件设置start和end属性,实现时间选择限制

     效果如图,先选择开始日期,完成日期需要在开始日期之后,先选择完成日期,开始日期需要在完成日期之前 需要用到uni-datetime-picker官方的三个属性  代码如下 这样一个能够限制选定范围的组件就ok了!    

    2024年02月11日
    浏览(71)
  • uniapp开发小程序中因uchart的canvas层级过高遮盖uni-datetime-picker组件的解决办法

    页面需要展示一个环形图,可以按时间段筛选数据,所以我用了 uchart 和 uni-datetime-picker 组件。 但uchart用到了 canvas ,其层级过高,当实机运行小程序时会遮盖弹出的uni-datetime-picker组件 当uni-datetime-picker组件弹出遮罩时,把canvas移到用户视野之外。 uni-datetime-picker组件本质就是

    2023年04月12日
    浏览(58)
  • 【uniapp】picker选择器用法

    背景 : 点击界面\\\"选择医院\\\" 弹出picker滚动选择医院 太久没用使用picker了, 虽然这是非常简单的应用, 但昨天做这个需求时踩了一些坑, 分不清picker和picker-view , 降低了工作效率, 不爽啊~ 所以小小地记录下吧~ 特别说明 : 特别要说明的一点, picker是从底部弹起的滚动选择器, 有自带

    2024年02月12日
    浏览(44)
  • uniapp的 picker 日期时间选择器

    效果图: dateTimePicker.js 需要用到的页面中 引入js,并调取方法 参考链接地址;https://www.cnblogs.com/anna001/p/16903451.html

    2024年02月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包