elmentUI組建中el-date-picker實(shí)現(xiàn)限制時(shí)間范圍精確到小時(shí)

需求要求

1. 時(shí)間選擇器只能選擇今天之前的日期.默認(rèn)時(shí)間是前一天00點(diǎn)~23點(diǎn)
2. 后臺(tái)返回的最小時(shí)間和最大時(shí)間
3. 時(shí)間精度限制到小時(shí)
   開(kāi)始想著用type="datetimerange"來(lái)實(shí)現(xiàn),后來(lái)發(fā)現(xiàn)控制時(shí)間禁用無(wú)法實(shí)現(xiàn),后改變思路使用兩個(gè)type="datetime"拼裝

實(shí)現(xiàn)

1.先獲取一個(gè)只能選擇到小時(shí)的時(shí)間范圍選擇器

css代碼

<el-date-picker
            v-model="validity1"
            type="datetime"
            value-format="yyyy-MM-dd HH"
            format="yyyy/MM/dd HH"
            class="datepicker-content"
            :picker-options="datapickerOptions1"
            popper-class="datepickerPopperClass"
            @change="changeDatetime"
            placeholder="起始時(shí)間"
            :clearable="false"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="validity2"
            type="datetime"
            value-format="yyyy-MM-dd HH"
            format="yyyy/MM/dd HH"
            class="datepicker-content"
            popper-class="datepickerPopperClass"
            :picker-options="datapickerOptions2"
            placeholder="結(jié)束時(shí)間"
            :disabled="!validity1"
            :clearable="false"
          >
          </el-date-picker>

如何實(shí)現(xiàn)精度到小時(shí),使選擇器只能選擇到時(shí)間(如圖)

通過(guò)修改css樣式實(shí)現(xiàn)代碼,隱藏分秒結(jié)構(gòu)

.datepickerPopperClass{
  .el-button--text{
    display: none;  //刪除時(shí)間彈框中此刻按鈕(根據(jù)需求決定是否保留)
  }
  .el-time-spinner__wrapper{
    width:100%;
  }
  .el-scrollbar:nth-child(2){
    display: none;
  }
}

這樣結(jié)構(gòu)上就有一個(gè)只能選擇到小時(shí)的時(shí)間范圍選擇器,這里結(jié)束時(shí)間在沒(méi)有選擇開(kāi)始時(shí)間時(shí)是禁用的

2.通過(guò)picker-options屬性來(lái)控制時(shí)間可選日期范圍

其中disabledDate屬性值來(lái)控制選擇的日期范圍,selectableRange屬性值控制可選擇的小時(shí)范圍
vue中data中聲明的變量

data() {
    return {
      validity1:'',
      selectableRange1:"00:00:00 - 23:59:59",
      validity2:"",
      selectableRange2:"00:00:00 - 23:59:59",
      startTime:"",   //從后臺(tái)獲取的庫(kù)表生成時(shí)間,之前的時(shí)間不能選擇,這個(gè)值可以根據(jù)你需求中的時(shí)間來(lái)賦值
      endTime:"",      //數(shù)據(jù)庫(kù)結(jié)束時(shí)間
      datapickerOptions1: {
        //設(shè)置不能選擇的日期
        selectableRange: this.selectableRange1,
        disabledDate: (time) => {
          //獲取當(dāng)前時(shí)間
          let nowDate = new Date();
          const oneHour = 1 * 3600 * 1000; //一個(gè)小時(shí)
          let defaultTime = this.formatDate(nowDate.getTime()-oneHour,"yyyy-MM-dd hh")
          let startTime = this.startTime.split(' ')[0]+" 00:00:00" 
          defaultTime = defaultTime + ":59:59"
          return time.getTime() > new Date(defaultTime)||time.getTime() < new Date(startTime);
        },
      },
      datapickerOptions2: {
        //設(shè)置不能選擇的日期
        selectableRange: this.selectableRange2,
        disabledDate: (time) => {
          //獲取當(dāng)前時(shí)間
          let nowDate = new Date();
          const oneHour = 1 * 3600 * 1000; //一個(gè)小時(shí)
          let defaultTime = this.formatDate(nowDate.getTime()-oneHour,"yyyy-MM-dd hh")
          let validityTime = this.validity1.split(' ')[0]+" 00:00:00"
          defaultTime = defaultTime + ":59:59"
          return time.getTime() > new Date(defaultTime)||time.getTime() < new Date(validityTime);
        },
      },
    };
  },

