DatePicker: add 'disabledDate' option, fixed #253

Add changelog

CHANGELOG.md

@@ -13,6 +13,7 @@
 - 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
 - 新增 Input textarea 类型的 rows, autosize 属性
 - 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
+- 新增 DatePicker 禁用日期功能 #253
 
 ### 1.0.0-rc.5
 

examples/docs/zh-cn/date-picker.md

@@ -2,7 +2,15 @@
   module.exports = {
     data() {
       return {
+        pickerOptions0: {
+          disabledDate(time) {
+            return time < Date.now();
+          }
+        },
         pickerOptions1: {
+          disabledDate(time) {
+            return time < Date.now();
+          },
           shortcuts: [{
             text: '今天',
             onClick(picker) {
@@ -51,7 +59,7 @@
             }
           }]
         },
-        value1: '2016-08-10',
+        value1: '',
         value2: '',
         value3: '',
         value4: '',
@@ -95,7 +103,7 @@
 
 以「日」为基本单位，基础的日期选择控件
 
-:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`
+:::demo 基本单位由`type`属性指定。快捷选项需配置`picker-options`对象中的`shortcuts`，禁用日期通过 `disabledDate` 设置，传入函数
 ```html
 <template>
   <div class="block">
@@ -103,7 +111,8 @@
     <el-date-picker
       v-model="value1"
       type="date"
-      placeholder="选择日期">
+      placeholder="选择日期"
+      :picker-options="pickerOptions0">
     </el-date-picker>
   </div>
   <div class="block">
@@ -121,6 +130,11 @@
   export default {
     data() {
       return {
+        pickerOptions0: {
+          disabledDate(time) {
+            return time < Date.now();
+          }
+        },
         pickerOptions1: {
           shortcuts: [{
             text: '今天',
@@ -262,8 +276,14 @@
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/datetime/week | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
-| align | 对齐方式 | left, center, right | left |
+| align | 对齐方式 | string | left, center, right | left |
+|picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+
+### Picker Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象<br>用法参考 demo 或下表 | Object[] | - | - |
+| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-cn/datetime-picker.md

@@ -119,6 +119,7 @@
       v-model="value2"
       type="datetime"
       placeholder="选择日期时间"
+      align="right"
       :picker-options="pickerOptions1">
     </el-date-picker>
   </div>
@@ -233,7 +234,14 @@
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/datetime/week | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
-| shortcuts | 快捷选项列表，配置信息<br>查看下表 | object[] | — | — |
+| align | 对齐方式 | string | left, center, right | left |
+|picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object |  — | {} |
+
+### Picker Options
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象<br>用法参考 demo 或下表 | Object[] | - | - |
+| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-cn/time-picker.md

@@ -143,7 +143,8 @@
 | readonly | 只读 | boolean | — | false |
 | placeholder | 占位内容 | string | — | — |
 | format | 时间格式化 | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
-| picker-options | 当前时间日期选择器特有的选项，参考下表 | object | — | {} |
+| align | 对齐方式 | string | left, center, right | left |
+| picker-options | 当前时间日期选择器特有的选项<br>参考下表 | object | — | {} |
 
 ### Time Select Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/date-picker/src/panel/date-range.vue

@@ -85,6 +85,7 @@
               :min-date="minDate"
               :max-date="maxDate"
               :range-state="rangeState"
+              :disabled-date="disabledDate"
               @changerange="handleChangeRange"
               @pick="handleRangePick">
             </date-table>
@@ -109,6 +110,7 @@
               :min-date="minDate"
               :max-date="maxDate"
               :range-state="rangeState"
+              :disabled-date="disabledDate"
               @changerange="handleChangeRange"
               @pick="handleRangePick"></date-table>
           </div>
@@ -128,7 +130,7 @@
   </transition>
 </template>
 
-<script type="text/ecmascript-6">
+<script type="text/babel">
   import { nextMonth, prevMonth, toDate, $t, formatDate, parseDate } from '../util';
 
   export default {
@@ -265,6 +267,7 @@
         shortcuts: '',
         value: '',
         visible: '',
+        disabledDate: '',
         leftTimePickerVisible: false,
         rightTimePickerVisible: false
       };

packages/date-picker/src/panel/date.vue

@@ -110,7 +110,7 @@
   </transition>
 </template>
 
-<script type="text/ecmascript-6">
+<script type="text/babel">
   import { $t, formatDate, parseDate } from '../util';
 
   export default {