当前位置：首页 > news >正文

element-时间选择器单独写两个时间选择器并按照规则进行置灰选择，精确到时分秒

news 2024/10/22 15:46:09

项目场景：

在这里插入图片描述
要求：

开始时间和结束时间可以分开搜索，所以组件自带的时间范围选择器不适用
开始时间和结束时间超过当前时间置灰不可选择
开始时间不可选择结束时间之后的时间
结束时间不可选择开始时间之前的时间

代码实例

 <el-form-item><div class="theme-date"><div class="theme-date-prepend">任务开始/结束时间</div><el-date-pickertype="datetime"placeholder="选择任务开始日期":picker-options="pickerOptions"value-format="yyyy-MM-dd HH:mm:ss"v-model="form.startTime"></el-date-picker><span style="padding: 0 2px">至</span><el-date-pickertype="datetime"placeholder="选择任务结束日期":picker-options="pickerOptions1"value-format="yyyy-MM-dd HH:mm:ss"v-model="form.endTime"></el-date-picker></div></el-form-item>

data中声明两个参数
startTimeSelectableRange: "00:00:00-23:59:59",
endTimeSelectableRange: "00:00:00-23:59:59",

computed: {pickerOptions() {const that = this;return {disabledDate(time) {if (that.form.endTime && that.form.endTime !== "") {return (time.getTime() > new Date(that.form.endTime).getTime() ||time.getTime() > new Date());}return time.getTime() > new Date();},selectableRange: that.startTimeSelectableRange,};},pickerOptions1() {const that = this;return {disabledDate(time) {if (that.form.startTime && that.form.startTime !== "") {return (time.getTime() + 3600 * 1000 * 24 <new Date(that.form.startTime).getTime());}},selectableRange: that.endTimeSelectableRange,};},},

重要的是要对开始时间和结束时间进行监听

 watch: {"form.startTime": {handler(newVal) {// 判断是不是选择的当天,去置灰当天当时当秒之后的置灰操作if (newVal &&new Date(newVal).getFullYear() === new Date().getFullYear() &&new Date(newVal).getMonth() === new Date().getMonth() &&new Date(newVal).getDate() === new Date().getDate()) {this.startTimeSelectableRange = `00:00:00 - ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;}// 判断是不是选择的结束时间的当天,如果是,那就要将选择的结束时间后的时间进行置灰不可选择if (this.form.endTime &&new Date(newVal).getFullYear() ===new Date(this.form.endTime).getFullYear() &&new Date(newVal).getMonth() ===new Date(this.form.endTime).getMonth() &&new Date(newVal).getDate() === new Date(this.form.endTime).getDate()) {this.startTimeSelectableRange = `00:00:00 - ${new Date(this.form.endTime).getHours()}:${new Date(this.form.endTime).getMinutes()}:${new Date(this.form.endTime).getSeconds()}`;}},},"form.endTime": {handler(newVal) {// 判断是不是选择的当天,去置灰当天当时当秒之后的置灰操作if (newVal &&new Date(newVal).getFullYear() === new Date().getFullYear() &&new Date(newVal).getMonth() === new Date().getMonth() &&new Date(newVal).getDate() === new Date().getDate()) {this.endTimeSelectableRange = `00:00:00 - ${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`;}// 判断是不是选择的开始时间的当天,如果是,那就要将选择的结束时间前的时间进行置灰不可选择if (this.form.startTime &&new Date(newVal).getFullYear() ===new Date(this.form.startTime).getFullYear() &&new Date(newVal).getMonth() ===new Date(this.form.startTime).getMonth() &&new Date(newVal).getDate() === new Date(this.form.startTime).getDate()) {this.endTimeSelectableRange = `${new Date(this.form.startTime).getHours()}:${new Date(this.form.startTime).getMinutes()}:${new Date(this.form.startTime).getSeconds()} - 23:59:59`;}},},},