element el-date-picker日期时间选择工具时间范围

最新推荐文章于 2024-11-14 20:51:46 发布

南桥几许

最新推荐文章于 2024-11-14 20:51:46 发布

阅读量244

点赞数

分类专栏： element 文章标签： vue.js html

本文链接：https://blog.csdn.net/z17864151193/article/details/115398900

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端使用`el-date-picker`组件设置日期和时间选择器，确保用户只能选择当前时刻或之后的日期和时间。通过`disabledDate`和`selectableRange`属性，可以实现对日期选择的限制，防止用户选择过去的时间。代码示例展示了如何设置这一功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

页面代码

<el-date-picker
            v-if="ifSendTime"
            v-model="infoFrom.sendTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期时间"
            :picker-options="pickerOptions"
          >
          </el-date-picker>

  //日期只能选择此刻之后 
  pickerOptions: any =this.disabledDate();
  disabledDate() {
    let that = this;
    let newtime: any = `${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`; 
    return {
      disabledDate(time: any) {
        return time.getTime() < Date.now() - 3600 * 1000 * 24;
      },
      selectableRange: newtime + " - 23:59:59",
    };
  }