Fix disabled style, close #58

2 files changed, 24 insertions, 11 deletions

diff --git a/assets/index/Picker.less b/assets/index/Picker.less
index 1fb3787..610c2b0 100644
--- a/assets/index/Picker.less
+++ b/assets/index/Picker.less
@@ -14,5 +14,10 @@
     border: 1px solid #d9d9d9;
     border-radius: 4px;
     transition: border .2s cubic-bezier(0.645, 0.045, 0.355, 1), background .2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    &[disabled] {
+      color: #ccc;
+      background: #f7f7f7;
+      cursor: not-allowed;
+    }
   }
 }
diff --git a/examples/disabled.js b/examples/disabled.js
index 9d74002..a38ce16 100644
--- a/examples/disabled.js
+++ b/examples/disabled.js
@@ -48,14 +48,22 @@ function disabledSeconds(h, m) {
 }
 
 ReactDom.render(
-  <TimePicker
-    showSecond={showSecond}
-    defaultValue={now}
-    className="xxx"
-    onChange={onChange}
-    disabledHours={disabledHours}
-    disabledMinutes={disabledMinutes}
-    disabledSeconds={disabledSeconds}
-  />,
-  document.getElementById('__react-content')
-);
+  <div>
+    <h3>Disabled picker</h3>
+    <TimePicker
+      defaultValue={now}
+      disabled
+      onChange={onChange}
+    />
+    <h3>Disabled options</h3>
+    <TimePicker
+      showSecond={showSecond}
+      defaultValue={now}
+      className="xxx"
+      onChange={onChange}
+      disabledHours={disabledHours}
+      disabledMinutes={disabledMinutes}
+      disabledSeconds={disabledSeconds}
+    />
+  </div>
+, document.getElementById('__react-content'));