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

可乐没有柠檬酸

已于 2022-10-19 09:12:37 修改

阅读量4.6k

点赞数 9

分类专栏： u-view 文章标签： ui vue.js 前端

于 2022-10-13 17:42:14 首次发布

本文链接：https://blog.csdn.net/weixin_56947857/article/details/127304686

版权

u-view 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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