From f414398fae93aca60902cd601ae84b1db6630b4d Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 23 May 2017 17:07:17 +0800 Subject: [PATCH] Fix disabledDate of Calendar, close #6074 --- components/calendar/index.en-US.md | 1 + components/calendar/index.tsx | 1 + components/calendar/index.zh-CN.md | 1 + components/calendar/style/index.less | 33 +++++++++++++++++---------- components/date-picker/index.en-US.md | 2 +- components/date-picker/index.zh-CN.md | 2 +- 6 files changed, 26 insertions(+), 14 deletions(-) diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index dc9fb8e7a3..2288847020 100644 --- 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 index 66909be9e5..b3a0d3c409 100644 --- 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 index 546a1cd000..7fbc659c79 100644 --- 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 index 7b458e26bd..649354be03 100644 --- 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 index ffa9e247d2..f2c9d7a4b2 100644 --- 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 index 6c2698fcb3..75f2a5847a 100644 --- 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) | 无 |