深入解析el-date-pickerpicker-options选项

一、disabled

disabled选项可以使日期选择器不可用。默认值为false

  <el-date-picker v-model="date" :disabled="true"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，:disabled="true"将日期选择器设置为不可用状态

二、editable

editable选项允许我们手动输入日期（包括年、月、日）。默认值为true

  <el-date-picker v-model="date" :editable="false"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，:editable="false"将日期选择器设置为不可编辑状态

三、clearable

clearable选项允许我们清空日期选择器中的值。默认值为true

  <el-date-picker v-model="date" :clearable="false"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，:clearable="false"将清空按钮隐藏

四、size

size选项可以设置日期选择器的大小。默认值为medium。可选值有：large、medium、small、mini

  <el-date-picker v-model="date" size="small"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，size="small"将日期选择器设置为小尺寸样式

五、picker-options

picker-options选项是日期选择器的核心选项。它允许我们自定义日期选择器的外观和功能。我们可以在该选项中设置shortcuts（快捷选择日期）、disabledDate（禁止选择日期）等属性

  <el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，pickerOptions是在Vue实例中定义的选项对象

  data() {
    return {
      date: '',
      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);
          }
        }],
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    }
  }

以上代码中，我们设置了三个快捷选择日期按钮（今天、昨天、一周前），我们还通过disabledDate方法禁止了选择未来的日期。

六、format

format选项是日期选择器显示的日期格式。默认值为yyyy-MM-dd

  <el-date-picker v-model="date" format="yyyy/MM/dd"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，format="yyyy/MM/dd"将日期选择器的日期格式设置为年/月/日

七、value-format

value-format选项是日期选择器提交的日期格式。默认值为yyyy-MM-dd

  <el-date-picker v-model="date" value-format="yyyy/MM/dd"></el-date-picker>

以上代码中，date是在Vue实例中定义的数据，value-format="yyyy/MM/dd"将v-model绑定的数据格式设置为年/月/日

八、range-separator、start-placeholder、end-placeholder

range-separator选项是日期范围选择器的分隔符。默认值为~

start-placeholder和end-placeholder选项是日期范围选择器的占位符

  <el-date-picker type="daterange" v-model="dateRange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

以上代码中，type="daterange"表示我们使用日期范围选择器，v-model="dateRange"表示我们使用v-model来绑定数据，range-separator="至"将分隔符设置为“至”，start-placeholder="开始日期"和end-placeholder="结束日期"分别设置了两个输入框的占位符

九、unlink-panels

unlink-panels选项是日期范围选择器的特性。如果启用，则每个面板都可以单独选择日期；如果禁用，则必须通过“确定”按钮才能将选择的日期范围提交。默认值为false

  <el-date-picker type="daterange" v-model="dateRange" unlink-panels></el-date-picker>

以上代码中，type="daterange"表示我们使用日期范围选择器，v-model="dateRange"表示我们使用v-model来绑定数据，unlink-panels设置日期范围选择器的unlink-panels选项为true

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/291704.html