0


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;elseif(this.params.month) index =1;elseif(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));},
标签: ui vue.js 前端

本文转载自: https://blog.csdn.net/weixin_56947857/article/details/127304686
版权归原作者 柠檬20 所有, 如有侵权,请联系我们删除。

“uView中picker限制选择时间,让过去的时间不可选”的评论:

还没有评论