react-mobile-datepicker - npm Package Compare versions

Comparing version 3.0.5 to 3.0.6

CHANGELOG.md

@@ -0,1 +1,8 @@
+[3.0.6](../../releases/tag/3.0.6)     2017-07-08 20:21:30
+---------------------------------------------------------
+
+- [1d847d8](../../commit/1d847d8) 📚  [document] edit readme document.
+- [d2c3372](../../commit/d2c3372) ✨  [feature] Add characteristics of automatic configuration Year, Month, Day, Hour, Minute, Second.
+
+
 [3.0.5](../../releases/tag/3.0.5)     2017-07-03 20:47:51
@@ -2,0 +9,0 @@ ---------------------------------------------------------

dist/react-mobile-datepicker.js

@@ -79,3 +79,3 @@ (function (global, factory) {
     throwIfInvalidDate(now);
-    var date = new Date(now.getFullYear() + index, now.getMonth(), now.getDate());
+    var date = new Date(now.getFullYear() + index, now.getMonth(), now.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
     return date;
@@ -91,3 +91,3 @@ }
     var dayOfMonth = Math.min(now.getDate(), daysInMonth(year, month));
-    var date = new Date(year, month, dayOfMonth);
+    var date = new Date(year, month, dayOfMonth, now.getHours(), now.getMinutes(), now.getSeconds());
     return date;
@@ -100,6 +100,30 @@ }
     throwIfInvalidDate(now);
-    var date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + index);
+    var date = new Date(now.getTime() + index * 24 * 60 * 60 * 1000);
     return date;
 }
 
+function nextHour(now) {
+    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+    throwIfInvalidDate(now);
+    var date = new Date(now.getTime() + index * 60 * 60 * 1000);
+    return date;
+}
+
+function nextMinute(now) {
+    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+    throwIfInvalidDate(now);
+    var date = new Date(now.getTime() + index * 60 * 1000);
+    return date;
+}
+
+function nextSecond(now) {
+    var index = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
+
+    throwIfInvalidDate(now);
+    var date = new Date(now.getTime() + index * 1000);
+    return date;
+}
+
 var TimeUtil = Object.freeze({
@@ -109,3 +133,6 @@ convertDate: convertDate,
     nextMonth: nextMonth,
-    nextDate: nextDate
+    nextDate: nextDate,
+    nextHour: nextHour,
+    nextMinute: nextMinute,
+    nextSecond: nextSecond
 });
