Vue element 组件库中DatePicker 日期选择器的使用和禁用范围设置

一、组件使用

<template>
    <el-date-picker
      v-model="value1"
      type="date"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
</template>
<script>
  export default {
    data() {
      return {
       value1: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
      };
    }
  };
</script>

 

二、组件属性的具体参数

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DatePicker) / array(DateRangePicker)	—	—
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
type	显示类型	string	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DatePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	—	'-'
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
default-time	范围选择时选中日期所使用的当日内具体时刻	string[]	数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	—
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	—	false
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close
validate-event	输入时是否触发表单的校验	boolean	-	true

三、日期禁用范围设置

在上面的属性文档介绍中我们可以找到可以通过设置 picker-options 属性来设置当前时间日期选择器特有的选项

可以通过设置 disabledDate 来禁用范围外的时间选项，就可以限制可选的范围。而 disabledDate 是一个函数，返回boolean类型。

案例：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="开始生效时间">
      <el-date-picker v-model="form.startTime" type="date" placeholder="选择日期" :picker-options="startTimePicker"/>
    </el-form-item>
    <el-form-item label="失效时间">
      <el-date-picker v-model="form.endTime" type="date" placeholder="选择日期" :picker-options="endTimePicker"/>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      form: {
        startTime: null,
        endTime: null,
      },
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: time => (this.form.endTime ? time.getTime() > new Date(this.form.endTime).getTime() : false),
      };
    },
    endTimePicker() {
      return {
        disabledDate: time => (this.form.startTime ? time.getTime() < new Date(this.form.startTime).getTime() : false),
      };
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
</style>