背景:选择开始时间,结束时间自动增加30分钟,结束时间也可重新选择,如图:
文章来源:https://www.toymoban.com/news/detail-621972.html
文章来源地址https://www.toymoban.com/news/detail-621972.html
<el-form-item label="预约开始时间" prop="value1">
<el-date-picker
size="large"
v-model="ruleForm.value1"
type="datetime"
placeholder="选择日期时间"
@change="changeStartTime"
>
</el-date-picker>
</el-form-item>
<el-form-item label="预约结束时间" prop="value2">
<el-date-picker
size="large"
v-model="ruleForm.value2"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</el-form-item>
ruleForm: {
value1: '', //预约时间-开始
value2: '', //预约时间-结束
}
//选择开始时间
changeStartTime() {
this.ruleForm.value2 = new Date(
//将结束时间由时间戳化为标准时间
this.ruleForm.value1.getTime() + 60 * 1000 * 30
//将开始时间化为时间戳,后增加30min即为结束时间的时间戳
);
},
到了这里,关于<el-date-picker>组件选择开始时间,结束时间自动延长30min的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!