DatePicker: fix readonly, add disabled and editable, fixed #976 (#1000)

CHANGELOG.en-US.md

@@ -8,6 +8,10 @@
 - Fixed Switch style when nested in a Form, #967
 - Fixed Loading locks scroll of `body` in specific scenarios, #968
 - `span` of Col is no longer a required attribute, and its default value is `24` if omitted
+- DatePicker: add `disabled` and `editable` attribute.
+
+#### Breaking change
+- DatePicker: can't change value when `readonly` is true, setting `editable` to false if you want to disabled input. #976
 
 ### 1.0.0
 

CHANGELOG.zh-CN.md

@@ -1,13 +1,16 @@
 ## 更新日志
 
 ### 1.0.1
-
 *2016-XX-XX*
 
 - 修复 Pagination 错误地多次触发 `current-change` 事件的问题
 - 修复 Switch 在 Form 中的样式错误，#967
 - 修复 Loading 在某些情况下错误地锁定 `body` 滚动的问题，#968
 - Col 组件的 `span` 属性不再是必填属性，在省略的情况下其默认值为 `24`
+- DatePicker 新增 `disabled` 和 `editable`
+
+#### 非兼容性更新
+- DatePicker 的 `readonly` 为完全只读，新增的 `editable` 属性设置为 false 可禁止输入但是可通过弹框选择，#976
 
 ### 1.0.0
 

examples/docs/en-US/date-picker.md

@@ -264,7 +264,9 @@ Picking a date range is supported.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | if the picker is read only | boolean | — | false |
+| readonly | read only | boolean | — | false |
+| disabled | disabled | boolean | - | false |
+| editable | editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
 | format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |

examples/docs/en-US/datetime-picker.md

@@ -231,7 +231,9 @@ Select date and time in one picker.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | if the picker is read only | boolean | — | false |
+| readonly | read only | boolean | — | false |
+| disabled | disabled | boolean | - | false |
+| editable | editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
 | format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |

examples/docs/en-US/time-picker.md

@@ -141,7 +141,9 @@ Can pick an arbitrary time range.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | if the picker is read only | boolean | — | false |
+| readonly | read only | boolean | — | false |
+| disabled | disabled | boolean | - | false |
+| editable | editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |

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

@@ -274,7 +274,9 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | — | false |
+| readonly | 完全只读 | boolean | — | false |
+| disabled | 禁用 | boolean | - | false |
+| editable | 文本框可输入 | boolean | - | true |
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |

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

@@ -230,7 +230,9 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | — | false |
+| readonly | 完全只读 | boolean | — | false |
+| disabled | 禁用 | boolean | - | false |
+| editable | 文本框可输入 | boolean | - | true |
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |

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

@@ -140,7 +140,9 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| readonly | 只读 | boolean | — | false |
+| readonly | 完全只读 | boolean | — | false |
+| disabled | 禁用 | boolean | - | false |
+| editable | 文本框可输入 | boolean | - | true |
 | placeholder | 占位内容 | string | — | — |
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
 | value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |

packages/date-picker/src/picker.vue

@@ -10,7 +10,9 @@
 
     <input
       class="el-date-editor__editor"
-      :readonly="readonly"
+      :class="{ 'is-disabled': disabled }"
+      :readonly="!editable || readonly"
+      :disabled="disabled"
       type="text"
       :placeholder="placeholder"
       @focus="handleFocus"
@@ -199,6 +201,11 @@ export default {
     format: String,
     readonly: Boolean,
     placeholder: String,
+    disabled: Boolean,
+    editable: {
+      type: Boolean,
+      default: true
+    },
     align: {
       type: String,
       default: 'left'
@@ -218,6 +225,7 @@ export default {
 
   watch: {
     pickerVisible(val) {
+      if (this.readonly || this.disabled) return;
       val ? this.showPicker() : this.hidePicker();
     },
     value(val) {
@@ -233,10 +241,6 @@ export default {
       return this.type.indexOf('time') !== -1 ? 'el-icon-time' : 'el-icon-date';
     },
 
-    editable() {
-      return this.type.indexOf('range') === -1;
-    },
-
     selectionMode() {
       if (this.type === 'week') {
         return 'week';

packages/theme-default/src/date-picker/picker.css

@@ -21,19 +21,15 @@
       color: #666;
       font-size: 14px;
 
-      &::-webkit-input-placeholder {
+      @when disabled {
-        color: var(--input-placeholder-color);
+        background-color: var(--disabled-fill-base);
-        font-size: 14px;
+        border-color: var(--disabled-border-base);
-      }
+        color: var(--disabled-color-base);
+        cursor: not-allowed;
 
-      &::-moz-placeholder {
+        &::placeholder {
-        color: #bbb;
+          color: var(--input-disabled-placeholder-color);
-        font-size: 14px;
+        }
-      }
-
-      &:-ms-input-placeholder {
-        color: #bbb;
-        font-size: 14px;
       }
 
       &::placeholder {