快捷導(dǎo)航

element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))

更新時(shí)間：2025年01月21日 10:14:34 作者：小太陽(yáng)...

文章介紹了如何使用Element UI的DateTimePicker組件來(lái)實(shí)現(xiàn)一個(gè)時(shí)間選擇器,該選擇器只能選擇當(dāng)前時(shí)間之后的7天,并且不能選擇當(dāng)前小時(shí),感興趣的朋友跟隨小編一起看看吧

需求：選一個(gè)開始時(shí)間，要求精確到小時(shí)，小于當(dāng)前時(shí)刻的小時(shí)不讓選擇，只能往后選7天。
如圖：

需要element的DateTimePicker 日期時(shí)間選擇器
部分代碼如下：

  <el-form-item
    label="出發(fā)時(shí)間:"
    prop="startTime">
    <el-date-picker
      v-model="editForm.startTime"
      :picker-options="pickerOptions"http:// 控制時(shí)間選擇
      format="yyyy-MM-dd HH:mm"
      type="datetime"
      placeholder="選擇日期時(shí)間"
    />
  </el-form-item>

    pickerOptions: {
      disabledDate(time) {
        let dateTime = new Date();
        let startDateTime = dateTime.setDate(dateTime.getDate() - 1);
        let endDateTime = dateTime.setDate(dateTime.getDate() + 7);
        return (
          time.getTime() < new Date(startDateTime).getTime() ||
          time.getTime() > new Date(endDateTime).getTime()
        );
      },
      selectableRange:
        new Date(new Date().setHours(new Date().getHours() + 1)).format(
          'hh'
        ) + ':00:00 - 23:59:00'
    },

selectableRange：可選時(shí)間段
startDateTime 時(shí)間戳
new Date(startDateTime) 標(biāo)準(zhǔn)時(shí)間
new Date(startDateTime).getTime() 時(shí)間戳

還需要watch監(jiān)聽和computed，如果不監(jiān)聽，那么每一天的當(dāng)前小時(shí)都會(huì)被禁用

  computed: {
    startTime() {
      return this.editForm.startTime;
    }
  },
  watch: {
    startTime: function(newVal, oldVal) {
      let selectDate = newVal.format('yyyyMMdd');
      let oldDate = oldVal.format('yyyyMMdd');
      let nowDate = new Date().format('yyyyMMdd');
      // 如果兩次選擇的時(shí)間不相等
      if (oldDate !== selectDate) {
        // 如果這次選擇的時(shí)間等于今天的時(shí)間就不讓選當(dāng)前小時(shí)之前，否則就可以選全部時(shí)間段
        if (selectDate === nowDate) {
          this.pickerOptions.selectableRange =
            new Date(new Date().setHours(new Date().getHours() + 1)).format(
              'hh'
            ) + ':00:00 - 23:59:00';
        } else {
          this.pickerOptions.selectableRange = '00:00:00 - 23:59:00';
        }
        let realNewVal = new Date(
          newVal.format('yyyy-MM-dd') + oldVal.format(' hh:mm:ss')
        );
        // 如果這個(gè)時(shí)間比當(dāng)前時(shí)間小，就等于當(dāng)前時(shí)間，否則等于這個(gè)參數(shù)的時(shí)間
        if (realNewVal.getTime() < new Date().getTime()) {
          this.editForm.startTime = new Date();
        } else {
          this.editForm.startTime = realNewVal;
        }
      }
    }
  },

重寫了format方法，代碼如下：格式化時(shí)間也可以用庫(kù)，比如moment

/**
 * 格式化日期
 */
export const dateFormat = function() {
  /* eslint-disable no-extend-native */
  Date.prototype.format = function(fmt) {
    let 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 (let 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;
  };
};

注意：Date 對(duì)象（Date 對(duì)象用于處理日期與時(shí)間）
new Date（）中國(guó)標(biāo)準(zhǔn)時(shí)間

到此這篇關(guān)于element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))的文章就介紹到這了,更多相關(guān)element日期時(shí)間選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: