✨ [feature] map month number to month name(#26)

Author: lanjingling0510

examples/basic/index.js

@@ -25,6 +25,21 @@ import DatePicker from '../../lib/index';
         }
 
         render() {
+            const monthMap = {
+                '01': 'Jan',
+                '02': 'Feb',
+                '03': 'Mar',
+                '04': 'Apr',
+                '05': 'May',
+                '06': 'Jun',
+                '07': 'Jul',
+                '08': 'Aug',
+                '09': 'Sep',
+                '10': 'Oct',
+                '11': 'Nov',
+                '12': 'Dec',
+            };
+
             return (
                 <div className="App">
                     <p className="select-time ">
@@ -60,7 +75,7 @@ import DatePicker from '../../lib/index';
                     <DatePicker
                         value={this.state.time}
                         dateSteps={[1, 1, 5]}
-                        dateFormat={['hh', 'mm', 'ss']}
+                        dateFormat={['YYYY', ['MM', (month) => monthMap[month]], 'DD']}
                         theme={this.state.theme}
                         isOpen={this.state.isOpen}
                         onSelect={this.handleSelect}

lib/DatePickerItem.js

@@ -13,6 +13,8 @@ const MIDDLE_INDEX = Math.floor(DATE_LENGTH / 2);     // 日期数组中间值
 const MIDDLE_Y = - DATE_HEIGHT * MIDDLE_INDEX;       // translateY值
 
 const isUndefined = val => typeof val === 'undefined';
+const isArray = val => Object.prototype.toString.apply(val)  === '[object Array]';
+const isFunction = val => Object.prototype.toString.apply(val)  === '[object Function]';
 
 /**
  * 根据格式获取时间滑动的类别
@@ -44,7 +46,7 @@ type Props = {
     value: Object,
     min: Object,
     max: Object,
-    format: string,
+    format: string | Array<*>,
     step: number,
     onSelect: Function,
 }
@@ -73,7 +75,19 @@ class DatePickerItem extends Component<void, Props, State> {
         };
 
         // 设置时间选择器单元的类别
-        this.typeName = getTimeType(props.format);
+        if (isArray(props.format)) {
+            this.typeName = getTimeType(props.format[0]);
+            this.format = props.format[0];
+            if (isFunction(props.format[1])) {
+                this.formatTransform = props.format[1];
+            }
+        }
+
+        else {
+            this.format = props.format;
+            this.typeName = getTimeType(props.format);
+        }
+
         this.renderDatepickerItem = this.renderDatepickerItem.bind(this);
         this.handleContentTouch = this.handleContentTouch.bind(this);
         this.handleContentMouseDown = this.handleContentMouseDown.bind(this);
@@ -311,11 +325,16 @@ class DatePickerItem extends Component<void, Props, State> {
             (date < this.props.min || date > this.props.max) ?
             'disabled' : '';
 
+        let formatDate = TimeUtil.convertDate(date, this.format);
+        if (this.formatTransform) {
+            formatDate = this.formatTransform(formatDate);
+        }
+
         return (
             <li
                 key={index}
                 className={className}>
-                {TimeUtil.convertDate(date, this.props.format)}
+                {formatDate}
             </li>
         );
     }