Fix disabledDate of Calendar, close ant-design#6074

jawQ · May 23, 2017 · f414398 · f414398
1 parent b83529d
commit f414398
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
@@ -43,3 +43,4 @@ moment.locale('zh-cn');
 | locale       | set locale | object   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| callback when panel change | function(date: moment, mode: string) | - |
 | onSelect     | callback when select date  | function(date: moment）              | - |
+| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | 无           |
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
@@ -39,6 +39,7 @@ export interface CalendarProps {
   style?: React.CSSProperties;
   onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
   onSelect?: (date?: moment.Moment) => void;
+  disabledDate?: (current: moment.Moment) => boolean;
 }
 
 export interface CalendarState {

diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
@@ -45,3 +45,4 @@ moment.locale('zh-cn');
 | locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
 | onSelect     | 点击选择日期回调 | function(date: moment）              | 无 |
+| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
@@ -125,18 +125,6 @@
     color: #fff;
   }
 
-  &-disabled-cell &-value {
-    cursor: not-allowed;
-    color: @disabled-color;
-    background: @disabled-bg;
-    border-radius: 0;
-    width: auto;
-
-    &:hover {
-      background: @disabled-bg;
-    }
-  }
-
   &-disabled-cell-first-of-row &-value {
     border-top-left-radius: @border-radius-base;
     border-bottom-left-radius: @border-radius-base;
@@ -254,4 +242,25 @@
     left: auto;
     bottom: auto;
   }
+
+  &-disabled-cell &-date {
+    &,
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
+  &-disabled-cell:not(&-today) &-date {
+    &,
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &-disabled-cell &-value {
+    color: @disabled-color;
+    border-radius: 0;
+    width: auto;
+    cursor: not-allowed;
+  }
 }
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
@@ -42,7 +42,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
 | popupStyle   | to customize the style of the popup calendar   | object     | {}   |
 | size         | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | string   | -  |
 | locale       | localization configuration | object   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
-| disabledDate | to specify the date that cannot be selected | function | -           |
+| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | -           |
 | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
 | open | open state of picker | boolean | - |
 | onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |

diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
@@ -43,7 +43,7 @@ moment.locale('zh-cn');
 | popupStyle   | 格外的弹出日历样式   | object     | {}   |
 | size         | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string   | 无  |
 | locale       | 国际化配置 | object   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
-| disabledDate | 不可选择的日期 | function | 无           |
+| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无           |
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
 | open | 控制弹层是否展开 | boolean | - |
 | onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |