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

目录

default-time不生效解决办法

element ui 的写法

 plus写法

格式化问题 

element ui 的写法

plus写法

 快捷选择&禁用

element ui 的写法

plus写法 

default-time不生效解决办法

element ui 的写法

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

<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接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值，第二项控制结束日期的时间值。

<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 为例：

请注意大小写

plus写法

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

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

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

主要区别
2：为固定的几种写法
3：改完遵循dayjs写法

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

 快捷选择&禁用
 

element ui 的写法

Picker Options

Shortcuts

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 设置，传入函数

<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写法 

<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>

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 返回时间对象