elementUi el-date-picker时间控件精确到时分秒

1.时间日期type=datetime

html 复制代码
<template>
  <el-date-picker
    v-model="time"
    :picker-options="pickerOptions"
    ref="datetime"
    type="datetime"
    :default-time="range"
    :disabled="disabled"
    placeholder="请选择日期时间"
    :format="format"
    :value-format="valueFormat"
  ></el-date-picker>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "DateTimePickerRange",
  props: {
    range: {
      type: String,
      default: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss") + " - 23:59:59"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ""
    },
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    }
  },
  computed: {
    time: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      }
    }
  },
  watch: {
    time: {
      handler(newValue) {
        if (newValue != null && newValue !== "") {
          if (
            dayjs(new Date())
              .format("YYYY-MM-DD HH:mm:ss")
              .split(" ")[0] == newValue.split(" ")[0]
          ) {
            this.pickerOptions.selectableRange =
              dayjs(new Date())
                .format("YYYY-MM-DD HH:mm:ss")
                .split(" ")[1] + " - 23:59:59";
          } else {
            this.pickerOptions.selectableRange = "00:00:00 - 23:59:59";
          }
        }
      }
    }
  },
  data() {
    return {
      // 在elementUI文档中提供的pickerOptions,这里设置disabledDate限制日期,onPick根据选择的日期进而显示时间
      pickerOptions: {
        disabledDate(time) {
          const dateTime = new Date();
          const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
          return time.getTime() < new Date(startDateTime).getTime();
        },
        selectableRange: (() => {
          let date = new Date();
          let hour = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return `${hour}:${minute}:${second}` + " - 23:59:59";
        })()
      }
    };
  }
};
</script>

2.时间日期type=datetimerange

html 复制代码
<template>
  <el-date-picker v-model="timeArr" :picker-options="pickerOptions" ref="datetime" type="datetimerange"
    range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" format="yyyy-MM-dd HH:mm:ss"
    :default-time="defaultTime" :disabled="disabled" value-format="timestamp"></el-date-picker>
</template>

<script>
import dayjs from "dayjs";

const DateFormat = "YYYY-MM-DD";
const TimeFormat = "HH:mm:ss";
const StartTimeFormat = "00:00:00";
const ENDTimeFormat = "23:59:59";

export default {
  name: "DateTimePickerRange",
  props: {
    range: {
      type: Array,
      default: () => [dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), '23:59:59']
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    timeArr: {
      get() {
        return this.value || [];
      },
      set(newVal) {
        this.$emit('input', newVal);
      }
    },
    defaultTime() {
      return [dayjs(new Date()).format('HH:mm:ss'), '23:59:59'];
    }
  },
  data() {
    return {
      startDate: '',
      startTime: '',
      // 在elementUI文档中提供的pickerOptions,这里设置disabledDate限制日期,onPick根据选择的日期进而显示时间
      pickerOptions: {
        disabledDate: time => {
          const [start, end] = this.range;
          const d = new Date(time).getTime();
          const pickDate = dayjs(time).format(DateFormat);
          const startDate = dayjs(start).format(DateFormat);
          const startTime = dayjs(start).format(TimeFormat);
          const startStamp = new Date(start).getTime();
          const endStamp = new Date(end).getTime();
          // 组件(界面)上的日期 和 时间范围中最小的日期  相同时
          if (pickDate === startDate && startTime !== ENDTimeFormat) {
            return false;
          }
          // 这里不用判断时间范围中最大的日期
          return d < startStamp || d >= endStamp; // 小于最小日期 或者 大于最大日期
        },
        onPick: ({ minDate, maxDate }) => {
          if (!(minDate && maxDate)) {
            // 选择完整的日期后,再进入后面的逻辑
            return;
          }
          const picker = this.$refs.datetime && this.$refs.datetime.picker;
          const { minTimePicker, maxTimePicker } = picker.$refs;
          const [start, end] = this.range;
          const pickStartDate = dayjs(minDate).format(DateFormat); // 手动选择的最小日期
          const pickEndDate = dayjs(maxDate).format(DateFormat); // 手动选择的最大日期
          // const startDate = dayjs(start).format(DateFormat); // 时间范围this.range,最小日期 年月日
          // const startTime = dayjs(start).format(TimeFormat); // 时间范围this.range,最小时间 时分秒
          const startDate = dayjs(new Date()).format(DateFormat); // 时间范围this.range,最小日期 年月日
          const startTime = dayjs(new Date()).format(TimeFormat); // 时间范围this.range,最小时间 时分秒
          const endDate = dayjs(end).format(DateFormat); // 时间范围this.range,最大日期 年月日
          const endTime = dayjs(end).format(TimeFormat); // 时间范围this.range,最大日期 年月日

          this.startDate = startDate;
          this.startTime = startTime;

          // 手动选择的最小日期 等于 时间范围this.range的最小日期,那么需要限制时间范围
          if (pickStartDate === startDate) {
            minTimePicker.selectableRange = [
              [
                new Date(`${startDate} ${startTime}`),
                new Date(`${startDate} ${ENDTimeFormat}`)
              ]
            ];

          } else {
            // 不相等,则可以选择全部的时间范围,不需要做限制
            minTimePicker.selectableRange = [];
          }
          // 手动选择的最大日期 等于 时间范围this.range的最大日期,那么需要限制时间范围
          if (pickEndDate === endDate) {
            maxTimePicker.selectableRange = [
              [
                new Date(`${endDate} ${StartTimeFormat}`),
                new Date(`${endDate} ${endTime}`)
              ]
            ];
          } else {
            // 不相等,则可以选择全部的时间范围,不需要做限制
            maxTimePicker.selectableRange = [];
          }
        }
      }
    };
  },
};
</script>
相关推荐
Jeffrey__Lin17 小时前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
Miketutu17 小时前
vxe-table编辑模式适配el-date-picker
javascript·vue.js·elementui
533_17 小时前
[element-plus] el-tree 父节点展开后,子节点有白背景色的bug
elementui
爱生活的苏苏1 天前
elementUI 表单验证-联动型校验
前端·javascript·elementui
硅谷工具人2 天前
基于element-plus封装table组件
elementui·el-table封装
咚咚咚小柒2 天前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
Stringzhua3 天前
ElementUi【饿了么ui】
前端·ui·elementui
尔嵘3 天前
vue2+elementUi实现自定义表格框选复制粘贴
前端·javascript·elementui
星光一影3 天前
HIS系统天花板,十大核心模块,门诊/住院/医保全流程打通,医院数字化转型首选
java·spring boot·后端·sql·elementui·html·scss
博客zhu虎康4 天前
Element中 el-tree 如何隐藏 Tree 组件中的父节点 Checkbox
javascript·vue.js·elementui