element dataPicker时间选择器选择当前之后时间

最新推荐文章于 2024-04-15 11:34:39 发布

q249859693

最新推荐文章于 2024-04-15 11:34:39 发布

阅读量395

点赞数

文章标签：前端框架前端

本文链接：https://blog.csdn.net/q249859693/article/details/132598111

版权

element dataPicker时间选择器选择当前之后时间

                <el-form-item label="报名截止时间" prop="time">
                  <el-date-picker
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="form.time"
                    type="datetime"
                    placeholder="选择日期时间"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>

data(){
	return{
      pickerOptions: {
        disabledDate (time) {
          const date = new Date();
          const oneday = date.getTime();
          return time.getTime() < new Date().getTime() - 86400000;
        },
        selectableRange: (() => {
          let data = new Date();
          let hour = data.getHours();
          let minute = data.getMinutes();
          let second = data.getSeconds();
          return [`${hour}:${minute}:${second} - 23:59:59`]
        })(),
      },



		rules:{
         time: [
          {
            required: true, message: '必填项', trigger: 'blur',
          },
          {
            message: '时间不能小于当前时间',
            validator: (rule, value, callback) => {
              const now = new Date();
              const selectedTime = new Date(value);
              if (selectedTime < now) {
                callback(new Error('时间不能小于当前时间'));
              } else {
                callback();
              }
            },
          }
         ],
		}
	}
}