プロジェクトの多くのシナリオでは、時間範囲選択コンポーネントを使用します。
この時、私たちが選びすぎたのは要素 ui の el-date-picker コンポーネントでしたが、その他の元々の醜さも嫌いでした。
私と同じように書く人はいますか?
//页面组件
<el-col :span="6">
<el-date-picker
v-model="datePickerStart"
:disabled-date="disabledDateStart"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始时间" />
</el-col>
<el-col :span="1">
<div class="blockText">-</div>
</el-col>
<el-col :span="6">
<el-date-picker
v-model="datePickerEnd"
:disabled-date="disabledDateEnd"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束时间" />
</el-col>
//日期禁用方法
disabledDateStart(time) {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
disabledDateEnd(time) {
const beginDateVal = this.datePickerStart;
if (beginDateVal) {
return (
time.valueOf() <=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
},
disabledDate は決してトリガーされず、disabled メソッドに入らないことがわかります。何度も考えた結果、コンポーネントの属性ではないと公式サイトで読みました。
あはは、最終的にはこんな感じで使われました。
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="{ disabledDate: disabledDateStart }"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
こんな使い方もできます
<el-date-picker
v-model="datePickerStart"
type="date"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
placeholder="开始时间"
/>
//在date里定义
data() {
return {
pickeroptions: {
disabledDate: time => {
const beginDateVal = this.datePickerEnd;
if (beginDateVal) {
return (
time.valueOf() >=
new Date(beginDateVal).valueOf() - 24 * 60 * 60 * 1000 + 1
);
}
}
},
datePickerStart: "",
datePickerEnd: "",
}
}
最初の個人的な推奨事項は、私たちの日常の論理に沿ったものです