iview时间控件datepicker

1.起始截止时间约束

<Form-item label="开始日期" prop="from">          
  <DatePicker
   v-model="searchForm.from"
   @on-change="onSearchStartTimeChange"                    
   :options="searchStartTimeOption"
   type="date" 
   format="yyyy-MM-dd" 
   placeholder="请选择开始日期" 
   style="width: 200px;">
   </DatePicker>
</Form-item>
 <Form-item label="截止日期" prop="to">          
   <DatePicker
   v-model="searchForm.to"
   :options="searchEndTimeOption"
   @on-change="onSearchEndTimeChange" 
   type="date" 
   format="yyyy-MM-dd" 
   placeholder="请选择截止日期" 
   style="width: 200px">
   </DatePicker>
</Form-item>
data(){
	return{
	  searchForm: {
        from: "",
        to: ""
      },
	  searchStartTimeOption:{},//设置搜索表单起始不可选择日期
      searchEndTimeOption:{},//设置搜索表单结束不可选择日期
	}
},
methods:{
	onSearchStartTimeChange(e, type){
	    this.searchForm.from = e;
	    this.searchEndTimeOption = {
	      disabledDate: date => {
	        let startTime = this.searchForm.from ? new Date(this.searchForm.from).valueOf() : '';
	        return date && (date.valueOf() < startTime);
	      }
	    }
	},
	onSearchEndTimeChange(e, type) {
	    this.searchForm.to = e;
	    let endTime = this.searchForm.to ? new Date(this.searchForm.to).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
	    this.searchStartTimeOption = {
	      disabledDate(date) {
	        return date && date.valueOf() > endTime;
	      }
	    }
	},
}

2.时间选择限制–只能选择现在和过去


<DatePicker
v-model="platForm.contractTime"
type="date" 
format="yyyy-MM-dd" 
placeholder="请选择时间" 
:options="options"
></DatePicker>


data(){
	return{
	options: {
          disabledDate (date) {
              return date && date.valueOf() >= Date.now();
          }
      },
	}
}

时间格式 yyyy-mm-dd

<DatePicker type="date" format="yyyy-MM-dd" @on-change="savePublishTime" :value="saveForm.publishTime" class="search"  placeholder="请选择发布时间"></DatePicker>

savePublishTime(e){
    this.saveForm.publishTime = e;
},

发布了13 篇原创文章 · 获赞 0 · 访问量 1017

猜你喜欢

转载自blog.csdn.net/weixin_45274678/article/details/96975338
今日推荐