element-ui 起止日期时间选择 使用带快捷选项的日期时间选择器

原页面效果

新页面效果

代码实现

vue

<el-form :model="queryParams" ref="queryForm" :rules="rules" :inline="true" label-width="100px">
                  <el-form-item label="开始时间" prop="ksrq">
					<el-date-picker v-model="queryParams.ksrq" type="datetime" clearable
              			format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              			:picker-options="pickerOptions" placeholder="开始时间">
            		</el-date-picker>
                  </el-form-item>
                  <el-form-item label="结束时间" prop="jsrq">
					<el-date-picker v-model="queryParams.jsrq" type="datetime"
               			format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
               			:picker-options="pickerOptions" placeholder="结束时间">
            		</el-date-picker>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                  </el-form-item>
            </el-form>

js

data() {
    var updateQueryParams = (start, end, callback) => {
      this.queryParams.ksrq = new Date(start.getTime() - (start.getTimezoneOffset() * 60000)).toISOString().replace('T', ' ').substring(0, 19); // 格式化为 'yyyy-MM-dd HH:mm:ss'
      this.queryParams.jsrq = new Date(end.getTime() - (end.getTimezoneOffset() * 60000)).toISOString().replace('T', ' ').substring(0, 19); // 格式化为 'yyyy-MM-dd HH:mm:ss'
    };
    var validateStartDatetime = (rule, value, callback) => {
      if (this.queryParams.jsrq && this.queryParams.ksrq) {
        if (new Date(this.queryParams.ksrq).getTime() > new Date(this.queryParams.jsrq).getTime()) {
            this.$modal.alertWarning("开始时间需要小于结束时间！");
            this.queryParams.ksrq=this.ksrq_old
          } else {
            callback();
            this.ksrq_old=this.queryParams.ksrq
          }
      } else {
        callback();
        this.ksrq_old=this.queryParams.ksrq
      }
    };
    var validateEndDatetime = (rule, value, callback) => {
      if (this.queryParams.ksrq && this.queryParams.jsrq) {
          if (new Date(this.queryParams.ksrq).getTime() > new Date(this.queryParams.jsrq).getTime()) {
            this.$modal.alertWarning("结束时间需要大于开始时间！");
            this.queryParams.jsrq=this.jsrq_old
          }else {
            callback();
            this.jsrq_old=this.queryParams.jsrq
          }
      }else {
        callback();
        this.jsrq_old=this.queryParams.jsrq
      }
    };
    return {
      ksrq_old:'2025-01-02 00:00:00',
      jsrq_old: '2025-01-02 23:59:59',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ksrq: '2025-01-02 00:00:00',
        jsrq: '2025-01-02 23:59:59',
      },
        rules: {
          ksrq: [{ validator: validateStartDatetime, trigger: "change" }],
          jsrq: [{ validator: validateEndDatetime, trigger: "change" }],
        },
      pickerOptions: {
        shortcuts: [
          {
          text: '今天',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().toLocaleDateString());
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
            debugger
            end.setHours(23, 59, 59, 999);
            updateQueryParams(start,end);
          }
        },
          {
          text: '昨天',
          onClick(picker) {
            const now = new Date(); 
            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate()-1);
            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            updateQueryParams(start,end);
          }
        },
          {
          text: '最近3天',
          onClick(picker) {
            const now = new Date(); 
            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            updateQueryParams(start,end);
          }
        },
          {
          text: '最近7天',
          onClick(picker) {
            const now = new Date(); 
            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            updateQueryParams(start,end);
          }
        }, {
          text: '最近30天',
          onClick(picker) {
            const now = new Date(); 
            const end = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 29);
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            updateQueryParams(start,end);
          }
        }]
      },
    };
  },

参考

DateTimePicker 日期时间选择器