elementui date コンポーネントのカスタム日付オプション picker-options

 1. 背景: 現在選択されている日付値に基づいて、日付コンポーネントでは現在の日付の前後 3 か月の日付のみを選択できる必要があり、ショートカット オプションがサポートされています。HTMLコードは次のとおりです。

<el-date-picker
      v-model="value2"
      type="daterange"
      value-format="yyyyMMdd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>

2. 解決策: pickeroptions の現在の日付に従ってdisabledData 属性を構成します。

日付を選択し、終了日または開始日として記録します。クリック イベントにより、オプションの onpick 関数がトリガーされます。コールバック関数には 2 つのパラメータがあり、1 つは大きい日付値で、もう 1 つは小さい日付値です。記録後pickerRange を定義し、ここでは 3 か月を設定し、日付の前後 3 か月のみを選択できます。

pickerMinDate:null,
pickerRange:3600*1000*24*90,
pickerOptions: {
   onPick:({maxDate,minDate})=>{
      if(minDate && _this.pickerMinDate){
         _this.pickerMinDate = null;
      }else if(minDate){
         _this.pickerMinDate = minDate.getTime();
      }
   },
   disabledDate:(time) =>{
     if(_this.pickerMinDate){
       return (time.getTime() > (_this.pickerMinDate + _this.pickerRange));
     }
     return false;
   },
    shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
},

3. 注: ショートカット キーがカスタムの onpick イベントと競合し、日付が選択できなくなる可能性があります。ここでは、お客様自身のビジネスの特定の状況に基づいた詳細な分析を示します。