Expose renderDate function for DatePicker (#7710)

* Expose renderDate function for Calendar dates

* Use the original prop name

components/date-picker/RangePicker.tsx

@@ -179,6 +179,7 @@ export default class RangePicker extends React.Component<any, any> {
       disabledDate, disabledTime,
       showTime, showToday,
       ranges, onOk, locale, format,
+      dateRender,
     } = props;
     warning(!('onOK' in props), 'It should be `RangePicker[onOk]`, instead of `onOK`!');
 
@@ -221,6 +222,7 @@ export default class RangePicker extends React.Component<any, any> {
         dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
         locale={locale.lang}
         onOk={onOk}
+        dateRender={dateRender}
         value={showDate}
         onValueChange={this.handleShowDateChange}
         hoverValue={hoverValue}

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -81,6 +81,54 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
+<div>
+  <span
+    class="ant-calendar-picker"
+  >
+    <div>
+      <input
+        class="ant-calendar-picker-input ant-input"
+        placeholder="请选择日期"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-picker-icon"
+      />
+    </div>
+  </span>
+  <span
+    class="ant-calendar-picker"
+  >
+    <span
+      class="ant-calendar-picker-input ant-input"
+    >
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="开始日期"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-range-picker-separator"
+      >
+         ~ 
+      </span>
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="结束日期"
+        readonly=""
+        value=""
+      />
+      <span
+        class="ant-calendar-picker-icon"
+      />
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
 <div>
   <span

components/date-picker/createPicker.tsx

@@ -115,6 +115,7 @@ export default function createPicker(TheCalendar): any {
           prefixCls={prefixCls}
           className={calendarClassName}
           onOk={props.onOk}
+          dateRender={props.dateRender}
           format={props.format}
           showToday={props.showToday}
           monthCellContentRender={props.monthCellContentRender}

components/date-picker/demo/date-render.md

@@ -0,0 +1,54 @@
+---
+order: 12
+title:
+  zh-CN: <Missing>
+  en-US: Customized Date Rendering
+---
+
+## zh-CN
+
+<Missing>
+
+## en-US
+
+We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.
+
+````jsx
+import { DatePicker } from 'antd';
+const { RangePicker } = DatePicker;
+
+ReactDOM.render(
+  <div>
+    <DatePicker
+      dateRender={(current) => {
+        const style = {};
+        if (current.date() === 1) {
+          style.border = '1px solid';
+          style.borderRadius = '50%';
+        }
+
+        return (
+          <div className="ant-calendar-date" style={style}>
+            {current.date()}
+          </div>
+        );
+      }}
+    />
+    <RangePicker
+      dateRender={(current) => {
+        const style = {};
+        if (current.date() === 1) {
+          style.border = '1px solid';
+          style.borderRadius = '50%';
+        }
+
+        return (
+          <div className="ant-calendar-date" style={style}>
+            {current.date()}
+          </div>
+        );
+      }}
+    />
+  </div>
+, mountNode);
+````

components/date-picker/index.en-US.md

@@ -49,6 +49,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | open | open state of picker | boolean | - |
 | onOpenChange   | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
 | placeholder  | placeholder of date input | string\|RangePicker[] | - |
+| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |
 
 ### DatePicker
 

components/date-picker/index.tsx

@@ -25,6 +25,7 @@ export interface PickerProps {
   onOpenChange?: (status: boolean) => void;
   disabledDate?: (current: moment.Moment) => boolean;
   renderExtraFooter?: () => React.ReactNode;
+  dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
 }
 
 export interface SinglePickerProps {

components/date-picker/index.zh-CN.md

@@ -50,6 +50,7 @@ moment.locale('zh-cn');
 | open | 控制弹层是否展开 | boolean | - |
 | onOpenChange   | 弹出日历和关闭日历的回调 | function(status) | 无 |
 | placeholder  | 输入框提示文字 | string\|RangePicker[] | - |
+| dateRender | ... | function(currentDate: moment, today: moment) => React.ReactNode | - |
 
 ### DatePicker