@@ -260,2 +287,28 @@
 /**
+ * 根据格式获取时间滑动的类别
+ * @param  {String} format 格式
+ * @return {string}        类别名称
+ */
+var getTimeType = function (format) {
+    var typeMap = {
+        Y: 'Year',
+        M: 'Month',
+        D: 'Date',
+        h: 'Hour',
+        m: 'Minute',
+        s: 'Second'
+    };
+
+    for (var key in typeMap) {
+        if (typeMap.hasOwnProperty(key)) {
+            if (~format.indexOf(key)) {
+                return typeMap[key];
+            }
+        }
+    }
+
+    throw new Error('时间格式必须包含 Y, M, D, h, m 或 s字母');
+};
+
+/**
  * Class Date组件类
@@ -283,2 +336,4 @@ * @extends Component
 
+        // 设置时间选择器单元的类别
+        _this.typeName = getTimeType(props.format);
         _this.renderDatepickerItem = _this.renderDatepickerItem.bind(_this);
@@ -339,4 +394,3 @@ _this.handleContentTouch = _this.handleContentTouch.bind(_this);
     DatePickerItem.prototype._iniDates = function _iniDates(date) {
-        var typeName = this.props.typeName;
-
+        var typeName = this.typeName;
         var dates = Array.apply(undefined, Array(DATE_LENGTH)).map(function (value, index) {
@@ -349,3 +403,3 @@ return TimeUtil['next' + typeName](date, index - MIDDLE_INDEX);
     DatePickerItem.prototype._updateDates = function _updateDates(direction) {
-        var typeName = this.props.typeName;
+        var typeName = this.typeName;
         var dates = this.state.dates;
@@ -576,3 +630,2 @@
     format: React.PropTypes.string,
-    typeName: React.PropTypes.string,
     onSelect: React.PropTypes.func
@@ -657,2 +710,4 @@ };
     DatePicker.prototype.render = function render() {
+        var _this2 = this;
+
         var _props = this.props;
@@ -665,2 +720,3 @@ var min = _props.min;
         var cancelText = _props.cancelText;
+        var showFormat = _props.showFormat;
 
@@ -677,3 +733,3 @@ var value = this.state.value;
                 { className: 'datepicker-header' },
-                convertDate(value, 'YYYY/MM/DD')
+                convertDate(value, showFormat)
             ),
@@ -683,23 +739,11 @@ React__default.createElement(
                 { className: 'datepicker-content' },
-                React__default.createElement(DatePickerItem, {
-                    value: value,
-                    min: min,
-                    max: max,
-                    typeName: 'Year',
-                    format: dateFormat[0],
-                    onSelect: this.handleDateSelect }),
-                React__default.createElement(DatePickerItem, {
-                    value: value,
-                    min: min,
-                    max: max,
-                    typeName: 'Month',
-                    format: dateFormat[1],
-                    onSelect: this.handleDateSelect }),
-                React__default.createElement(DatePickerItem, {
-                    value: value,
-                    min: min,
-                    max: max,
-                    typeName: 'Date',
-                    format: dateFormat[2],
-                    onSelect: this.handleDateSelect })
+                dateFormat.map(function (format, index) {
+                    return React__default.createElement(DatePickerItem, {
+                        key: index,
+                        value: value,
+                        min: min,
+                        max: max,
+                        format: format,
+                        onSelect: _this2.handleDateSelect });
+                })
             ),
@@ -736,2 +780,3 @@ React__default.createElement(
     dateFormat: React.PropTypes.array,
+    showFormat: React.PropTypes.string,
     confirmText: React.PropTypes.string,
@@ -847,2 +892,3 @@ cancelText: React.PropTypes.string,
     dateFormat: ['YYYY', 'M', 'D'],
+    showFormat: 'YYYY/MM/DD',
     confirmText: '完成',
@@ -849,0 +895,0 @@ cancelText: '取消',

dist/react-mobile-datepicker.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactMobileDatePicker=t(e.React,e.ReactDOM)}(this,function(e,t){"use strict";function n(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");return r.type="text/css",r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)),n.appendChild(r),t}function r(e){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function a(e,t){return new Date(e,t+1,0).getDate()}function o(e,t){var n=t,r={"M+":e.getMonth()+1,"D+":e.getDate(),"h+":e.getHours(),"m+":e.getMinutes(),"s+":e.getSeconds()};/(Y+)/.test(t)&&(n=n.replace(RegExp.$1,e.getFullYear().toString().substr(4-RegExp.$1.length)));for(var a in r)new RegExp("("+a+")").test(t)&&(n=n.replace(RegExp.$1,1===RegExp.$1.length?r[a]:("00"+r[a]).substr(r[a].toString().length)));return n}function i(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear()+t,e.getMonth(),e.getDate());return n}function d(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=e.getFullYear(),o=e.getMonth()+t,i=Math.min(e.getDate(),a(n,o)),d=new Date(n,o,i);return d}function c(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear(),e.getMonth(),e.getDate()+t);return n}function p(e,t){if(e===t)return!0;var n=Object.keys(e),r=Object.keys(t);return n.length===r.length&&n.every(function(n){return e.hasOwnProperty(n)&&e[n]===t[n]})}function s(e){e.prototype.shouldComponentUpdate=function(e,t){return s.shouldComponentUpdate(e,t,this.props,this.state)}}function l(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")}function u(e){var t=["-webkit-","-moz-","-ms-"],n={},r=/transform|transition/;for(var a in e)if(e.hasOwnProperty(a)){var o=e[a];if(r.test(a))for(var i=0;i<t.length;i++){var d=l(t[i]+a);n[d]=o.replace(r,t[i]+"$&")}n[a]=o}return n}function h(e,t){var n=u(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}function m(e){function t(e){e.target===e.currentTarget&&r.onCancel()}var n=e.isOpen,r=x(e,["isOpen"]);return k.createElement("div",{style:{display:n?"":"none"},onClick:t,className:"datepicker-modal"},k.createElement(Y,r))}function f(e){var t=e.isPopup,n=x(e,["isPopup"]);return t?k.createElement(_,n,k.createElement(m,null)):k.createElement(Y,n)}var k="default"in e?e.default:e;t="default"in t?t.default:t,n(".datepicker-modal {\n    position: fixed;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.6);\n    z-index: 999;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n\n.datepicker {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 1;\n    height: 266px;\n    font-size: 16px;\n    text-align: center;\n    font-family: arial,verdana,sans-serif;\n    box-sizing: content-box;\n    -webkit-font-smoothing: antialiased;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n\n.datepicker .datepicker-header {\n    padding: 0 .5em;\n    min-height: 2em;\n    line-height: 2em;\n    font-size: 1.125em;\n    display: none;\n}\n\n.datepicker .datepicker-navbar {\n    padding: 0 .5em .5em .5em;\n    overflow: hidden;\n}\n\n.datepicker .datepicker-navbar-btn {\n    height: 2.5em;\n    line-height: 2.5em;\n    float: right;\n    padding: 0 1em;\n    cursor: pointer;\n}\n\n.datepicker .datepicker-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    padding: .5em .25em;\n}\n\n.datepicker .datepicker-col-1 {\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n    margin: 0 .25em;\n}\n\n.datepicker .datepicker-viewport {\n    height: 200px;\n    position: relative;\n    overflow: hidden\n}\n\n.datepicker .datepicker-viewport::after {\n    content: '';\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n}\n\n.datepicker .datepicker-wheel {\n    position: absolute;\n    height: 40px;\n    top: 50%;\n    margin-top: -20px;\n    width: 100%;\n}\n\n.datepicker .datepicker-scroll {\n    list-style-type: none\n}\n\n.datepicker .datepicker-scroll>li {\n    height: 40px;\n    line-height: 40px;\n    font-size: 1.375em;\n    cursor: pointer;\n}\n\n.datepicker {\n\n    /* default */\n\n    /* dark */\n\n    /* ios */\n\n\n    /* android */\n\n    /* android-dark */\n}\n\n.datepicker.default {\n    background-color: #f7f7f7;\n}\n\n.datepicker.default .datepicker-wheel {\n    border-top: 1px solid #4eccc4;\n    border-bottom: 1px solid #4eccc4;\n}\n\n.datepicker.default .datepicker-scroll li {\n    color: rgb(59, 59, 59);\n}\n\n.datepicker.default .datepicker-scroll li.disabled {\n    color: rgb(191, 191, 191);\n}\n\n.datepicker.default .datepicker-navbar-btn {\n    color: #4eccc4;\n}\n\n.datepicker.dark {\n    background-color: #263238;\n}\n\n.datepicker.dark .datepicker-wheel {\n    border-top: 1px solid #50ccc4;\n    border-bottom: 1px solid #50ccc4;\n}\n\n.datepicker.dark .datepicker-scroll li {\n    color: rgb(201, 203, 204);\n}\n\n.datepicker.dark .datepicker-scroll li.disabled {\n    color: rgb(87, 96, 100);\n}\n\n.datepicker.dark .datepicker-navbar-btn {\n    color: #50ccc4;\n}\n\n.datepicker.ios {\n    background-color: #f7f7f7;\n}\n\n.datepicker.ios .datepicker-col-1 {\n    margin: 0;\n}\n\n.datepicker.ios .datepicker-viewport {}\n\n.datepicker.ios .datepicker-viewport::after {\n    background: -webkit-linear-gradient(#f7f7f7,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f7f7f7);\n    background: linear-gradient(#f7f7f7,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f7f7f7);\n}\n\n.datepicker.ios .datepicker-wheel {\n    border-top: 1px solid #dbdbdb;\n    border-bottom: 1px solid #dbdbdb;\n}\n\n.datepicker.ios .datepicker-scroll li {\n    color: rgb(59, 59, 59);\n}\n\n.datepicker.ios .datepicker-scroll li.disabled {\n    color: rgb(191, 191, 191);\n}\n\n.datepicker.ios .datepicker-navbar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    padding: 0;\n    border-bottom: 1px solid #acacac;\n}\n\n.datepicker.ios .datepicker-navbar-btn {\n    color: #007aff;\n}\n\n.datepicker.ios .datepicker-navbar-btn:nth-child(2) {\n    float: left;\n}\n\n.datepicker.ios .datepicker-content {\n    padding-top: 48px;\n}\n\n.datepicker.android, .datepicker.android-dark {\n    height: 294px;\n    background-color: #f5f5f5;\n}\n\n.datepicker.android .datepicker-header, .datepicker.android-dark .datepicker-header {\n    color: #31b6e7;\n    border-bottom: 2px solid #31b6e7;\n    display: block;\n}\n\n.datepicker.android .datepicker-col-1, .datepicker.android-dark .datepicker-col-1 {\n    margin: 0 .625em;\n}\n\n.datepicker.android .datepicker-viewport, .datepicker.android-dark .datepicker-viewport {}\n\n.datepicker.android .datepicker-viewport::after, .datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-linear-gradient(#f5f5f5,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f5f5f5);\n    background-image: linear-gradient(#f5f5f5,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f5f5f5);\n}\n\n.datepicker.android .datepicker-wheel, .datepicker.android-dark .datepicker-wheel {\n    border-top: 2px solid #31b6e7;\n    border-bottom: 2px solid #31b6e7;\n}\n\n.datepicker.android .datepicker-scroll li, .datepicker.android-dark .datepicker-scroll li {\n    font-size: 1.125em;\n    color: rgb(56, 56, 56);\n}\n\n.datepicker.android .datepicker-scroll li.disabled, .datepicker.android-dark .datepicker-scroll li.disabled {\n    color: rgb(188, 188, 188);\n}\n\n.datepicker.android .datepicker-navbar, .datepicker.android-dark .datepicker-navbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    border-top: 1px solid #d9d4d4;\n    padding: 0;\n}\n\n.datepicker.android .datepicker-navbar-btn, .datepicker.android-dark .datepicker-navbar-btn {\n    padding: 0;\n    color: #000;\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n}\n\n.datepicker.android .datepicker-navbar-btn:nth-child(2), .datepicker.android-dark .datepicker-navbar-btn:nth-child(2) {\n    border-left: 1px solid #d9d4d4;\n}\n\n.datepicker.android-dark {\n    background-color: #292829;\n}\n\n.datepicker.android-dark .datepicker-viewport {}\n\n.datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-linear-gradient(#282828,rgba(40,40,40,0)52%,rgba(40,40,40,0)48%,#282828);\n    background-image: linear-gradient(#282828,rgba(40,40,40,0)52%,rgba(40,40,40,0)48%,#282828);\n}\n\n.datepicker.android-dark .datepicker-scroll li {\n    color: rgb(199, 199, 199);\n}\n\n.datepicker.android-dark .datepicker-scroll li.disabled {\n    color: rgb(88, 88, 88);\n}\n\n.datepicker.android-dark .datepicker-navbar {\n    border-color: #424542;\n}\n\n.datepicker.android-dark .datepicker-navbar-btn {\n    color: #fff;\n}\n\n.datepicker.android-dark .datepicker-navbar-btn:nth-child(2) {\n    border-color: #424542;\n}\n",void 0);var b=Object.freeze({convertDate:o,nextYear:i,nextMonth:d,nextDate:c});s.shouldComponentUpdate=function(e,t,n,r){return!p(n,e)||!p(r,t)};var g=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},y=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},x=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},T=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},w=40,C=10,D=Math.floor(C/2),P=-w*D,E=function(e){return"undefined"==typeof e},M=function(e){function t(n){g(this,t);var r=T(this,e.call(this,n));return r.animating=!1,r.touchY=0,r.translateY=0,r.currentIndex=D,r.state={translateY:P,marginTop:(r.currentIndex-D)*w},r.renderDatepickerItem=r.renderDatepickerItem.bind(r),r.handleContentTouch=r.handleContentTouch.bind(r),r.handleContentMouseDown=r.handleContentMouseDown.bind(r),r.handleContentMouseMove=r.handleContentMouseMove.bind(r),r.handleContentMouseUp=r.handleContentMouseUp.bind(r),r}return y(t,e),t.prototype.componentWillMount=function(){this._iniDates(this.props.value)},t.prototype.componentDidMount=function(){var e=this.viewport;e.addEventListener("touchstart",this.handleContentTouch,!1),e.addEventListener("touchmove",this.handleContentTouch,!1),e.addEventListener("touchend",this.handleContentTouch,!1),e.addEventListener("mousedown",this.handleContentMouseDown,!1)},t.prototype.componentWillReceiveProps=function(e){e.value.getTime()!==this.props.value.getTime()&&(this._iniDates(e.value),this.currentIndex=D,this.setState({translateY:P,marginTop:(this.currentIndex-D)*w}))},t.prototype.shouldComponentUpdate=function(e,t){return e.value.getTime()!==this.props.value.getTime()||!p(t,this.state)},t.prototype.componentWillUnmount=function(){var e=this.viewport;e.removeEventListener("touchstart",this.handleContentTouch,!1),e.removeEventListener("touchmove",this.handleContentTouch,!1),e.removeEventListener("touchend",this.handleContentTouch,!1),e.removeEventListener("mousedown",this.handleContentMouseDown,!1)},t.prototype._iniDates=function(e){var t=this.props.typeName,n=Array.apply(void 0,Array(C)).map(function(n,r){return b["next"+t](e,r-D)});this.setState({dates:n})},t.prototype._updateDates=function(e){var t=this.props.typeName,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(n.slice(1),[b["next"+t](n[n.length-1],1)]),marginTop:(this.currentIndex-D)*w})):(this.currentIndex--,this.setState({dates:[b["next"+t](n[0],-1)].concat(n.slice(0,n.length-1)),marginTop:(this.currentIndex-D)*w}))},t.prototype._checkIsUpdateDates=function(e,t){return 1===e?this.currentIndex*w+w/2<-t:this.currentIndex*w-w/2>-t},t.prototype._clearTransition=function(e){h(e,{transition:""})},t.prototype._moveToNext=function(e){var t=this.state.dates[D],n=this.props,r=n.max,a=n.min;e===-1&&t.getTime()<a.getTime()?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&this._updateDates(-1),this._moveTo(this.refs.scroll,this.currentIndex)},t.prototype._moveTo=function(e,t){var n=this;this.animating=!0,h(e,{transition:"transform .2s ease-out"}),this.setState({translateY:-t*w}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[D]),n._clearTransition(n.refs.scroll)},200)},t.prototype.handleStart=function(e){this.touchY=E(e.targetTouches)||E(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY},t.prototype.handleMove=function(e){var t=E(e.targetTouches)||E(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,n=t-this.touchY,r=this.translateY+n,a=n>0?-1:1,o=this.state.dates[D],i=this.props,d=i.max,c=i.min;o.getTime()<c.getTime()||o.getTime()>d.getTime()||(this._checkIsUpdateDates(a,r)&&this._updateDates(a),this.setState({translateY:r}))},t.prototype.handleEnd=function(e){var t=e.pageY||e.changedTouches[0].pageY,n=t-this.touchY,r=n>0?-1:1;this._moveToNext(r)},t.prototype.handleContentTouch=function(e){e.preventDefault(),this.animating||("touchstart"===e.type?this.handleStart(e):"touchmove"===e.type?this.handleMove(e):"touchend"===e.type&&this.handleEnd(e))},t.prototype.handleContentMouseDown=function(e){this.animating||(this.handleStart(e),document.addEventListener("mousemove",this.handleContentMouseMove),document.addEventListener("mouseup",this.handleContentMouseUp))},t.prototype.handleContentMouseMove=function(e){this.animating||this.handleMove(e)},t.prototype.handleContentMouseUp=function(e){this.animating||(this.handleEnd(e),document.removeEventListener("mousemove",this.handleContentMouseMove),document.removeEventListener("mouseup",this.handleContentMouseUp))},t.prototype.renderDatepickerItem=function(e,t){var n=e<this.props.min||e>this.props.max?"disabled":"";return k.createElement("li",{key:t,className:n},o(e,this.props.format))},t.prototype.render=function(){var e=this,t=u({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return k.createElement("div",{className:"datepicker-col-1"},k.createElement("div",{ref:function(t){return e.viewport=t},className:"datepicker-viewport"},k.createElement("div",{className:"datepicker-wheel"},k.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:t},this.state.dates.map(this.renderDatepickerItem)))))},t}(e.Component);M.propTypes={value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,format:e.PropTypes.string,typeName:e.PropTypes.string,onSelect:e.PropTypes.func};var Y=function(e){function t(n){g(this,t);var r=T(this,e.call(this,n));return r.state={value:c(r.props.value)},r.handleFinishBtnClick=r.handleFinishBtnClick.bind(r),r.handleDateSelect=r.handleDateSelect.bind(r),r}return y(t,e),t.prototype.componentWillReceiveProps=function(e){var t=c(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})},t.prototype.shouldComponentUpdate=function(e,t){var n=c(t.value);return n.getTime()!==this.state.value.getTime()||s.shouldComponentUpdate(e,t,this.props,this.state)},t.prototype.handleFinishBtnClick=function(){this.props.onSelect(this.state.value)},t.prototype.handleDateSelect=function(e){this.setState({value:e})},t.prototype.render=function(){var e=this.props,t=e.min,n=e.max,r=e.theme,a=e.dateFormat,i=e.confirmText,d=e.cancelText,c=this.state.value,p=["default","dark","ios","android","android-dark"].indexOf(r)===-1?"default":r;return k.createElement("div",{className:"datepicker "+p},k.createElement("div",{className:"datepicker-header"},o(c,"YYYY/MM/DD")),k.createElement("div",{className:"datepicker-content"},k.createElement(M,{value:c,min:t,max:n,typeName:"Year",format:a[0],onSelect:this.handleDateSelect}),k.createElement(M,{value:c,min:t,max:n,typeName:"Month",format:a[1],onSelect:this.handleDateSelect}),k.createElement(M,{value:c,min:t,max:n,typeName:"Date",format:a[2],onSelect:this.handleDateSelect})),k.createElement("div",{className:"datepicker-navbar"},k.createElement("a",{className:"datepicker-navbar-btn",onClick:this.handleFinishBtnClick},i),k.createElement("a",{className:"datepicker-navbar-btn",onClick:this.props.onCancel},d)))},t}(e.Component);Y.propTypes={theme:e.PropTypes.string,value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,dateFormat:e.PropTypes.array,confirmText:e.PropTypes.string,cancelText:e.PropTypes.string,onSelect:e.PropTypes.func,onCancel:e.PropTypes.func};var S=t.unstable_renderSubtreeIntoContainer,_=function(e){function n(){return g(this,n),T(this,e.apply(this,arguments))}return y(n,e),n.prototype.componentDidMount=function(){this._div=document.createElement("div"),this._div.classList.add("Modal-Portal"),document.body.appendChild(this._div),this.renderPortal(this.props)},n.prototype.componentWillReceiveProps=function(e){this.renderPortal(e)},n.prototype.componentWillUnmount=function(){t.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)},n.prototype.renderPortal=function(e){var t=k.cloneElement(this.props.children,v({},e,{key:"portal"}),null);this.portal=S(this,t,this._div)},n.prototype.render=function(){return k.createElement("noscript",null)},n}(e.Component);return _.propTypes={children:e.PropTypes.node,isOpen:e.PropTypes.bool},_.defaultProps={isOpen:!1},f.propTypes={isPopup:e.PropTypes.bool,isOpen:e.PropTypes.bool,theme:e.PropTypes.string,value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,dateFormat:e.PropTypes.array,confirmText:e.PropTypes.string,cancelText:e.PropTypes.string,onSelect:e.PropTypes.func,onCancel:e.PropTypes.func},f.defaultProps={isPopup:!0,isOpen:!1,theme:"default",value:new Date,min:new Date(1970,0,1),max:new Date(2050,0,1),dateFormat:["YYYY","M","D"],confirmText:"完成",cancelText:"取消",onSelect:function(){},onCancel:function(){}},f});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactMobileDatePicker=t(e.React,e.ReactDOM)}(this,function(e,t){"use strict";function n(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");return r.type="text/css",r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)),n.appendChild(r),t}function r(e){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function o(e,t){return new Date(e,t+1,0).getDate()}function a(e,t){var n=t,r={"M+":e.getMonth()+1,"D+":e.getDate(),"h+":e.getHours(),"m+":e.getMinutes(),"s+":e.getSeconds()};/(Y+)/.test(t)&&(n=n.replace(RegExp.$1,e.getFullYear().toString().substr(4-RegExp.$1.length)));for(var o in r)new RegExp("("+o+")").test(t)&&(n=n.replace(RegExp.$1,1===RegExp.$1.length?r[o]:("00"+r[o]).substr(r[o].toString().length)));return n}function i(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getFullYear()+t,e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds());return n}function d(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=e.getFullYear(),a=e.getMonth()+t,i=Math.min(e.getDate(),o(n,a)),d=new Date(n,a,i,e.getHours(),e.getMinutes(),e.getSeconds());return d}function c(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getTime()+24*t*60*60*1e3);return n}function p(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getTime()+60*t*60*1e3);return n}function s(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getTime()+60*t*1e3);return n}function l(e){var t=arguments.length<=1||void 0===arguments[1]?0:arguments[1];r(e);var n=new Date(e.getTime()+1e3*t);return n}function u(e,t){if(e===t)return!0;var n=Object.keys(e),r=Object.keys(t);return n.length===r.length&&n.every(function(n){return e.hasOwnProperty(n)&&e[n]===t[n]})}function h(e){e.prototype.shouldComponentUpdate=function(e,t){return h.shouldComponentUpdate(e,t,this.props,this.state)}}function m(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")}function f(e){var t=["-webkit-","-moz-","-ms-"],n={},r=/transform|transition/;for(var o in e)if(e.hasOwnProperty(o)){var a=e[o];if(r.test(o))for(var i=0;i<t.length;i++){var d=m(t[i]+o);n[d]=a.replace(r,t[i]+"$&")}n[o]=a}return n}function k(e,t){var n=f(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}function b(e){function t(e){e.target===e.currentTarget&&r.onCancel()}var n=e.isOpen,r=C(e,["isOpen"]);return v.createElement("div",{style:{display:n?"":"none"},onClick:t,className:"datepicker-modal"},v.createElement(j,r))}function g(e){var t=e.isPopup,n=C(e,["isPopup"]);return t?v.createElement(I,n,v.createElement(b,null)):v.createElement(j,n)}var v="default"in e?e.default:e;t="default"in t?t.default:t,n(".datepicker-modal {\n    position: fixed;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0,0,0,.6);\n    z-index: 999;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n\n.datepicker {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 1;\n    height: 266px;\n    font-size: 16px;\n    text-align: center;\n    font-family: arial,verdana,sans-serif;\n    box-sizing: content-box;\n    -webkit-font-smoothing: antialiased;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n}\n\n.datepicker .datepicker-header {\n    padding: 0 .5em;\n    min-height: 2em;\n    line-height: 2em;\n    font-size: 1.125em;\n    display: none;\n}\n\n.datepicker .datepicker-navbar {\n    padding: 0 .5em .5em .5em;\n    overflow: hidden;\n}\n\n.datepicker .datepicker-navbar-btn {\n    height: 2.5em;\n    line-height: 2.5em;\n    float: right;\n    padding: 0 1em;\n    cursor: pointer;\n}\n\n.datepicker .datepicker-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    padding: .5em .25em;\n}\n\n.datepicker .datepicker-col-1 {\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n    margin: 0 .25em;\n}\n\n.datepicker .datepicker-viewport {\n    height: 200px;\n    position: relative;\n    overflow: hidden\n}\n\n.datepicker .datepicker-viewport::after {\n    content: '';\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n}\n\n.datepicker .datepicker-wheel {\n    position: absolute;\n    height: 40px;\n    top: 50%;\n    margin-top: -20px;\n    width: 100%;\n}\n\n.datepicker .datepicker-scroll {\n    list-style-type: none\n}\n\n.datepicker .datepicker-scroll>li {\n    height: 40px;\n    line-height: 40px;\n    font-size: 1.375em;\n    cursor: pointer;\n}\n\n.datepicker {\n\n    /* default */\n\n    /* dark */\n\n    /* ios */\n\n\n    /* android */\n\n    /* android-dark */\n}\n\n.datepicker.default {\n    background-color: #f7f7f7;\n}\n\n.datepicker.default .datepicker-wheel {\n    border-top: 1px solid #4eccc4;\n    border-bottom: 1px solid #4eccc4;\n}\n\n.datepicker.default .datepicker-scroll li {\n    color: rgb(59, 59, 59);\n}\n\n.datepicker.default .datepicker-scroll li.disabled {\n    color: rgb(191, 191, 191);\n}\n\n.datepicker.default .datepicker-navbar-btn {\n    color: #4eccc4;\n}\n\n.datepicker.dark {\n    background-color: #263238;\n}\n\n.datepicker.dark .datepicker-wheel {\n    border-top: 1px solid #50ccc4;\n    border-bottom: 1px solid #50ccc4;\n}\n\n.datepicker.dark .datepicker-scroll li {\n    color: rgb(201, 203, 204);\n}\n\n.datepicker.dark .datepicker-scroll li.disabled {\n    color: rgb(87, 96, 100);\n}\n\n.datepicker.dark .datepicker-navbar-btn {\n    color: #50ccc4;\n}\n\n.datepicker.ios {\n    background-color: #f7f7f7;\n}\n\n.datepicker.ios .datepicker-col-1 {\n    margin: 0;\n}\n\n.datepicker.ios .datepicker-viewport {}\n\n.datepicker.ios .datepicker-viewport::after {\n    background: -webkit-linear-gradient(#f7f7f7,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f7f7f7);\n    background: linear-gradient(#f7f7f7,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f7f7f7);\n}\n\n.datepicker.ios .datepicker-wheel {\n    border-top: 1px solid #dbdbdb;\n    border-bottom: 1px solid #dbdbdb;\n}\n\n.datepicker.ios .datepicker-scroll li {\n    color: rgb(59, 59, 59);\n}\n\n.datepicker.ios .datepicker-scroll li.disabled {\n    color: rgb(191, 191, 191);\n}\n\n.datepicker.ios .datepicker-navbar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    padding: 0;\n    border-bottom: 1px solid #acacac;\n}\n\n.datepicker.ios .datepicker-navbar-btn {\n    color: #007aff;\n}\n\n.datepicker.ios .datepicker-navbar-btn:nth-child(2) {\n    float: left;\n}\n\n.datepicker.ios .datepicker-content {\n    padding-top: 48px;\n}\n\n.datepicker.android, .datepicker.android-dark {\n    height: 294px;\n    background-color: #f5f5f5;\n}\n\n.datepicker.android .datepicker-header, .datepicker.android-dark .datepicker-header {\n    color: #31b6e7;\n    border-bottom: 2px solid #31b6e7;\n    display: block;\n}\n\n.datepicker.android .datepicker-col-1, .datepicker.android-dark .datepicker-col-1 {\n    margin: 0 .625em;\n}\n\n.datepicker.android .datepicker-viewport, .datepicker.android-dark .datepicker-viewport {}\n\n.datepicker.android .datepicker-viewport::after, .datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-linear-gradient(#f5f5f5,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f5f5f5);\n    background-image: linear-gradient(#f5f5f5,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f5f5f5);\n}\n\n.datepicker.android .datepicker-wheel, .datepicker.android-dark .datepicker-wheel {\n    border-top: 2px solid #31b6e7;\n    border-bottom: 2px solid #31b6e7;\n}\n\n.datepicker.android .datepicker-scroll li, .datepicker.android-dark .datepicker-scroll li {\n    font-size: 1.125em;\n    color: rgb(56, 56, 56);\n}\n\n.datepicker.android .datepicker-scroll li.disabled, .datepicker.android-dark .datepicker-scroll li.disabled {\n    color: rgb(188, 188, 188);\n}\n\n.datepicker.android .datepicker-navbar, .datepicker.android-dark .datepicker-navbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    border-top: 1px solid #d9d4d4;\n    padding: 0;\n}\n\n.datepicker.android .datepicker-navbar-btn, .datepicker.android-dark .datepicker-navbar-btn {\n    padding: 0;\n    color: #000;\n    -webkit-box-flex: 1;\n    -ms-flex: 1;\n    flex: 1;\n}\n\n.datepicker.android .datepicker-navbar-btn:nth-child(2), .datepicker.android-dark .datepicker-navbar-btn:nth-child(2) {\n    border-left: 1px solid #d9d4d4;\n}\n\n.datepicker.android-dark {\n    background-color: #292829;\n}\n\n.datepicker.android-dark .datepicker-viewport {}\n\n.datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-linear-gradient(#282828,rgba(40,40,40,0)52%,rgba(40,40,40,0)48%,#282828);\n    background-image: linear-gradient(#282828,rgba(40,40,40,0)52%,rgba(40,40,40,0)48%,#282828);\n}\n\n.datepicker.android-dark .datepicker-scroll li {\n    color: rgb(199, 199, 199);\n}\n\n.datepicker.android-dark .datepicker-scroll li.disabled {\n    color: rgb(88, 88, 88);\n}\n\n.datepicker.android-dark .datepicker-navbar {\n    border-color: #424542;\n}\n\n.datepicker.android-dark .datepicker-navbar-btn {\n    color: #fff;\n}\n\n.datepicker.android-dark .datepicker-navbar-btn:nth-child(2) {\n    border-color: #424542;\n}\n",void 0);var y=Object.freeze({convertDate:a,nextYear:i,nextMonth:d,nextDate:c,nextHour:p,nextMinute:s,nextSecond:l});h.shouldComponentUpdate=function(e,t,n,r){return!u(n,e)||!u(r,t)};var x=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},T=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},w=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},C=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},D=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},P=40,E=10,M=Math.floor(E/2),Y=-P*M,S=function(e){return"undefined"==typeof e},O=function(e){var t={Y:"Year",M:"Month",D:"Date",h:"Hour",m:"Minute",s:"Second"};for(var n in t)if(t.hasOwnProperty(n)&&~e.indexOf(n))return t[n];throw new Error("时间格式必须包含 Y, M, D, h, m 或 s字母")},_=function(e){function t(n){x(this,t);var r=D(this,e.call(this,n));return r.animating=!1,r.touchY=0,r.translateY=0,r.currentIndex=M,r.state={translateY:Y,marginTop:(r.currentIndex-M)*P},r.typeName=O(n.format),r.renderDatepickerItem=r.renderDatepickerItem.bind(r),r.handleContentTouch=r.handleContentTouch.bind(r),r.handleContentMouseDown=r.handleContentMouseDown.bind(r),r.handleContentMouseMove=r.handleContentMouseMove.bind(r),r.handleContentMouseUp=r.handleContentMouseUp.bind(r),r}return w(t,e),t.prototype.componentWillMount=function(){this._iniDates(this.props.value)},t.prototype.componentDidMount=function(){var e=this.viewport;e.addEventListener("touchstart",this.handleContentTouch,!1),e.addEventListener("touchmove",this.handleContentTouch,!1),e.addEventListener("touchend",this.handleContentTouch,!1),e.addEventListener("mousedown",this.handleContentMouseDown,!1)},t.prototype.componentWillReceiveProps=function(e){e.value.getTime()!==this.props.value.getTime()&&(this._iniDates(e.value),this.currentIndex=M,this.setState({translateY:Y,marginTop:(this.currentIndex-M)*P}))},t.prototype.shouldComponentUpdate=function(e,t){return e.value.getTime()!==this.props.value.getTime()||!u(t,this.state)},t.prototype.componentWillUnmount=function(){var e=this.viewport;e.removeEventListener("touchstart",this.handleContentTouch,!1),e.removeEventListener("touchmove",this.handleContentTouch,!1),e.removeEventListener("touchend",this.handleContentTouch,!1),e.removeEventListener("mousedown",this.handleContentMouseDown,!1)},t.prototype._iniDates=function(e){var t=this.typeName,n=Array.apply(void 0,Array(E)).map(function(n,r){return y["next"+t](e,r-M)});this.setState({dates:n})},t.prototype._updateDates=function(e){var t=this.typeName,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(n.slice(1),[y["next"+t](n[n.length-1],1)]),marginTop:(this.currentIndex-M)*P})):(this.currentIndex--,this.setState({dates:[y["next"+t](n[0],-1)].concat(n.slice(0,n.length-1)),marginTop:(this.currentIndex-M)*P}))},t.prototype._checkIsUpdateDates=function(e,t){return 1===e?this.currentIndex*P+P/2<-t:this.currentIndex*P-P/2>-t},t.prototype._clearTransition=function(e){k(e,{transition:""})},t.prototype._moveToNext=function(e){var t=this.state.dates[M],n=this.props,r=n.max,o=n.min;e===-1&&t.getTime()<o.getTime()?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&this._updateDates(-1),this._moveTo(this.refs.scroll,this.currentIndex)},t.prototype._moveTo=function(e,t){var n=this;this.animating=!0,k(e,{transition:"transform .2s ease-out"}),this.setState({translateY:-t*P}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[M]),n._clearTransition(n.refs.scroll)},200)},t.prototype.handleStart=function(e){this.touchY=S(e.targetTouches)||S(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY},t.prototype.handleMove=function(e){var t=S(e.targetTouches)||S(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,n=t-this.touchY,r=this.translateY+n,o=n>0?-1:1,a=this.state.dates[M],i=this.props,d=i.max,c=i.min;a.getTime()<c.getTime()||a.getTime()>d.getTime()||(this._checkIsUpdateDates(o,r)&&this._updateDates(o),this.setState({translateY:r}))},t.prototype.handleEnd=function(e){var t=e.pageY||e.changedTouches[0].pageY,n=t-this.touchY,r=n>0?-1:1;this._moveToNext(r)},t.prototype.handleContentTouch=function(e){e.preventDefault(),this.animating||("touchstart"===e.type?this.handleStart(e):"touchmove"===e.type?this.handleMove(e):"touchend"===e.type&&this.handleEnd(e))},t.prototype.handleContentMouseDown=function(e){this.animating||(this.handleStart(e),document.addEventListener("mousemove",this.handleContentMouseMove),document.addEventListener("mouseup",this.handleContentMouseUp))},t.prototype.handleContentMouseMove=function(e){this.animating||this.handleMove(e)},t.prototype.handleContentMouseUp=function(e){this.animating||(this.handleEnd(e),document.removeEventListener("mousemove",this.handleContentMouseMove),document.removeEventListener("mouseup",this.handleContentMouseUp))},t.prototype.renderDatepickerItem=function(e,t){var n=e<this.props.min||e>this.props.max?"disabled":"";return v.createElement("li",{key:t,className:n},a(e,this.props.format))},t.prototype.render=function(){var e=this,t=f({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return v.createElement("div",{className:"datepicker-col-1"},v.createElement("div",{ref:function(t){return e.viewport=t},className:"datepicker-viewport"},v.createElement("div",{className:"datepicker-wheel"},v.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:t},this.state.dates.map(this.renderDatepickerItem)))))},t}(e.Component);_.propTypes={value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,format:e.PropTypes.string,onSelect:e.PropTypes.func};var j=function(e){function t(n){x(this,t);var r=D(this,e.call(this,n));return r.state={value:c(r.props.value)},r.handleFinishBtnClick=r.handleFinishBtnClick.bind(r),r.handleDateSelect=r.handleDateSelect.bind(r),r}return w(t,e),t.prototype.componentWillReceiveProps=function(e){var t=c(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})},t.prototype.shouldComponentUpdate=function(e,t){var n=c(t.value);return n.getTime()!==this.state.value.getTime()||h.shouldComponentUpdate(e,t,this.props,this.state)},t.prototype.handleFinishBtnClick=function(){this.props.onSelect(this.state.value)},t.prototype.handleDateSelect=function(e){this.setState({value:e})},t.prototype.render=function(){var e=this,t=this.props,n=t.min,r=t.max,o=t.theme,i=t.dateFormat,d=t.confirmText,c=t.cancelText,p=t.showFormat,s=this.state.value,l=["default","dark","ios","android","android-dark"].indexOf(o)===-1?"default":o;return v.createElement("div",{className:"datepicker "+l},v.createElement("div",{className:"datepicker-header"},a(s,p)),v.createElement("div",{className:"datepicker-content"},i.map(function(t,o){return v.createElement(_,{key:o,value:s,min:n,max:r,format:t,onSelect:e.handleDateSelect})})),v.createElement("div",{className:"datepicker-navbar"},v.createElement("a",{className:"datepicker-navbar-btn",onClick:this.handleFinishBtnClick},d),v.createElement("a",{className:"datepicker-navbar-btn",onClick:this.props.onCancel},c)))},t}(e.Component);j.propTypes={theme:e.PropTypes.string,value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,dateFormat:e.PropTypes.array,showFormat:e.PropTypes.string,confirmText:e.PropTypes.string,cancelText:e.PropTypes.string,onSelect:e.PropTypes.func,onCancel:e.PropTypes.func};var N=t.unstable_renderSubtreeIntoContainer,I=function(e){function n(){return x(this,n),D(this,e.apply(this,arguments))}return w(n,e),n.prototype.componentDidMount=function(){this._div=document.createElement("div"),this._div.classList.add("Modal-Portal"),document.body.appendChild(this._div),this.renderPortal(this.props)},n.prototype.componentWillReceiveProps=function(e){this.renderPortal(e)},n.prototype.componentWillUnmount=function(){t.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)},n.prototype.renderPortal=function(e){var t=v.cloneElement(this.props.children,T({},e,{key:"portal"}),null);this.portal=N(this,t,this._div)},n.prototype.render=function(){return v.createElement("noscript",null)},n}(e.Component);return I.propTypes={children:e.PropTypes.node,isOpen:e.PropTypes.bool},I.defaultProps={isOpen:!1},g.propTypes={isPopup:e.PropTypes.bool,isOpen:e.PropTypes.bool,theme:e.PropTypes.string,value:e.PropTypes.object,min:e.PropTypes.object,max:e.PropTypes.object,dateFormat:e.PropTypes.array,confirmText:e.PropTypes.string,cancelText:e.PropTypes.string,onSelect:e.PropTypes.func,onCancel:e.PropTypes.func},g.defaultProps={isPopup:!0,isOpen:!1,theme:"default",value:new Date,min:new Date(1970,0,1),max:new Date(2050,0,1),dateFormat:["YYYY","M","D"],showFormat:"YYYY/MM/DD",confirmText:"完成",cancelText:"取消",onSelect:function(){},onCancel:function(){}},g});
 //# sourceMappingURL=react-mobile-datepicker.min.js.map

lib/DatePicker.js

@@ -68,3 +68,3 @@ /**
     render() {
-        const { min, max, theme, dateFormat, confirmText, cancelText } = this.props;
+        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat } = this.props;
         const value = this.state.value;
@@ -78,25 +78,13 @@ const themeClassName =
                 className={`datepicker ${themeClassName}`}>
-                <div className="datepicker-header">{convertDate(value, 'YYYY/MM/DD')}</div>
+                <div className="datepicker-header">{convertDate(value, showFormat)}</div>
                 <div className="datepicker-content">
-                    <DatePickerItem
-                        value={value}
-                        min={min}
-                        max={max}
-                        typeName="Year"
-                        format={dateFormat[0]}
-                        onSelect={this.handleDateSelect} />
-                    <DatePickerItem
-                        value={value}
-                        min={min}
-                        max={max}
-                        typeName="Month"
-                        format={dateFormat[1]}
-                        onSelect={this.handleDateSelect} />
-                    <DatePickerItem
-                        value={value}
-                        min={min}
-                        max={max}
-                        typeName="Date"
-                        format={dateFormat[2]}
-                        onSelect={this.handleDateSelect} />
+                    {dateFormat.map((format, index) => (
+                        <DatePickerItem
+                            key={index}
+                            value={value}
+                            min={min}
+                            max={max}
+                            format={format}
+                            onSelect={this.handleDateSelect} />
+                        ))}
                 </div>
@@ -122,2 +110,3 @@ <div className="datepicker-navbar">
     dateFormat: PropTypes.array,
+    showFormat: PropTypes.string,
     confirmText: PropTypes.string,
@@ -124,0 +113,0 @@ cancelText: PropTypes.string,

lib/DatePickerItem.js

@@ -18,2 +18,29 @@
 /**
+ * 根据格式获取时间滑动的类别
+ * @param  {String} format 格式
+ * @return {string}        类别名称
+ */
+const getTimeType = format => {
+    const typeMap = {
+        Y: 'Year',
+        M: 'Month',
+        D: 'Date',
+        h: 'Hour',
+        m: 'Minute',
+        s: 'Second',
+    };
+
+    for (const key in typeMap) {
+        if (typeMap.hasOwnProperty(key)) {
+            if (~format.indexOf(key)) {
+                return typeMap[key]
+            }
+        }
+    }
+
+    throw new Error('时间格式必须包含 Y, M, D, h, m 或 s字母');
+}
+
+
+/**
  * Class Date组件类
@@ -35,2 +62,4 @@ * @extends Component
 
+        // 设置时间选择器单元的类别
+        this.typeName = getTimeType(props.format);
         this.renderDatepickerItem = this.renderDatepickerItem.bind(this);
@@ -89,3 +118,3 @@ this.handleContentTouch = this.handleContentTouch.bind(this);
     _iniDates(date) {
-        const { typeName } = this.props;
+        const typeName = this.typeName;
         const dates = Array(...Array(DATE_LENGTH))
@@ -98,3 +127,3 @@ .map((value, index) =>
     _updateDates(direction) {
-        const { typeName } = this.props;
+        const typeName = this.typeName;
         const { dates } = this.state;
@@ -312,3 +341,2 @@ if (direction === 1) {
     format: PropTypes.string,
-    typeName: PropTypes.string,
     onSelect: PropTypes.func,
@@ -315,0 +343,0 @@ };

lib/index.js

@@ -59,2 +59,3 @@ import './index.css';
     dateFormat: ['YYYY', 'M', 'D'],
+    showFormat: 'YYYY/MM/DD',
     confirmText: '完成',
@@ -61,0 +62,0 @@ cancelText: '取消',

lib/time.js

@@ -5,3 +5,2 @@ /**
 
-
 function throwIfInvalidDate(date) {
@@ -32,11 +31,12 @@ if (Object.prototype.toString.call(date, null) !== '[object Date]') {
     if (/(Y+)/.test(format)) {
-        str = str.replace(RegExp.$1,
-                (date.getFullYear().toString()).substr(4 - RegExp.$1.length));
+        str = str.replace(RegExp.$1, date.getFullYear().toString().substr(4 - RegExp.$1.length));
     }
 
-    for (const k in o) { // eslint-disable-line
+    for (const k in o) {
+        // eslint-disable-line
         if (new RegExp(`(${k})`).test(format)) {
-            str = str.replace(RegExp.$1,
-                (RegExp.$1.length === 1) ?
-                o[k] : (`00${o[k]}`.substr((o[k].toString()).length)));
+            str = str.replace(
+                RegExp.$1,
+                RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(o[k].toString().length),
+            );
         }
@@ -55,3 +55,10 @@ }
     throwIfInvalidDate(now);
-    const date = new Date(now.getFullYear() + index, now.getMonth(), now.getDate());
+    const date = new Date(
+        now.getFullYear() + index,
+        now.getMonth(),
+        now.getDate(),
+        now.getHours(),
+        now.getMinutes(),
+        now.getSeconds(),
+    );
     return date;
@@ -65,3 +72,10 @@ }
     const dayOfMonth = Math.min(now.getDate(), daysInMonth(year, month));
-    const date = new Date(year, month, dayOfMonth);
+    const date = new Date(
+        year,
+        month,
+        dayOfMonth,
+        now.getHours(),
+        now.getMinutes(),
+        now.getSeconds(),
+    );
     return date;
@@ -72,4 +86,22 @@ }
     throwIfInvalidDate(now);
-    const date = new Date(now.getFullYear(), now.getMonth(), now.getDate() + index);
+    const date = new Date(now.getTime() + index * 24 * 60 * 60 * 1000);
     return date;
 }
+
+export function nextHour(now, index = 0) {
+    throwIfInvalidDate(now);
+    const date = new Date(now.getTime() + index * 60 * 60 * 1000);
+    return date;
+}
+
+export function nextMinute(now, index = 0) {
+    throwIfInvalidDate(now);
+    const date = new Date(now.getTime() + index * 60 * 1000);
+    return date;
+}
+
+export function nextSecond(now, index = 0) {
+    throwIfInvalidDate(now);
+    const date = new Date(now.getTime() + index * 1000);
+    return date;
+}

package.json

 {
   "name": "react-mobile-datepicker",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "一个移动端时间选择器react组件",
@@ -5,0 +5,0 @@ "main": "./dist/react-mobile-datepicker.js",

README.md

@@ -13,3 +13,4 @@ # react-mobile-datepicker
 
-## Screenshots
+## Theme
+
 ### default
@@ -40,2 +41,18 @@ <div style="padding:30px">
 
+## Custom date unit
+
+set dateFormat for `['YYYY', 'MM', 'DD', 'hh', 'mm']` to configure year, month, day, hour, minute.
+
+<div style="padding:30px">
+<img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/year-month-day-hour-minute.png" width="300" />
+</div>
+
+
+set dateFormat for `['hh', 'mm', 'ss']` to configure hour, minute and second.
+
+<div style="padding:30px">
+<img src="https://raw.githubusercontent.com/lanjingling0510/react-mobile-datepicker/master/.github/hour-minute-second.png" width="300" />
+</div>
+
+
 ## Getting Started
@@ -114,3 +131,4 @@
 | theme      | String      | default  | theme of datepicker, include 'default', 'dark', 'ios', 'android', 'android-dark' |
-| dateFormat | Array     | ['YYYY', 'M', 'D'] | according to year, month, day format specified display text. E.g ['YYYY年', 'MM月', 'DD日']|
+| dateFormat | Array     | ['YYYY', 'M', 'D'] | according to year, month, day, hour, minute, second format specified display text. E.g ['YYYY年', 'MM月', 'DD日']|
+|showFormat | String | 'YYYY/MM/DD' | customize the format of the display title |
 | value | Date | new Date() | date value |
@@ -117,0 +135,0 @@ | min  | Date | new Date(1970, 0, 1) | minimum date |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

553080

increased by7.23%

Number of package files

34

increased by6.25%

Lines of code

1837

increased by4.79%

Number of lines in readme file

159

increased by12.77%

No dependency changes