el-date-picker 日期时间进行限制,精确到时分秒

<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
class="form"
>
<el-form-item label="起始时间" prop="startTime">
 <el-date-picker
   v-model="form.startTime"
   type="datetime"
   style="width: 50%"
   placeholder="选择起始时间"
   value-format="yyyy-MM-dd HH:mm:ss"
   @change="changeStartTime"
 >
 </el-date-picker>
</el-form-item>

<el-form-item label="结束时间" prop="endTime">
 <el-date-picker
   v-model="form.endTime"
   style="width: 50%"
   type="datetime"
   placeholder="选择结束时间"
   value-format="yyyy-MM-dd HH:mm:ss"
   @change="changeEndTime"
 >
 </el-date-picker>
</el-form-item>
</el-form>




 //选择日期后触发change方法,将开始和结束时间转为时间戳进行对比,不符合约束条件就清空该日期重新选择
changeStartTime(val) {
      let date = new Date(val).getTime();
      this.startTime = date;
      if (this.endTime) {
          if (this.endTime < this.startTime) {
              this.$message.error("开始时间不能大于结束时间");
              this.form.startTime = "";
              this.startTime = null;
          }
      }
},
changeEndTime(val) {
      let date = new Date(val).getTime();
      this.endTime = date;
      if (this.startTime) {
          if (this.endTime < this.startTime) {
              this.$message.error("结束时间不能小开始时间");
              this.form.endTime = "";
              this.endTime = null;
          }
      }
},

你可能感兴趣的:(前端,element,elementui)