<!--DatePicker 日期選擇器：用於選擇或輸入日期
1.選擇日,以「日」為基本單位，基礎的日期選擇控制元件
基本單位由type屬性指定。快捷選項需配置picker-options物件中的shortcuts，禁用日期通過 disabledDate 設定，傳入函式-->
<div class="block">
  <span class="demonstration">預設</span>
  <el-date-picker
    v-model="value1"
    type="date"
    placeholder="選擇日期">
  </el-date-picker>
</div>
<div class="block">
  <span class="demonstration">帶快捷選項</span>
  <el-date-picker
    v-model="value2"
    align="right"
    type="date"
    placeholder="選擇日期"
    :picker-options="pickerOptions1">
  </el-date-picker>
</div>
 

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          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);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  })
</script>
 

<!--2.其他日期單位
通過擴充套件基礎的日期選擇，可以選擇周、月、年或多個日期-->
<div class="container">
  <div class="block">
    <span class="demonstration">周</span>
    <el-date-picker
      v-model="value3"
      type="week"
      format="yyyy 第 WW 周"
      placeholder="選擇周">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">月</span>
    <el-date-picker
      v-model="value4"
      type="month"
      placeholder="選擇月">
    </el-date-picker>
  </div>
</div>
<div class="container">
  <div class="block">
    <span class="demonstration">年</span>
    <el-date-picker
      v-model="value5"
      type="year"
      placeholder="選擇年">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">多個日期</span>
    <el-date-picker
      type="dates"
      v-model="value14"
      placeholder="選擇一個或多個日期">
    </el-date-picker>
  </div>
</div>
 

<!--3.選擇日期範圍,可在一個選擇器中便捷地選擇一個時間範圍
在選擇日期範圍時，預設情況下左右面板會聯動。如果希望兩個面板各自獨立切換當前月份，可以使用unlink-panels屬性解除聯動。-->
<div class="block">
  <span class="demonstration">預設</span>
  {{value6}}
  <el-date-picker
    v-model="value6"
    type="daterange"
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期">
  </el-date-picker>
</div>
<div class="block">
  <span class="demonstration">帶快捷選項</span>
  <el-date-picker
    v-model="value7"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    :picker-options="pickerOptions2">
  </el-date-picker>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一週',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三個月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value6: '',
        value7: ''
      };
    }
  })
</script>

<!--4.日期格式
  使用format指定輸入框的格式；使用value-format指定繫結值的格式。
預設情況下，元件接受並返回Date物件。-->
  <div class="block">
    <span class="demonstration">預設為 Date 物件</span>
    <div class="demonstration">值：{{ value10 }}</div>
    <el-date-picker
      v-model="value10"
      type="date"
      placeholder="選擇日期"
      format="yyyy 年 MM 月 dd 日">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">使用 value-format</span>
    <div class="demonstration">值：{{ value11 }}</div>
    <el-date-picker
      v-model="value11"
      type="date"
      placeholder="選擇日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">時間戳</span>
    <div class="demonstration">值：{{ value12 }}</div>
    <el-date-picker
      v-model="value12"
      type="date"
      placeholder="選擇日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="timestamp">
    </el-date-picker>
  </div>

<!--5.預設顯示日期
在選擇日期範圍時，指定起始日期和結束日期的預設時刻。
選擇日期範圍時，預設情況下，起始日期和結束日期的時間部分均為當天的 0 點 0 分 0 秒。通過default-time可以分別指定二者的具體時刻。default-time接受一個數組，其中的值為形如12:00:00的字串，第一個值控制起始日期的時刻，第二個值控制結束日期的時刻。-->
<div class="block">
  <p>元件值：{{ value13 }}</p>
  <el-date-picker
    v-model="value13"
    type="daterange"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    :default-time="['00:00:00', '23:59:59']">
  </el-date-picker>
</div>

Attributes

¶Picker Options

¶Shortcuts