Skip to content

Date 时间

名称

组件名称:ElPlusFormDate

被引用类型: date

TIP

被引用类型是指:当该组件作为子组件被 form 或者 table 组件引用时, formDesc 中对应的 type 类型。

基础用法

先看效果

代码
html
<div class="demo">
    <ElPlusFormDate class="item"  :desc="{ placeholder: '请选择 (size: large)', size: 'large' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (size: default)' }"  />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (size: small)', size: 'small' }" />
</div>
  <div class="demo">
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (周)', type:'week', format:'[Week] ww' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (月)', type:'month' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (年)', type:'year' }" />
  </div>
  <div>
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (禁用)', disabledDate:(date)=> (date > new Date()) }" />
  </div>
<div class="demo">
    <ElPlusFormDate class="item"  :desc="{ placeholder: '请选择 (size: large)', size: 'large' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (size: default)' }"  />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (size: small)', size: 'small' }" />
</div>
  <div class="demo">
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (周)', type:'week', format:'[Week] ww' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (月)', type:'month' }" />
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (年)', type:'year' }" />
  </div>
  <div>
    <ElPlusFormDate class="item" :desc="{ placeholder: '请选择 (禁用)', disabledDate:(date)=> (date > new Date()) }" />
  </div>

API 属性

这里只列举除官方组件以外的属性,官网属性参考 官网 DatePicker API