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()+1this.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限制选择时间，让过去的时间不可选相关推荐

在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
关于微信小程序中uView中通过packer选择器修改表单无法触发form组件的表单验证的问题
uView中使用form表单组件,如果form-item为正常的input组件,在输入和修改form-item绑定的变量的时候,都会触发form表单的表单验证事件但是如果form-item中不是in ...
微信小程序中picker提交form表单时提交的是下标怎么解决
相信大家都知道picker作为普通选择器时,提交表单的时候提交的是下标,那怎么解决呢? wxml代码 <view class="cell"><picker bin ...
如何在并发中给 HttpClient 设置不同的超时时间？
咨询区 boot4life 为了能够复用 HttpClient 所打开的TCP链接,我不得不让所有的request共享一个单例,但问题来了,如果我简单的在每一次request之前修改 timeout ...
如何测定拼色染液中，各染料在不同染色时间时，染液中残留染料量及织物上吸附上染的染料量？
如何测定拼色染液中,各染料在不同染色时间时,染液中残留染料量及织物上吸附上染的染料量? 标准答案: 通常依据各染料对特定波长光的吸光度具有加和性; 吸光度值符合朗伯比尔定律,吸光度与浓度成正比; 吸光 ...
Eclipse中SVN标记，提交人，时间等版本信息消失
Eclipse中SVN标记,提交人,时间等版本信息消失解决方法 windows -- Preferences -- General -- Appearance -- Lable Decoration ...
java中使用 Date 和 SimpleDateFormat 类表示时间
使用 Date 和 SimpleDateFormat 类表示时间在程序开发中,经常需要处理日期和时间的相关数据,此时我们可以使用 java.util 包中的 Date 类.这个类最主要的作用就是获取 ...
思维方式-《六顶思考帽》书中的精髓：通过在同一时间只使用一顶思考帽的方法，可以解决思维混乱等问题，从而提升思考效率。
<六顶思考帽>书中的精髓:通过在同一时间只使用一顶思考帽的方法,可以解决思维混乱等问题,从而提升思考效率. 日常工作生活中,我们常常会遇见这样的情况:会议又长又没重点.不同部门之间争执不停 ...
JAVA中实现让程序等待一段时间的方法
JAVA中想让代码等待一段时间再继续执行,可以通过让当前线程睡眠一段时间的方式. 方法一: 通过线程的sleep方法. Thread.currentThread().sleep(1000); 在需要程 ...

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

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

解决后的样子

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

最新文章

热门文章