From b6d6b5e2f72e95f78bdba370d6426be8e5ab054f Mon Sep 17 00:00:00 2001
From: rainie <chenyutian0510@gmail.com>
Date: Sat, 12 May 2018 10:57:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=20[feature]=20map=20month=20number?=
 =?UTF-8?q?=20to=20month=20name(https://github.com/lanjingling0510/react-m?=
 =?UTF-8?q?obile-datepicker/issues/26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/basic/index.js | 17 ++++++++++++++++-
 lib/DatePickerItem.js   | 25 ++++++++++++++++++++++---
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/examples/basic/index.js b/examples/basic/index.js
index 13c1620..a76c9a0 100644
--- a/examples/basic/index.js
+++ b/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}
diff --git a/lib/DatePickerItem.js b/lib/DatePickerItem.js
index 8786eed..372a35c 100644
--- a/lib/DatePickerItem.js
+++ b/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>
         );
     }