feat(DatePicker): Add disabledDate props.

uiwjs · Dec 15, 2017 · 80aec0c · 80aec0c
1 parent 7b8b765
commit 80aec0c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/docs/md/cn/calendar.md b/docs/md/cn/calendar.md
@@ -26,6 +26,10 @@ class Demo extends Component {
 
 <!--DemoStart--> 
 ```js
+function disabledDate(current) {
+  // 每个月 12 号禁止选中
+  return current.day === 12;
+}
 function getListData(value) {
   let listData;
   switch (value) {
@@ -78,9 +82,10 @@ class Demo extends Component {
   render() {
     return (
       <Calendar 
+        disabledDate={disabledDate}
         weekLabel={['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']}
         dateCellRender={dateCellRender}
-        />
+      />
     )
   }
 }

diff --git a/src/calendar/style/index.less b/src/calendar/style/index.less
@@ -26,4 +26,15 @@
     bottom: auto;
     text-align: left;
   }
+  .w-datepicker-disable {
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: #00000008;
+    }
+  }
 }
diff --git a/src/date-picker/style/datepicker.less b/src/date-picker/style/datepicker.less
@@ -125,16 +125,13 @@
   td&-sun, td&-sat {
     color: #929292;
   }
-  td&-sat {
-    box-shadow: inset 0 -1px 0 #eaeaea, inset 0 0 0 5px #fafafa;
-  }
   &-days &-disable {
-    background: #efefef;
+    background: #f9f9f9;
     cursor: not-allowed;
     color: #d3d3d3;
     box-shadow: inset -1px -1px 0 #eaeaea, inset 0 0 0 0 #fafafa;
     &:hover {
-      background: #efefef;
+      background: #f9f9f9;
     }
   }