vue element ui 时间选择器 设置两个时间一前一后
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器在标签设置:picker-options 属性,该属性下disabledDate(),控制禁用项,参数为每天的时间,最后使用计算属性computed 动态计算出下线时间可用的值。<el-date-pickerv-model="ruleForm....
·
时间选择器,需求是下线时间必须在发布时间之后,但后台是储存两个值,就没使用element UI 的范围选择器
在标签设置:picker-options 属性,该属性下disabledDate(),控制禁用项,参数为每天的时间,最后使用计算属性
computed 动态计算出下线时间可用的值。
<el-date-picker
v-model="ruleForm.publishDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="publishDateAfter"
:default-value="ruleForm.publishDate"
placeholder="选择日期时间"
></el-date-picker>
</el-form-item>
<el-form-item label="下线时间" prop="offlineDate">
<el-date-picker
v-model="ruleForm.offlineDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="offlineDateAfter"
:default-value="ruleForm.offlineDate"
placeholder="选择日期时间"
:disabled="isSelPub"
></el-date-picker>
这里时间选择器不提供时分秒的控制,所以只能控制日期的
computed: {
publishDateAfter() {
// 动态起始时间
const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000;
const endTimestamp =
Date.parse(this.ruleForm.offlineDate) * 1 - 24 * 60 * 60 * 1000;
return {
disabledDate(time) {
const timestamp = time.getTime();
if (endTimestamp) {
if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
return false;
} else {
return true;
}
} else {
return timestamp <= startTimestamp;
}
}
};
},
offlineDateAfter() {
// 动态起始时间
const startTimestamp = Date.parse(this.ruleForm.publishDate) * 1;
return {
disabledDate(time) {
const timestamp = time.getTime();
if (timestamp >= startTimestamp) {
return false;
}
return true;
}
};
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)