element ui & plus 版本日期时间选择器的差异

TOC

default-time不生效解决办法

element ui 的写法

选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过 default-time 可以分别指定二者的具体时刻。 default-time 接受一个数组，其中的值为形如 12:00:00 的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。

cobol 复制代码

<template>
  <div class="block">
    <p>组件值：{{ value }}</p>
    <el-date-picker
      v-model="value"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        value: ''
      };
    }
  };
</script>

plus写法

使用 datetimerange 进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的 00:00:00 作为起始与结束的时刻；通过选项 default-time 可以控制选中起始与结束日期时所使用的具体时刻。我们可以使用 default-time 属性来控制它。 default-time 接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。第一项控制开始日期的时间值，第二项控制结束日期的时间值。

cobol 复制代码

<template>
  <div class="block">
    <span class="demonstration">Start and end date time 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime1"
    />
  </div>
  <div class="block">
    <span class="demonstration">
      Start date time 12:00:00, end date time 08:00:00
    </span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :default-time="defaultTime2"
    />
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue'
 
const value1 = ref('')
const value2 = ref('')
 
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 12, 0, 0),
  new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'
</script>
<style scoped>
.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.block:last-child {
  border-right: none;
}
.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

default-time的区别在于

2: 接受字符串

default-time 范围选择时选中日期所使用的当日内具体时刻 string[] 数组，长度为 2，每项值为字符串，形如 12:00:00 ，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00

3 接受时间对象

| default-time | 选择日期后的默认时间值。如未指定则默认时间值为 00:00:00 | Date | [Date, Date] | | |:---:|:---:|:---:|:---:|

格式化问题

element ui 的写法

使用 format 指定输入框的格式。使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回 Date 对象。以下为可用的格式化字符串，以 UTC 2017年1月2日 03:04:05 为例：

请注意大小写

格式	含义	备注	举例
`yyyy`	年		2017
`M`	月	不补0	1
`MM`	月		01
`W`	周	仅周选择器的 `format` 可用；不补0	1
`WW`	周	仅周选择器的 `format` 可用	01
`d`	日	不补0	2
`dd`	日		02
`H`	小时	24小时制；不补0	3
`HH`	小时	24小时制	03
`h`	小时	12小时制，须和 `A` 或 `a` 使用；不补0	3
`hh`	小时	12小时制，须和 `A` 或 `a` 使用	03
`m`	分钟	不补0	4
`mm`	分钟		04
`s`	秒	不补0	5
`ss`	秒		05
`A`	AM/PM	仅 `format` 可用，大写	AM
`a`	am/pm	仅 `format` 可用，小写	am
`timestamp`	JS时间戳	仅 `value-format` 可用；组件绑定值为 `number` 类型	1483326245000
`[MM]`	不需要格式化字符	使用方括号标识不需要格式化的字符 (如 [A] [MM])	MM

plus写法

使用 format 指定输入框的格式。使用 value-format 指定绑定值的格式。

默认情况下，组件接受并返回 Date 对象。

在这里查看 Day.js 支持的所有格式。

主要区别

2：为固定的几种写法

3：改完遵循dayjs写法

格式化写法有所不同，请一定要注意传入参数的大小写是否正确

快捷选择&禁用

element ui 的写法

Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	---	---
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	---	---
cellClassName	设置日期的 className	Function(Date)	---	---
firstDayOfWeek	周起始日	Number	1 到 7	7
onPick	选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效	Function({ maxDate, minDate })	---	---

Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	---	---
onClick	选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())	function	---	---

cobol 复制代码

export const datePickerOptions = {
  shortcuts: [
    {
      text: "最近一周",
      onClick(picker) {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        const end = new Date();
        picker.$emit("pick", [beginOfDay(start), endOfDay(end)]);
      },
    },
    {
      text: "最近一个月",
      onClick(picker) {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        const end = new Date();
        picker.$emit("pick", [beginOfDay(start), endOfDay(end)]);
      },
    },
    {
      text: "最近三个月",
      onClick(picker) {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        const end = new Date();
        picker.$emit("pick", [beginOfDay(start), endOfDay(end)]);
      },
    },
  ],
};
 
export function beginOfDay(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
 
export function endOfDay(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
}

基本单位由 type 属性指定。快捷选项需配置 picker-options 对象中的 shortcuts ，禁用日期通过 disabledDate 设置，传入函数

cobol 复制代码

<template>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
 
<script>
import { pickerOptionsDs } from "@/utils/index";
 export default {
    data() {
      return {
        value2: '',
      };
    }
  };
</script>

plus写法

cobol 复制代码

<template>
  <div class="block">
    <span class="demonstration">With shortcuts</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      disabledDate: pickerOptionsDs.disabledDate,
      shortcuts: pickerOptionsDs.shortcuts,
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
    />
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue'
 
const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])
 
</script>

| shortcuts | 设置快捷选项，需要传入数组对象 | object | Array<{ text: string, value: Date | Function }> | |:---:|:---:|:---:|:---:| | disabled-date | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。应该返回一个 Boolean 值。 | Function | (data: Date) => boolean |

cobol 复制代码

function beginOfDay(date) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}
 
function endOfDay(date) {
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate(),
    23,
    59,
    59,
    999
  );
}
export const pickerOptionsDs = {
  //禁用今天之后的日期
  disabledDate(time) {
    return (
      time.getTime() >
      new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1
    );
  },
  //快捷选项
  shortcuts: [
    {
      text: "最近一周",
      value() {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        const end = new Date();
        return [beginOfDay(start), endOfDay(end)];
      },
    },
    {
      text: "最近一个月",
      value() {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        const end = new Date();
        return [beginOfDay(start), endOfDay(end)];
      },
    },
    {
      text: "最近三个月",
      value() {
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        const end = new Date();
        return [beginOfDay(start), endOfDay(end)];
      },
    },
  ],
};

主要区别

2:为组合模式 picker-options 包含shortcuts & disabled-date

shortcuts 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())

3:做了拆分 shortcuts 的变化（Array<{ text: string, value: Date | Function }> ）派发事件改为value 返回时间对象

element ui & plus 版本 日期时间选择器的差异