日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

ElementUI日期選擇器DatePicker限制所選時間范圍(例如限制前后時長不超一個月)的實現

作者:LangForOne 更新時間: 2023-10-24 編程語言

具體效果如下:

未選擇時間時,最初選擇時間不能超過今天
在這里插入圖片描述

選擇初始時間后,第二個選擇的時間前后不能超過初始時間的一個月。且此時下拉框變成禁用狀態。
例如:點擊7月15日后,在8月14日往后的日期全部禁止選中
在這里插入圖片描述

7月15日前一個月的6月15日之前的日期也全部禁止選中

在這里插入圖片描述

選好起始時間和結束時間后,下拉框與所有禁止選用的日期限制全部放開,以供下一輪的正常選擇

在這里插入圖片描述


實現方法

組件demo:

<el-date-picker
   v-model.trim="searchDate"
   :picker-options="pickerOptions"
   type="datetimerange"
   size="small"
   range-separator="~"
   start-placeholder="開始日期"
   end-placeholder="結束日期"
   value-format="yyyy-MM-dd HH:mm">    
</el-date-picker>

js:

data(){
  return {
       selectData: '', // 記錄初始點擊DatePicker日期選擇器的時間
       pickerOptions: {
        // onPick:選中日期后會執行的回調。寫成箭頭函數否則this.selectData會報錯
        // 點擊時,選擇的是初始時間,也就是minDate
        onPick: ({ maxDate, minDate }) => {
            this.selectData = minDate.getTime();
            if (maxDate) {
              // 第二次點擊日期選擇器,選好初始時間和結束時間后,解除禁用限制
              this.selectData = ''
            }
        },
        // 設置禁用狀態,參數為當前日期,要求返回 Boolean。同理寫成箭頭函數
        disabledDate: (time) => {
            // 是否限制的判斷條件,if里寫點擊了初始時間后的判斷條件
            // 即第二個選擇的時間前后不能超過初始時間的一個月
            if (this.selectData) {
            	return time.getTime() > new Date() || time.getTime() > this.selectData + 30 * 24 * 3600 * 1000 || time.getTime() < this.selectData - 30 * 24 * 3600 * 1000;
            	// time.getTime() > new Date() 為所選時間不能超過今日
            	// 30 * 24 * 3600 * 1000則為一個月的毫秒數,根據自己的需求修改限制的時間范圍
          	} else {
            	return time.getTime() > new Date();
            	// 如果不需要限制所選時間不能超過今日,則直接return false即可
          	}
        },
     },
  }
}

完工~THX!

原文鏈接:https://blog.csdn.net/vvv3171071/article/details/126619067

  • 上一篇:沒有了
  • 下一篇:沒有了
欄目分類
最近更新