fix(datepicker): fix datepicker disabled can clear

clair-design · Nov 22, 2018 · 12a8261 · 12a8261
1 parent 95287b0
commit 12a8261
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/src/components/datepicker/index.css b/src/components/datepicker/index.css
@@ -41,6 +41,10 @@
   top: 50%;
   transform: translateY(-50%);
   color: color(var(--text-color) l(65%));
+
+  &.disabled {
+    cursor: not-allowed;
+  }
 }
 
 .c-datepicker__hovericon {

diff --git a/src/components/datepicker/index.vue b/src/components/datepicker/index.vue
@@ -3,7 +3,7 @@
   @click="open"
 )
   .c-datepicker__icon.c-datepicker__hovericon(
-    v-if="!disabled && date != '' || daterange != ''"
+    v-if="!disabled && (date != '' || daterange != '')"
     @click="resetDate"
     :class="className"
   )
@@ -130,7 +130,10 @@ export default {
       return this
     },
     className () {
-      return this.size ? `is-size-${this.size}` : ''
+      return [
+        this.size ? `is-size-${this.size}` : '',
+        this.disabled ? 'disabled' : ''
+      ]
     },
     daterange () {
       if (this.type.indexOf('range') === -1) return []

diff --git a/src/components/timepicker/index.css b/src/components/timepicker/index.css
@@ -7,10 +7,9 @@
   display: inline-block;
   position: relative;
   border-radius: 0.2em;
-  width: 15em;
 
   & .c-input-wrap {
-    width: 100%;
+    width: 12em;
   }
 
   & input {
@@ -24,6 +23,10 @@
     top: 50%;
     transform: translateY(-50%);
     color: color(var(--text-color) l(65%));
+
+    &.disabled {
+      cursor: not-allowed;
+    }
   }
 
   & .c-timepicker__hovericon {
@@ -111,10 +114,11 @@
 }
 
 .c-timepicker__timerange {
-  width: 100%;
+  width: 15em;
   border: 1px solid color(var(--gray) l(85%));
   border-radius: 3px;
 
+
   & .c-timerange__wrapper {
     display: flex;
 

diff --git a/src/components/timepicker/index.md b/src/components/timepicker/index.md
@@ -175,8 +175,7 @@ layout: component
         type: 'timerange',
         readonly: false,
         disabled: false,
-        format: 'HH:mm',
-        time: ['10:12', '12:32'],
+        time: ['10:13:23', '12:32:56'],
       }
     },
     methods: {

diff --git a/src/components/timepicker/index.vue b/src/components/timepicker/index.vue
@@ -93,7 +93,10 @@ export default {
   },
   computed: {
     sizeClassName () {
-      return this.size ? `is-size-${this.size}` : ''
+      return [
+        this.size ? `is-size-${this.size}` : '',
+        this.disabled ? 'disabled' : ''
+      ]
     },
     hasHour () {
       return this.format.toLowerCase().indexOf('h') > -1