通過(guò)watch來(lái)監(jiān)控起始時(shí)間和結(jié)束時(shí)間,日期選擇后,相應(yīng)的小時(shí)選擇范圍也會(huì)變化

watch:{
    validity1: {
      // date-picker控件點(diǎn)x清空之后默認(rèn)會(huì)重置為null，監(jiān)聽(tīng)設(shè)置為["",""]
      handler(newVal) {
        if (newVal) {
          // console.log("newVal",newVal)
          // console.log(this.startTime)
          if(new Date(newVal+":00:00").getTime()<new Date(this.startTime).getTime()){
            this.validity1 = this.formatDate(this.startTime.split(' ')[0],"yyyy-MM-dd") + " " + this.startTime.split(' ')[1].split(':')[0]+":00"
            // console.log("validity1",this.validity1)
          }
          let rangeStart = ""
          let rangeEnd = ""
          //如果選擇的日期是后臺(tái)庫(kù)表初始日期
          if(this.startTime){
            if(newVal.split(' ')[0]==this.formatDate(this.startTime.split(' ')[0],"yyyy-MM-dd")){
              rangeStart = this.startTime.split(' ')[1]
            }else{
              rangeStart = "00:00:00"
            }
          }else{
            rangeStart = "00:00:00"
          }
          if(this.endTime){
            if(newVal.split(' ')[0]==this.formatDate(this.endTime.split(' ')[0],"yyyy-MM-dd")){
              rangeEnd = this.endTime.split(' ')[1]
            }else{
              rangeEnd = "23:59:59"
            }
          }else{
            rangeEnd = "23:59:59"
          }
          this.selectableRange1 = rangeStart + " - " + rangeEnd
          this.$set(this.datapickerOptions1,"selectableRange",this.selectableRange1)
        }
      },
      immediate: true,
      deep: true,
    },
    validity2: {
      // date-picker控件點(diǎn)x清空之后默認(rèn)會(huì)重置為null，監(jiān)聽(tīng)設(shè)置為["",""]
      handler(newVal) {
        if (newVal) {
          // console.log("newVal",newVal)
           if(new Date(newVal).getTime()<new Date(this.validity1).getTime()){
            this.validity2 = this.validity1.split(':')[0]+ ":59"
          }
          let rangeStart = ""
          let rangeEnd = ""
          //如果選擇的日期是后臺(tái)庫(kù)表初始日期
          if(new Date(newVal.split(' ')[0]).getTime()==new Date(this.validity1.split(' ')[0]).getTime()){
            rangeStart = this.validity1.split(' ')[1].split(':')[0] + ":59:59"
          }else{
            this.selectableRange2 = "00:59:59"
          }
          if(this.endTime){
            if(newVal.split(' ')[0]==this.formatDate(this.endTime.split(' ')[0],"yyyy-MM-dd")){
              rangeEnd = this.endTime.split(' ')[1]
            }else{
              rangeEnd = "23:59:59"
            }
          }else{
            rangeEnd = "23:59:59"
          }
          this.selectableRange2 = rangeStart + " - " + rangeEnd
          this.$set(this.datapickerOptions2,"selectableRange",this.selectableRange2)
        }
      },
      immediate: true,
      deep: true,
    },
  },

其中用到的時(shí)間格式化方法formatDate

filters: {
    formatDate: function(time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy/MM/dd hh:mm:ss");
      } else {
        return "";
      }
    },
  },

date.js //由于Format方法es6已經(jīng)廢棄,需要咱們自己在Date原型添加如下的方法：(這里多虧網(wǎng)友提醒)

Date.prototype.Format = function(fmt) {
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours(), // 小時(shí)
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
  }
  return fmt
}
export function formatTimeToStr(times, pattern) {
    var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(times).Format(pattern);
    }
    return d.toLocaleString();
}

起始時(shí)間選擇后,結(jié)束時(shí)間才可以顯示同時(shí)結(jié)束時(shí)間清空

changeDatetime(){
    this.validity2 = ""
   },

希望對(duì)你有幫助文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-426531.html

到了這里，關(guān)于elmentUI組建中el-date-picker實(shí)現(xiàn)限制時(shí)間范圍精確到小時(shí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！