DatePicker: fix readonly, add disabled and editable, fixed ElemeFE#976

QingWei-Li · Nov 11, 2016 · a14a1ad · a14a1ad
1 parent b215f71
commit a14a1ad
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 24 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,12 @@
 ## 更新日志
 
+### 1.0.1
+*2016-11-x*
+- 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
 
 *2016-11-9*
@@ -8,6 +15,7 @@
 - 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
 - 新增 Loading 自定义加载文案的功能，并优化了视觉表现
 - 修复 Input blur 事件的参数不是 event 对象的问题
+- `window.ELEMENT.locale.use` 改成 `window.ELEMENT.locale`
 
 ### 1.0.0-rc.9
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,13 @@
 ## 更新日志
 
+### 1.0.1
+
+*2016-11-x*
+- DatePicker 新增 `disabled` 和 `editable`
+
+#### 非兼容性更新
+- DatePicker 的 `readonly` 为完全只读，新增的 `editable` 属性设置为 false 可禁止输入但是可通过弹框选择，#976
+
 ### 1.0.0
 
 *2016-11-9*

diff --git a/examples/docs/en-US/date-picker.md b/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 |

diff --git a/examples/docs/en-US/datetime-picker.md b/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 |

diff --git a/examples/docs/en-US/time-picker.md b/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 |

diff --git a/examples/docs/zh-CN/date-picker.md b/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 |

diff --git a/examples/docs/zh-CN/datetime-picker.md b/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 |

diff --git a/examples/docs/zh-CN/time-picker.md b/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 | - | - |

diff --git a/packages/date-picker/src/picker.vue b/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';

diff --git a/packages/theme-default/src/date-picker/picker.css b/packages/theme-default/src/date-picker/picker.css
@@ -21,19 +21,15 @@
       color: #666;
       font-size: 14px;
 
-      &::-webkit-input-placeholder {
-        color: var(--input-placeholder-color);
-        font-size: 14px;
-      }
-
-      &::-moz-placeholder {
-        color: #bbb;
-        font-size: 14px;
-      }
-
-      &:-ms-input-placeholder {
-        color: #bbb;
-        font-size: 14px;
+      @when disabled {
+        background-color: var(--disabled-fill-base);
+        border-color: var(--disabled-border-base);
+        color: var(--disabled-color-base);
+        cursor: not-allowed;
+
+        &::placeholder {
+          color: var(--input-disabled-placeholder-color);
+        }
       }
 
       &::placeholder {