I.はじめに
仕事では、elementUi の日付ピッカー el-date-picker に遭遇します。使用中に、日付を選択するときに時間範囲要件を追加する必要がある状況が発生する可能性があります。たとえば、作成日はそれ以降であってはなりません現在の日付では、終了日を開始日より前にすることはできません。el-date-picker の type="daterange" を使用している場合、選択範囲の開始と終了をより適切に制御できますが、2 つの日付を 2 つに分割する場合は、主要な日付を個別に設定する必要があります
。 el-date-pickerの「属性」を利用します。ショートカット オプションは、ピッカー オプション オブジェクトのショートカットを使用して設定する必要があります。無効になった日付は、disabledDate を通じて設定され、関数に渡されます。
2. コード
html部分
<el-date-picker
v-model="startDate"
align="right"
type="date"
placeholder="选择开始日期"
:picker-options="startDisabled">
</el-date-picker>
<el-date-picker
v-model="endDate"
align="right"
type="date"
placeholder="选择结束日期"
:picker-options="endDisabled">
</el-date-picker>
js部分
data() {
return {
//首先data里定义日期选择器关联的两个变量
startDate:"",
endDate:"",
// 然后定义不可选择限制
// 开始日期
startDisabled：{
disabledDate: (time) => {
// 首先判断是否选择了结束时间，如果选择了结束时间，那么开始时间不得晚于结束时间
if(this.endDate) {
return time.getTime() > new Date(this.endDate);
} else {
// 开始日期只能选择当天日期及之前
return time.getTime() >= Date.now();
}
}
},
endDisabled：{
disabledDate: (time) => {
// 首先判断是否选择了开始时间，如果选择了开始时间，那么结束时间不得早于开始时间
if(this.startDate) {
// 如果结束日期和开始日期不可以是同一天，就需要-86400000，如果可以，则不需要
return time.getTime() > new Date(this.startDate);
}
}
}
}
}
レンダリングは次のとおりです
上記のコードは、単純に 2 つの日付ピッカーを実装して時間範囲を選択することができます。① 開始日は現在の日付より遅く、終了日より遅くであってはなりません。② 終了日は開始日より前であってはなりません。
日付の選択に他の要件がある場合は、対応する関数で変更することもできます。例えば、希望の開始時刻を当日の前日から選択できる場合
// 此处继续使用上面data中定义的变量
// 开始日期
startDisabled：{
disabledDate: (time) => {
const start = 1 * 24 * 3600 * 1000 // 前一天
if(this.endDate) {
return time.getTime() > new Date(this.endDate)
} else {
return time.getTime() > Date.now() - start;
}
}
},
endDisabled：{
disabledDate: (time) => {
const start = 2 * 24 * 3600 * 1000 // 前一天
if(this.startDate) {
return time.getTime() < new Date(this.startDate);
} else {
return time.getTime() < Date.now() - start
}
}
}
上記は提出期間を 1 つだけ選択した場合ですが、複数の期間を選択する場合もあります。
multipleData:[{
startTime: "2023-09-04", endTime: "2023-09-06" }] // 定义一个储存多选时间段的数组
// 开始日期
startDisabled：{
disabledDate: (time) => {
let firstDisabled = ""
let secondDisabled = ""
if(this.endDate) {
firstDisabled = time.getTime() > new Date(this.endDate);
} else {
firstDisabled = time.getTime() >= Date.now();
}
this.multipleData.forEach((item, i) => {
secondDisabled = secondDisabled || (time.getTime() > new Date(item.startTime).getTime() - 86400000 && time.getTime() < new Date(this.endDate))
})
return firstDisabled || secondDisabled
}
},
endDisabled：{
disabledDate: (time) => {
let firstDisabled = ""
let secondDisabled = ""
if(this.startDate) {
firstDisabled = time.getTime() < new Date(this.startDate) - 86400000;
}
this.multipleData.forEach((item, i) => {
secondDisabled = secondDisabled || (time.getTime() > new Date(item.startTime).getTime() - 86400000 && time.getTime() < new Date(item.endTime))
})
return firstDisabled || secondDisabled
}
}
}
効果は次のとおりです。
上記のコードは、以前に選択した日付を再度選択できないようにするだけですが、前の日付と次の日付は選択できるため、以前に選択した日付が含まれることになります。現時点での提案は、提出する際に個別に判断することです。以下に期間の繰り返しかどうかを判定するコードを添付します。
//data中定义数据
data(){
return {
multipleData: [{
startTime: "2023-09-04", endTime: "2023-09-06" }, {
startTime: "2023-09-08", endTime: "2023-09-16" }, {
startTime: "2023-09-14", endTime: "2023-09-17" }],
}
}
//methods中定义方法
methods:{
judgeTimes() {
let startArr = []
let endArr = []
this.multipleData.forEach(item => {
startArr.push(item.startTime ? new Date(item.startTime).getTime() : "")
endArr.push(item.endTime ? new Date(item.endTime).getTime() : "")
})
let sortArrS = startArr.sort()
let sortArrE = endArr.sort()
let flag = false
for (let i = 0; i < sortArrS.length; i++) {
if (i > 0) {
if (sortArrS[i] <= sortArrE[i - 1]) {
flag = true
}
}
}
if (flag) {
return false
} else {
return true
}
},
submit() {
if (!this.judgeTimes()) {
this.$message.warning("时间段重复")
} else {
this.$message.success("成功")
}
}
}
上記の関数の戻り値に基づいて繰り返される期間があるかどうかを判断し、対応するプロンプトを表示します。
