✨ [feature] add characteristic of onchange and showFooter

Author: lanjingling0510

README.md

@@ -267,11 +267,13 @@ ReactDOM.render(<App />, document.getElementById('react-box'));
 | min  | Date | new Date(1970, 0, 1) | minimum date |
 | max | Date | new Date(2050, 0, 1) | maximum date |
 | showHeader | Boolean | true | whether to show the header |
+| showFooter | Boolean | true | whether to show the fotter |
 | customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace `showFormat`|
 | confirmText  | String | 完成 | customize the selection time button text |
 | cancelText | String | 取消 | customize the cancel button text |
 | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |
 | onCancel | Function | () => {} | the callback function after click button of cancel |
+| onChange | Function | () => {} | the callback function after date be changed |
 
 
 ## DateConfig

lib/DatePicker.js

@@ -15,11 +15,13 @@ type Props = {
     max: Object,
     customHeader?: React.Element<*>,
     showHeader: boolean,
+    showFooter: boolean,
     showCaption: boolean,
     dateConfig: Object | Array<string>,
     headerFormat: string,
     confirmText: string,
     cancelText: string,
+    onChange: Function,
     onSelect: Function,
     onCancel: Function,
 }
@@ -118,7 +120,9 @@ class DatePicker extends Component<void, Props, State> {
      * @return {undefined}
      */
     handleDateSelect(value) {
-        this.setState({ value });
+        this.setState({ value }, () => {
+            this.props.onChange(value);
+        });
     }
 
     /**
@@ -161,7 +165,7 @@ class DatePicker extends Component<void, Props, State> {
      * @return {Object} JSX对象
      */
     render() {
-        const { min, max, theme, dateConfig, confirmText, cancelText, headerFormat, showHeader, customHeader, showCaption } = this.props;
+        const { min, max, theme, dateConfig, confirmText, cancelText, headerFormat, showHeader, showFooter, customHeader, showCaption } = this.props;
         const value = this.state.value;
         const themeClassName =
             ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ?
@@ -197,14 +201,14 @@ class DatePicker extends Component<void, Props, State> {
                             onSelect={this.handleDateSelect} />
                     ))}
                 </div>
-                <div className="datepicker-navbar">
+                {showFooter && <div className="datepicker-navbar">
                     <a
                         className="datepicker-navbar-btn"
                         onClick={this.handleFinishBtnClick}>{confirmText}</a>
                     <a
                         className="datepicker-navbar-btn"
                         onClick={this.props.onCancel}>{cancelText}</a>
-                </div>
+                </div>}
             </div>
         );
     }

lib/dataSource.js

@@ -9,6 +9,7 @@ export const defaultProps = {
     value: new Date(),
     min: new Date(1970, 0, 1),
     max: new Date(2050, 0, 1),
+    showFooter: true,
     showHeader: true,
     showCaption: false,
     dateConfig: {
@@ -31,6 +32,7 @@ export const defaultProps = {
     headerFormat: 'YYYY/MM/DD',
     confirmText: '完成',
     cancelText: '取消',
+    onChange: () => {},
     onSelect: () => {},
     onCancel: () => {},
 };