Custom Month Header

examples/basic.tsx

@@ -64,6 +64,21 @@ class BasicDemo extends React.Component<{}, {
     </div>;
   }
 
+  renderMonthTitle = (date: Date) => {
+    const style = { color: 'rgba(25,124,217,1)', fontWeight: 600, fontSize: 14, lineHeight: 22 };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 40,
+      background: 'rgba(255,255,255,1) rgba(29,43,61,0.03)'}}>
+      <span style={{ ...style }}>{`${date.getFullYear()}年`}</span>
+      <span style={{ ...style }}>{`${date.getMonth()}月`}</span>
+    </div>;
+  }
+
+
   render() {
     return (
       <div style={{ marginTop: 10, marginBottom: 10, fontSize: 14 }}>
@@ -120,6 +135,7 @@ class BasicDemo extends React.Component<{}, {
           }}
           minDate={new Date(+new Date - 62 * 24 * 3600 * 1000)}
           maxDate={new Date(+new Date + 365 * 24 * 3600 * 1000)}
+          renderMonthTitle={this.renderMonthTitle}
         />
       </div>
     );

package.json

@@ -25,7 +25,7 @@
   "main": "./lib/index",
   "module": "./es/index",
   "config": {
-    "port": 8021
+    "port": 8899
   },
   "scripts": {
     "watch-tsc": "rc-tools run watch-tsc",
@@ -66,19 +66,19 @@
     "rmc-date-picker": "~6.0.0-alpha.10"
   },
   "devDependencies": {
-    "@types/jest": "^21.1.2",
-    "jest": "^21.2.1",
     "@types/enzyme": "^2.8.11",
-    "enzyme": "^3.1.0",
     "@types/enzyme-to-json": "^1.5.0",
-    "enzyme-to-json": "^3.1.2",
-    "enzyme-adapter-react-15": "^1.0.1",
-    "coveralls": "^3.0.0",
+    "@types/jest": "^21.1.2",
     "@types/react": "^16.0.10",
     "@types/react-dom": "^16.0.1",
+    "coveralls": "^3.0.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-15": "^1.0.1",
+    "enzyme-to-json": "^3.1.2",
+    "jest": "^21.2.1",
     "pre-commit": "1.x",
     "rc-test": "^6.0.8",
-    "rc-tools": "^7.0.0",
+    "rc-tools": "^9.5.3",
     "react": "^15.x",
     "react-dom": "^15.x",
     "react-test-renderer": "^15.x",

src/Calendar.tsx

@@ -191,7 +191,7 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
       type, locale = {} as Models.Locale, prefixCls, visible, pickTime, showShortcut, renderHeader,
       infiniteOpt, initalMonths, defaultDate, minDate, maxDate, getDateExtra, rowSize,
       defaultTimeValue, renderShortcut, enterDirection, timePickerPrefixCls, timePickerPickerPrefixCls,
-      style,
+      style, renderMonthTitle
     } = this.props;
     const {
       showTimePicker, timePickerTitle,
@@ -233,6 +233,7 @@ export default class Calendar extends React.PureComponent<PropsType, StateType>
               startDate={startDate}
               endDate={endDate}
               rowSize={rowSize}
+              renderMonthTitle={renderMonthTitle}
             />
             {
               showTimePicker &&

src/CalendarProps.ts

@@ -59,4 +59,6 @@ export default interface PropsType {
   defaultTimeValue?: Date;
   timePickerPrefixCls?: string;
   timePickerPickerPrefixCls?: string;
+  /** 自定义月的标题 */
+  renderMonthTitle?: (date: Date) => React.ReactNode;
 }

src/DatePicker.base.tsx

@@ -213,7 +213,7 @@ export default abstract class DatePicker extends React.Component<PropsType, Stat
         if (needUpdate && m.componentRef) {
           m.componentRef.updateWeeks();
           m.componentRef.forceUpdate();
-        };
+        }
       });
     if (unuseable.length > 0) {
       if (onSelectHasDisableDate) {

src/DatePicker.tsx

@@ -14,12 +14,14 @@ export default class DatePicker extends Component {
   genMonthComponent = (data?: Models.MonthData) => {
     if (!data) return;
 
+    const { renderMonthTitle } = this.props;
     return <SingleMonth key={data.title}
       locale={this.props.locale || {} as Models.Locale}
       monthData={data}
       rowSize={this.props.rowSize}
       onCellClick={this.onCellClick}
       getDateExtra={this.props.getDateExtra}
+      renderMonthTitle={ renderMonthTitle ? () =>  renderMonthTitle(data.firstDate) : undefined}
       ref={(dom) => {
         // FIXME?: sometimes will callback twice, and the second is null, when use preact.
         data.componentRef = dom || data.componentRef || undefined;

src/DatePickerProps.ts

@@ -30,4 +30,5 @@ export default interface PropsType {
   rowSize?: 'normal' | 'xl';
   /** 选择类型，default: range，one: 单日，range: 日期区间 */
   type?: 'one' | 'range';
+  renderMonthTitle?: (date: Date) => React.ReactNode;
 }

src/date/SingleMonth.tsx

@@ -7,6 +7,7 @@ export interface PropsType {
   rowSize?: 'normal' | 'xl';
   getDateExtra?: (date: Date) => Models.ExtraData;
   onCellClick?: (data: Models.CellData, monthData: Models.MonthData) => void;
+  renderMonthTitle?: (date: Date) => React.ReactNode;
 }
 export default class SingleMonth extends React.PureComponent<PropsType, {
   weekComponents: React.ReactNode[]
@@ -169,13 +170,14 @@ export default class SingleMonth extends React.PureComponent<PropsType, {
   }
 
   render() {
-    const { title } = this.props.monthData;
+    const { title, firstDate } = this.props.monthData;
     const { weekComponents } = this.state;
+    const { renderMonthTitle } = this.props;
 
     return (
       <div className="single-month" ref={this.setWarpper}>
         <div className="month-title">
-          {title}
+          {renderMonthTitle ? renderMonthTitle(firstDate) : title}
         </div>
         <div className="date">
           {weekComponents}