Feature/multiple date format

README.md

@@ -1,9 +1,9 @@
 # rmc-date-picker
+
 ---
 
 React Mobile DatePicker Component (web and react-native)
 
-
 [![NPM version][npm-image]][npm-url]
 ![react-native](https://img.shields.io/badge/react--native-%3E%3D_0.30.0-green.svg)
 ![react](https://img.shields.io/badge/react-%3E%3D_15.2.0-green.svg)
@@ -51,9 +51,9 @@ npm start
 
 ## Example
 
-http://localhost:8000/examples/
+<http://localhost:8000/examples/>
 
-online example: http://react-component.github.io/m-date-picker/
+online example: <http://react-component.github.io/m-date-picker/>
 
 ## react-native
 
@@ -68,7 +68,6 @@ react-native run-ios
 
 [![rmc-date-picker](https://nodei.co/npm/rmc-date-picker.png)](https://npmjs.org/package/rmc-date-picker)
 
-
 ## API
 
 ### DatePicker props
@@ -94,6 +93,7 @@ react-native run-ios
 |onValueChange | fire when picker change | (vals: any, index: number) => void |  |
 |formatMonth | Customize display value of months | (month:number, current:Date) => React.Node | |
 |formatDay | Customize display value of days | (day:number, current:Date) => React.Node | |
+|format | Customize year、month、day sequence | string:[] | ['year','month','date'] |
 
 ### rmc-date-picker/lib/Popup props
 
@@ -115,7 +115,6 @@ react-native run-ios
 |dismissText | dismiss button text | string/React.ReactElement | 'Dismiss' |
 |title | Popup title | string/React.ReactElement | '' |
 
-
 ## Test Case
 
 ```

examples/popup.tsx

@@ -50,6 +50,7 @@ class Demo extends React.Component<any, any> {
         defaultDate={now}
         mode={props.mode}
         locale={props.locale}
+        format={['month', 'day', 'year']}
       />
     );
     return (<div style={{ margin: '10px 30px' }}>

src/DatePicker.tsx

@@ -62,16 +62,24 @@ class DatePicker extends React.Component<IDatePickerProps, any> {
     const { mode } = props;
     let newValue = cloneDate(this.getDate());
     if (mode === DATETIME || mode === DATE || mode === YEAR || mode === MONTH) {
-      switch (index) {
+      let type = index;
+      const formatArray = this.getFormatArray();
+      if ( formatArray.length >= 1 && (index + 1 <= formatArray.length)) {
+        type = formatArray[index];
+      }
+      switch (type) {
         case 0:
+        case 'year':
           newValue.setFullYear(value);
           break;
         case 1:
+        case 'month':
           // Note: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth
           // e.g. from 2017-03-31 to 2017-02-28
           setMonth(newValue, value);
           break;
         case 2:
+        case 'day':
           newValue.setDate(value);
           break;
         case 3:
@@ -260,7 +268,15 @@ class DatePicker extends React.Component<IDatePickerProps, any> {
     }
     const monthCol = { key: 'month', props: { children: months } };
     if (mode === MONTH) {
-      return [yearCol, monthCol];
+      const formatArray = this.getFormatArray();
+      const dateSequence = formatArray.map((item) => {
+        if (item === 'year') {
+          return yearCol;
+        } else if (item === 'month') {
+          return monthCol;
+        }
+      });
+      return dateSequence;
     }
 
     const days: any[] = [];
@@ -280,11 +296,17 @@ class DatePicker extends React.Component<IDatePickerProps, any> {
         label,
       });
     }
-    return [
-      yearCol,
-      monthCol,
-      { key: 'day', props: { children: days } },
-    ];
+    const formatArray = this.getFormatArray();
+    const dateSequence = formatArray.map((item) => {
+      if (item === 'year') {
+        return yearCol;
+      } else if (item === 'month') {
+        return monthCol;
+      } else if (item === 'day') {
+        return { key: 'day', props: { children: days } };
+      }
+    });
+    return dateSequence;
   }
 
   getDisplayHour(rawHour) {
@@ -422,24 +444,23 @@ class DatePicker extends React.Component<IDatePickerProps, any> {
     const date = this.getDate();
     let cols: any[] = [];
     let value: any[] = [];
-
     if (mode === YEAR) {
       return {
         cols: this.getDateData(),
-        value: [date.getFullYear() + ''],
+        value: this.formatValue(),
       };
     }
 
     if (mode === MONTH) {
       return {
         cols: this.getDateData(),
-        value: [date.getFullYear() + '', date.getMonth() + ''],
+        value: this.formatValue(),
       };
     }
 
     if (mode === DATETIME || mode === DATE) {
       cols = this.getDateData();
-      value = [date.getFullYear() + '', date.getMonth() + '', date.getDate() + ''];
+      value = this.formatValue();
     }
 
     if (mode === DATETIME || mode === TIME) {
@@ -460,6 +481,38 @@ class DatePicker extends React.Component<IDatePickerProps, any> {
     };
   }
 
+  getFormatArray = () => {
+    const props = this.props;
+    const { mode, format = [] } = props;
+    let formatArray = format;
+    if (mode === DATETIME || mode === DATE) {
+      formatArray = formatArray.length === 3 ? formatArray : ['year', 'month', 'day'];
+    } else if (mode === MONTH) {
+      formatArray = formatArray.length === 2 ? formatArray : ['year', 'month'];
+      formatArray = formatArray.filter((item) => {
+        return item !== 'day';
+      });
+    } else if (mode === YEAR) {
+      formatArray = ['year'];
+    }
+    return formatArray;
+  }
+
+  formatValue = () => {
+    const formatArray = this.getFormatArray();
+    const date = this.getDate();
+    const values = formatArray.map((item) => {
+      if (item === 'year') {
+        return date.getFullYear() + '';
+      } else if (item === 'month') {
+        return date.getMonth() + '';
+      } else if (item === 'day') {
+        return date.getDate() + '';
+      }
+    });
+    return values;
+  }
+
   render() {
     const { value, cols } = this.getValueCols();
     const {

src/IDatePickerProps.tsx

@@ -25,6 +25,7 @@ interface IDatePickerProps {
   pickerPrefixCls?: string;
   className?: string;
   use12Hours?: boolean;
+  format?: string[];
 }
 
 export default IDatePickerProps;