Vue3+ElementPlus el-date-picker はオプションの時間範囲を設定します

要件: 年を選択します。対応する日付範囲セレクターは年に応じて変わります。選択できるのは現在の年のみです。

ElementPlus の el-data-picker には picker-options 属性はありませんが、選択できない日付を設定するためのデフォルト値属性が提供されます。
 

      <el-form-item label="起止日期">
        <el-date-picker
          v-model="daysPicker.value"
          type="daterange"
          :clearable="false"
          :default-value="defaultDate"
          :disabled-date="disabledDateFun"
          range-separator="至"
          start-placeholder="开始"
          end-placeholder="截止"
          @change="pickDays"
        />
      </el-form-item>

ここでは、要件を満たす日付をフィルタリングし、日付形式オブジェクトをパラメータとして受け入れ、形式をブール値として返すメソッドdisabledDateFunを定義します。

    // 此函数接受date作为参数 通过判断是否符合要求 返回是否禁用即true或者false
    disabledDateFun(date) {
    // 这里我判断的是年份字符串是否等于form表单所选的年份 是则返回false ，否则禁用 返回true 具体根据你们的业务需求来判断
      if (!this.form.year) return false
      const year = date.getFullYear().toString()
      return year !== this.form.year
    },

このうち、年を選択した後にデフォルトの日付を選択した年の日付にするために、default-valueを設定しました。公式ドキュメントを参照して、ビジネスニーズに応じて設定してください。以下はデモンストレーション図です。

 

図に示すように、年が 2022 年として選択されている場合、デフォルトの選択範囲は 2022 年のすべての日付となり、残りは灰色で選択できなくなります。