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

Posted 柠檬20

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uView中picker限制选择时间,让过去的时间不可选相关的知识,希望对你有一定的参考价值。

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

如下

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

解决后的样子

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


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

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限制选择时间,让过去的时间不可选的主要内容,如果未能解决你的问题,请参考以下文章

element-ui的el-date-picker组件(限制时间范围选择)

Android Image Picker 从图库中选择多个图像,最大限制为 5

el-date-picker 限制选择的时间,并做置灰处理

ElementUI日期选择器时间选择范围限制

ElementUI日期选择器时间选择范围限制

检查 UView 是不是在 Self.View 范围内