vue element日付セレクタに基づく時間選択範囲制限
ElementUIはお腹が空いたか?vue 2に基づくセットです.xのuiフレームワークです.
公式ドキュメントでpicker-optionsプロパティを使用して、選択可能な日付を制限します.
単一入力ボックスの
コンポーネントコード:
シナリオ:指定日の制限(指定日以前は選択不可)
シナリオ1:今日および今日以降を選択する日付を設定
シナリオ2:今日および今日以前を選択する日付を設定
シナリオ3:今日以降を選択する日付を設定します(当日時刻は選択できません)
シナリオ4:今日までの日付を選択する(当日は選択できません)
シナリオ5:3ヶ月前から今日までの日付を設定
2つの入力ボックス
コンポーネントコード
シナリオ1:終了日を開始日より大きくすることはできません
選択範囲(type=「daterange」)の日付フィルタに対して、単一入力ボックスの場合と同様にパラメータtimeを直接使用して判断する
公式ドキュメントでpicker-optionsプロパティを使用して、選択可能な日付を制限します.
単一入力ボックスの
コンポーネントコード:
シナリオ:指定日の制限(指定日以前は選択不可)
data (){
var Deadline=this.$route.query.time;//url
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < new Date(Deadline).getTime()
}
},
}
}
シナリオ1:今日および今日以降を選択する日付を設定
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
シナリオ2:今日および今日以前を選択する日付を設定
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6
}
},
}
}
シナリオ3:今日以降を選択する日付を設定します(当日時刻は選択できません)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now();
}
},
}
}
シナリオ4:今日までの日付を選択する(当日は選択できません)
data (){
return {
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
シナリオ5:3ヶ月前から今日までの日付を設定
data (){
return {
pickerOptions0: {
disabledDate(time) {
let curDate = (new Date()).getTime();
let three = 90 * 24 * 3600 * 1000;
let threeMonths = curDate - three;
return time.getTime() > Date.now() || time.getTime() < threeMonths;;
}
},
}
}
2つの入力ボックス
コンポーネントコード
シナリオ1:終了日を開始日より大きくすることはできません
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
},
}
}
選択範囲(type=「daterange」)の日付フィルタに対して、単一入力ボックスの場合と同様にパラメータtimeを直接使用して判断する