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

这篇具有很好参考价值的文章主要介绍了uView中picker限制选择时间,让过去的时间不可选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

u-view 1.几的版本文档,可以看到,没有可以操作,过去时间不可选的方法。

如下

<u-picker 
	mode="time" 
	v-model="show" 
	:params="params" 
	@confirm="confirmTime"  
	:start-year="startYear"
></u-picker>

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

解决后的样子

<u-picker 
	mode="time" 
	v-model="show" 
	:params="params" 
	@confirm="confirmTime"  
	:start-year="startYear"
	control  //加上他就可以拉
></u-picker>

uView中picker限制选择时间,让过去的时间不可选
找到picker的源码位置==>uview-ui==>components==>u-picker==>u-picker.vue文章来源地址https://www.toymoban.com/news/detail-513212.html

1.在	props:下面加
// 仅能控制 年月日时分 不能选择当前时间以前的值
    control: {
    	type: Boolean,
    	default: false
    },
2.在computed里面加上
    dayControl() {
      return this.valueArr[2]
    },
    minuteControl() {
      return this.valueArr[3]
    }
3.在watch里面
  yearAndMonth(val) {//原本有的
	  if (this.params.year) this.setDays();
	  
	  //后加的
	    if (this.control) this.setMonths();
		if (this.control) this.setHours();
		if (this.control) this.setMinutes();
  },
  
   dayControl(n){
     if (this.control) this.setHours();
     if (this.control) this.setMinutes();
   },
   
   minuteControl(n){
     if (this.control) this.setMinutes();
   },
4.在methods找到对应的方法


setMonths() {//月
      if(this.control && this.valueArr[0] == 0){
        let month = new Date().getMonth()+1
        this.months = this.generateArray(month, 12);
      }else{
       this.months = this.generateArray(1, 12);
      }
       this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.months, this.month));
},
		
setDays() {//日
      if(this.control && this.valueArr[0] == 0 && this.valueArr[1]==0){
        let day = new Date().getDate()
        let totalDays = new Date(this.year, this.month, 0).getDate();
        this.days = this.generateArray(day, totalDays);
      }else{
        let totalDays = new Date(this.year, this.month, 0).getDate();
        this.days = this.generateArray(1, totalDays);
      }
      let index = 0;
      if (this.params.year && this.params.month) index = 2;
      else if (this.params.month) index = 1;
      else if (this.params.year) index = 1;
      else index = 0;
      if(this.day > this.days.length) this.day = this.days.length;
      this.valueArr.splice(index, 1, this.getIndex(this.days, this.day));
},

setHours() {//时
      if(this.control && this.valueArr[0] == 0 && this.valueArr[1]==0 && this.valueArr[2]==0){
         let hours = new Date().getHours()
         this.hours = this.generateArray(hours, 23);
      }else{
        this.hours = this.generateArray(0, 23);
      }
			this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.hours, this.hour));
},

setMinutes() {//分
      if(this.control && this.valueArr[0] == 0 && this.valueArr[1]==0 &&  this.valueArr[2]==0 && this.valueArr[3]==0){
        let minute = new Date().getMinutes()
         this.minutes = this.generateArray(minute, 59);
      }else{
        this.minutes = this.generateArray(0, 59);
      }
      this.valueArr.splice(this.valueArr.length - 1, 1, this.getIndex(this.minutes, this.minute));
},

到了这里,关于uView中picker限制选择时间,让过去的时间不可选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

    设置:picker-options=\\\"pickerOptions\\\" 然后在data里面设置 源代码

    2024年02月06日
    浏览(54)
  • el-date-picker限制选择的时间范围

     限制选择今天之前的时间,并且只能选择一天                 只能选择今天往后365天

    2024年02月10日
    浏览(45)
  • element-plus DateTimePicker日期选择器,限制指定日期和时间不可选择

    element-plus日期选择器,在指定日期时间前不可选择。 限制 日期 选择,使用 disabled-date 限制 小时 选择,使用 disabled-hours 限制 分钟 选择,使用 disabled-minutes 限制 毫秒 选择,使用 disabled-seconds 指定日期当天的时间有限制: 其他日期的时间无限制: 全部代码: 注意:选择面板

    2024年02月08日
    浏览(45)
  • 限制Element ui日期选择器el-date-picker时间跨度为3个月

    主要通过pickerOptions里的disabledDate来控制禁止选中的日期。实现思想就是,当选中第一个开始日期时,拿到该时间戳计算时间范围,然后控制接下来选中时间在3个月以内,超过范围禁用掉。 1、在template中使用el-date-picker 2、在data中定义: 3、methods中定义处理时间范围的的方法

    2024年02月12日
    浏览(62)
  • 前端 element-ui el-date-picker日期选择器限制只能选择当月时间,禁止跨月功能

     实现效果:  代码实现:

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

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

    2024年02月11日
    浏览(66)
  • <el-date-picker> 设置可选时间的上下限

    You can use the picker-options attribute to set the minimum and maximum allowed dates for an el-date-picker . Here\\\'s an example: In the example above, the pickerOptions object is used to set a disabledDate function which disables all dates before the start of today ( minDate ) and after 7 days from today\\\'s date ( maxDate ). You can adjust these values to fit

    2024年02月09日
    浏览(36)
  • Vue3+ElementPlus el-date-picker设置可选时间范围

    需求: 选择年份,对应的日期范围选择器跟随年份变化,只可选当前年份 ElementPlus的el-data-picker没有picker-options属性,但是提供了default-value属性可以设置不可选的日期   这里我们定义一个方法disabledDateFun用来筛选符合要求的日期,接受一个date格式的对象作为参数,返回格式为

    2024年02月12日
    浏览(41)
  • 【uniapp/uview】u-datetime-picker 选择器的过滤器用法

    引入 :要求日期选择的下拉框在分钟显示时,只显示 0 和 30 分钟; 这里引入了 filter = \\\"timeFilter\\\" 作为其配置项; 还补充了开始年份从今年开始的写法,这样就可以按照要求来自定义了。

    2024年02月10日
    浏览(42)
  • el-date-picker:选择日期的限制

    目录 前言: 基本使用: 时间区间: 公司业务:选择一个日期区间,但是只能选择本月 day.js简化版1 day.js简化版2 element-ui作为vue的龙头ui组件库,深受前端开发者的喜爱。 本文着重记录如何使用el-date-picker日期选择器,怎么去限制选择日期。先上官网链接---el-date-picker 先看下

    2024年02月09日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包