web-dev-qa-db-ja.com

Element-ui日付ピッカーで最小日付と最大日付を動的に設定する方法

StartDateとendDateに2つの日付ピッカーがあります。 startDate Pickerで、endDateより前のすべての日付を無効にしたい。その逆も同様です。 elemnt-uiを使用して日付を無効にする方法。 >>

vue.jselement-ui
4
user9265584

これは古い質問ですが、今日も同じように自問しました。これは、disabledDateピッカーオプションを使用して実現できます。将来のすべての日付を無効にする方法の例を次に示します。

<el-date-picker
  :picker-options="datePickerOptions"
</el-date-picker>

次に、データオブジェクトで：

data () {
  return {
    datePickerOptions: {
      disabledDate (date) {
        return date > new Date()
      }
    }
  }
}
10
Christof

何よりもまず、終了日入力のピッカーオプションを定義する必要があります。主な問題は、ピッカーオプションのdisabledDateメソッド内でthisキーワードを使用することです。したがって、メソッドをdata定義の外のmethods部分に正確に移動する必要があります。したがって、完全なコードは次のようになります。

data () {
    return {
        task: {
            start_at: new Date(),
            end_at: new Date()
        }
        dueDatePickerOptions: {
            disabledDate: this.disabledDueDate
        }
    }
},
methods: {
    disabledDueDate (time) {
        return time.getTime() < this.task.start_at
    },
    validateEndDate () {
        if (this.task.start_at > this.task.due_at) {
            this.task.due_at = this.task.start_at
        }
    }
}

そして[〜＃〜] html [〜＃〜]この例の一部は次のようになります。

<el-date-picker @input="validateEndDate" v-model="task.start_at" type="date"></el-date-picker>
<el-date-picker v-model="task.end_at" :picker-options="dueDatePickerOptions" type="date"></el-date-picker>

通知： validateEndDateメソッドはstartDateを変更した後にトリガーされ、startDateの前にendDateがあるかどうかを確認してから、endDateが等しくなるように修正します。

8
Николай Лантинов

より簡単な解決策は、最小/最大値を動的に制限することです。私はこれを提案します：

<input type="date" class="form-control" v-model="dateFrom" :max="dateTo">
<input type="date" class="form-control" v-model="dateTo" :min="dateFrom">

これにより、日付ピッカーが適切な日付範囲に制限されます。

0
David D.