1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【ElementUI】日期选择器时间选择范围限制

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

时间:2019-12-28 06:00:59

相关推荐

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

【ElementUI】日期选择器时间选择范围限制,根据接口灵活设置可选时间。只能选今天之前的时间,或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期

<el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker-options="pickerOptions0"></el-date-picker>

选择今天以及今天之后的日期

data (){ return {pickerOptions0: { disabledDate(time) {return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 }},}}

选择今天以及今天以前的日期

data (){return {pickerOptions0: {disabledDate(time) {return time.getTime() > Date.now() - 8.64e6;//如果不包括今天。就是return time.getTime() > Date.now() - 24*3600*1000;}}, }}

限制结束日期不能大于开始日期

<el-date-pickerv-model="value1"type="date"placeholder="开始日期":picker-options="pickerOptions0"></el-date-picker><el-date-pickerv-model="value2"type="date"placeholder="结束日期":picker-options="pickerOptions1"></el-date-picker>

data(){return {pickerOptions0: {disabledDate: (time) => {if (this.value2 != "") {return time.getTime() > new Date(this.value2).getTime();}},pickerOptions1: {disabledDate: (time) => {return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//减去一天的时间代表可以选择同一天;}},}}

限制选择开始时间不能小于当前时间。并且结束时间不能大于开始时间(比上面多了层限时)

pickerOptions0: {//结束时间不能大于开始时间disabledDate: (time) => {if (this.addForm.date_range_end) {return time.getTime() > new Date(this.addForm.date_range_end).getTime();}else{//还没有选择结束时间的时候,让他只能选择今天之后的时间包括今天return time.getTime() < Date.now() - 8.64e7} }},pickerOptions1: {disabledDate: (time) => {if(this.addForm.date_range_start){return time.getTime() < new Date(this.addForm.date_range_start).getTime() - 1*24*60*60*1000;//可以选择同一天}}},

根据接口给的时间戳来确定不可选择的日期区域、methods里面定义一个函数。传一个date的数据。注意date是时间戳的格式

getdisabled(date) {this.pickerOptions= Object.assign({},this.pickerOptions,{disabledDate(time){return time.getTime() < date; //如果date格式是-7-23或者/7/23。这里还是需要转成时间戳。把date改成new Date(date).getTime()}})},

然后你再获取接口给的时间戳的时候去调用这个函数就好了。

let date=1593743599769;

this.getdisabled(date)

原文链接:/qq_33769914/article/details/83856268

<el-form-item label="开始时间" prop="begintime" ><el-date-picker v-model="form.begintime" type="datetime" placeholder="选择日期时间" :picker-options="pickerOption()" value-format="yyyy-MM-dd HH:mm"format="yyyy-MM-dd HH:mm"></el-date-picker></el-form-item>

//精确到时分秒pickerOption() {// this.ruleForm.accidentTime 是上一条数据的开始时间if(this.ruleForm.accidentTime != undefined){let date = new Date(this.ruleForm.accidentTime)let minutes = date.getMinutes() + 1// // h和m 是将日期只取时分let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';let m = (minutes < 10 ? '0' + minutes : minutes);// pickerDate 判断当前选择时间是否等于上条数据时间// 若等于时,限制时间从00:00:00 - 上条数据开始时间,不等于时,24小时可选let pickerDate = date.toDateString() === new Date(this.ruleForm.accidentTime).toDateString()return {// 日期限制disabledDate: (time) => {let old = this.ruleForm.accidentTimereturn time.getTime() < new Date(old).getTime() - 86400000 || time.getTime() > Date.now()},// 时间限制selectableRange: pickerDate? h + m + ':00 - 23:59:59' : '00:00:00 - 23:59:59'}}},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。