Vue el-date-picker 動的制限時間範囲ケースの詳細な説明

//ケース1 オリジナル著作権声明: この記事はweixin_40998880によるオリジナル記事であり、CC 4.0 BY-SA著作権契約に準拠しています。転載の際は、元のソースリンクとこの声明を添付してください。
//この記事へのリンク: https://blog.csdn.net/weixin_40998880/article/details/106272897
 
//html
<el-日付ピッカー
   v-model="時間"
   タイプ="日付/時刻範囲"
   @change="datePickerChange"
   :picker-options="ピッカーオプション"
   範囲区切り文字="-"
   start-placeholder="開始日"
   end-placeholder="終了日"
   align="right"
   スタイル="width:100%;"
   値の形式="yyyy-MM-dd HH:mm:ss" 形式="yyyy-MM-dd HH:mm:ss"
   :default-time="['00:00:00','23:59:59']">
</el-date-picker>
 

 
//スクリプト
 
データ（）{
  戻る {
     選択データ: ''、
     ピッカーオプション: {
      // クリックすると、開始時刻（minDate）が選択されます
      onPick: ({ 最大日付、最小日付 }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // 制限を解除 this.selectData = ''
         }
      },
      disabledDate: (時間) => {
          // 判定条件を制限するかどうか if (!this.isNull(this.selectData)) {
            var date = 新しい日付(this.selectData)
            // ここに制約条件があります。今月より大きいまたは小さい日付は無効です (他の年の今月も選択できるため、この方法は使用しないでください。具体的な制約日付については、状況 2 を参照してください)
            date.getMonth() を返します > 新しい Date(time).getMonth() || date.getMonth() < 新しい Date(time).getMonth()
          } それ以外 {
            偽を返す
          }
        }
     }
  }
},
方法:{
  // 空かどうかをチェックする isNull(value) {
    if (値) {
      偽を返す
    }
    真を返す
  }
}
 

//状況2
//html
    <el-col :span="8">
                <el-form-item prop="beginTime" label="予約開始時間:">
                  <el-日付ピッカー
                    v-model="editForm.beginTime"
                    タイプ="datetime"
                    placeholder="開始時刻を選択してください"
                    :picker-options="ピッカーオプション[0]"
                    値の形式="yyyy-MM-dd HH:mm:ss"
                    :default-time="デフォルト時間[0]"
                  >
                  </el-date-picker> </el-form-item
              </el-col>
              <el-col :span="8"
                <el-form-item prop="endTime" label="予約終了時間:">
                  <el-日付ピッカー
                    v-model="editForm.endTime"
                    タイプ="datetime"
                    placeholder="開始時刻を選択してください"
                    :picker-options="ピッカーオプション[1]"
                    値の形式="yyyy-MM-dd HH:mm:ss"
                    :default-time="デフォルト時間[1]"
                  >
                  </el-date-picker> </el-form-item
              </el-col>
              
              

 //スクリプト
    データ（）{
  戻る {
     選択データ: ''、
     デフォルト時間: [],
     ピッカーオプション: [
        {
          無効な日付: 時間 => {
            const curDate = new Date().getTime();
            定数日 = 14 * 24 * 3600 * 1000;
            const dateRegion = curDate + day;
            戻る （
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > 日付地域
            );
          }
        },
        {
          //終了時刻を開始時刻の1週間後までに制限します disabledDate: time => {
            // 判定条件を制限するかどうか const date = new Date(this.editForm.beginTime);
            if (!this.isNull(日付)) {
              定数日 = 7 * 24 * 3600 * 1000;
              dateRegion は date.getTime() を返します。
              戻る （
                //開始時刻より前、および開始時刻から 1 週間後の日付を無効にします new Date(time).getTime() > dateRegion ||
                新しい Date(time).getTime() < date.getTime()
              );
            } それ以外 {
              false を返します。
            }
          }
        }
      ]、
  }
},
方法:{
  // 空かどうかをチェックする isNull(value) {
    if (値) {
      偽を返す
    }
    真を返す
  },
  //現在の時刻を取得し、選択されたときにデフォルト値を追加します getNowTime() {
      d = new Date() とします。
      年、月、日、時間、分を入力します。
      //現在の時刻から10分後 d.setTime(d.getTime() + 10 * 60 * 1000);
      [年、月、日、時、分] = [
        d.getFullYear()、
        d.getMonth()、
        d.getDate()、
        d.getHours()、
        d.getMinutes()
      ];
      hour2 = hour + 1 とします。
      //開始時刻を選択した場合のデフォルト値は、現在の時刻の10分後です //終了時刻を選択した場合のデフォルト値は、現在の時刻の1時間10分後です this.defaultTime = [
        時間 + ":" + 分 + ":00",
        時間2 + ":" + 分 + ":00"
      ];
    },
}