深入解析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