element-ui 日期时间选择控件DateTimePicker 带快捷方式，配置默认时间-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 日期时间选择控件DateTimePicker 带快捷方式，配置默认时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：好记性不如烂笔头

带快捷方式的
可设置默认时间
js中的Date对象 setHours()方法——Date.setHours(hour,min,sec,millisec)，如new Date().setHour(0, 0, 0)，new Date().setHour(23, 59, 59)

带快捷键的，关键属性picker-options，单个日期时间的选择或者日期时间段的选择都可以用

配置:picker-options="pickerOptions"
在data中给pickerOptions赋值，其中的shortcuts属性赋值为一个对象数组，属性值为text和onClick

element-ui 日期时间选择控件DateTimePicker 带快捷方式，配置默认时间

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      };
    }
  };
</script>

2. 可以设置默认时间，关键属性default-time，default-time为一个数组。

default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

element-ui 日期时间选择控件DateTimePicker 带快捷方式，配置默认时间