react-mobile-datepicker - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

CHANGELOG.md

@@ -0,1 +1,7 @@
+[4.0.2](../../releases/tag/4.0.2)     2019-07-21 20:57:09
+---------------------------------------------------------
+
+- [01a3ec4](../../commit/01a3ec4) ✨  [feature] add characteristic of onchange and showFooter
+
+
 [4.0.1](../../releases/tag/4.0.1)     2019-02-21 11:11:09
@@ -2,0 +8,0 @@ ---------------------------------------------------------

dist/react-mobile-datepicker.js

@@ -826,2 +826,3 @@ (function (global, factory) {
     max: new Date(2050, 0, 1),
+    showFooter: true,
     showHeader: true,
@@ -849,2 +850,3 @@ showCaption: false,
     cancelText: '取消',
+    onChange: function onChange() {},
     onSelect: function onSelect() {},
@@ -1015,3 +1017,7 @@ onCancel: function onCancel() {}
         value: function handleDateSelect(value) {
-            this.setState({ value: value });
+            var _this2 = this;
+
+            this.setState({ value: value }, function () {
+                _this2.props.onChange(value);
+            });
         }
@@ -1062,3 +1068,3 @@
         value: function render() {
-            var _this2 = this;
+            var _this3 = this;
 
@@ -1074,2 +1080,3 @@ var _props2 = this.props,
                 showHeader = _props2.showHeader,
+                showFooter = _props2.showFooter,
                 customHeader = _props2.customHeader,
@@ -1115,6 +1122,6 @@ showCaption = _props2.showCaption;
                             format: item.format,
-                            onSelect: _this2.handleDateSelect });
+                            onSelect: _this3.handleDateSelect });
                     })
                 ),
-                React__default.createElement(
+                showFooter && React__default.createElement(
                     'div',
@@ -1121,0 +1128,0 @@ { className: 'datepicker-navbar' },

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,n){"use strict";var m="default"in e?e.default:e;function o(e){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function k(e,t){var n=t,r={"M+":e.getMonth()+1,"D+":e.getDate(),"h+":e.getHours(),"m+":e.getMinutes(),"s+":e.getSeconds()};for(var a in/(Y+)/.test(t)&&(n=n.replace(RegExp.$1,e.getFullYear().toString().substr(4-RegExp.$1.length))),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 r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+24*t*60*60*1e3)}n=n&&n.hasOwnProperty("default")?n.default:n,function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".datepicker-modal {\n    position: absolute;\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    font-size: 16px;\n    text-align: center;\n    font-family: arial,verdana,sans-serif;\n    -webkit-box-sizing: content-box;\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    }\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-caption {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        padding: .5em .25em;\n    }\n\n.datepicker .datepicker-caption-item {\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        margin: 0 .25em;\n        height: 40px;\n        line-height: 40px;\n        font-size: 1.2em;\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        padding: 0\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\n.datepicker.default {\n    background-color: #f7f7f7;\n}\n\n.datepicker.default .datepicker-header {\n            color: #4eccc4;\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-caption-item {\n            color: rgb(59, 59, 59);\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 {\n\n    /* dark */\n}\n\n.datepicker.dark {\n    background-color: #263238;\n}\n\n.datepicker.dark .datepicker-header {\n            color: #50ccc4;\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-caption-item {\n            color: rgb(201, 203, 204);\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 {\n\n    /* ios */\n}\n\n.datepicker.ios {\n    background-color: #f7f7f7;\n}\n\n.datepicker.ios .datepicker-col-1 {margin: 0;\n}\n\n.datepicker.ios .datepicker-header {\n            color: rgb(59, 59, 59);\n            padding: 0 3.5em;\n}\n\n.datepicker.ios .datepicker-viewport::after {\n    background: -webkit-gradient(linear,left top, left bottom,from(#f7f7f7),color-stop(52%, rgba(245, 245, 245, 0)),color-stop(48%, rgba(245, 245, 245, 0)),to(#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-caption-item {\n            color: rgb(59, 59, 59);\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            z-index: 2;\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.ios .datepicker-header + .datepicker-content {\n          padding-top: 0;\n}\n\n.datepicker.ios .datepicker-caption + .datepicker-content {\n          padding-top: 0;\n}\n\n.datepicker {\n\n    /* android */\n}\n\n.datepicker.android, .datepicker.android-dark {\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}\n\n.datepicker.android .datepicker-col-1, .datepicker.android-dark .datepicker-col-1 {margin: 0 .625em;\n}\n\n.datepicker.android .datepicker-viewport::after, .datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-gradient(linear,left top, left bottom,from(#f5f5f5),color-stop(52%, rgba(245, 245, 245, 0)),color-stop(48%, rgba(245, 245, 245, 0)),to(#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-caption-item, .datepicker.android-dark .datepicker-caption-item {\n            color: rgb(56, 56, 56);\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 {\n\n    /* android-dark */\n}\n\n.datepicker.android-dark {\n    background-color: #292829;\n}\n\n.datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-gradient(linear,left top, left bottom,from(#282828),color-stop(52%, rgba(40, 40, 40, 0)),color-stop(48%, rgba(40, 40, 40, 0)),to(#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-caption-item {\n            color: rgb(199, 199, 199);\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 { 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",{});var i=Object.freeze({convertDate:k,nextYear:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getFullYear()+t,e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds())},nextMonth:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;o(e);var n=e.getFullYear(),r=e.getMonth()+t,a=Math.min(e.getDate(),new Date(n,r+1,0).getDate());return new Date(n,r,a,e.getHours(),e.getMinutes(),e.getSeconds())},nextDate:r,nextHour:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+60*t*60*1e3)},nextMinute:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+60*t*1e3)},nextSecond:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+1e3*t)}});function a(t,n){if(t===n)return!0;var e=Object.keys(t),r=Object.keys(n);return e.length===r.length&&e.every(function(e){return t.hasOwnProperty(e)&&t[e]===n[e]})}function d(e){e.prototype.shouldComponentUpdate=function(e,t){return d.shouldComponentUpdate(e,t,this.props,this.state)}}function c(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++){n[(t[i]+a).replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")]=o.replace(r,t[i]+"$&")}n[a]=o}return n}function s(e,t){var n=c(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}d.shouldComponentUpdate=function(e,t,n,r){return!a(n,e)||!a(r,t)};!function(){function s(e){this.value=e}function e(a){var o,i;function d(e,t){try{var n=a[e](t),r=n.value;r instanceof s?Promise.resolve(r.value).then(function(e){d("next",e)},function(e){d("throw",e)}):c(n.done?"return":"normal",n.value)}catch(e){c("throw",e)}}function c(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?d(o.key,o.arg):i=null}this._invoke=function(r,a){return new Promise(function(e,t){var n={key:r,arg:a,resolve:e,reject:t,next:null};i?i=i.next=n:(o=i=n,d(r,a))})},"function"!=typeof a.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(e){return this._invoke("next",e)},e.prototype.throw=function(e){return this._invoke("throw",e)},e.prototype.return=function(e){return this._invoke("return",e)}}();var l=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},p=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),u=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},h=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)},f=function(e,t){var n={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},v=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},g=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},b=40,y=Math.floor(5),x=-b*y,w=function(e){return void 0===e},C=function(e){function n(e){l(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.animating=!1,t.touchY=0,t.translateY=0,t.currentIndex=y,t.moveDateCount=0,t.state={translateY:x,marginTop:(t.currentIndex-y)*b},t.renderDatepickerItem=t.renderDatepickerItem.bind(t),t.handleContentTouch=t.handleContentTouch.bind(t),t.handleContentMouseDown=t.handleContentMouseDown.bind(t),t.handleContentMouseMove=t.handleContentMouseMove.bind(t),t.handleContentMouseUp=t.handleContentMouseUp.bind(t),t}return h(n,e),p(n,[{key:"componentWillMount",value:function(){this._iniDates(this.props.value)}},{key:"componentDidMount",value: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)}},{key:"componentWillReceiveProps",value:function(e){e.value.getTime()!==this.props.value.getTime()&&(this._iniDates(e.value),this.currentIndex=y,this.setState({translateY:x,marginTop:(this.currentIndex-y)*b}))}},{key:"shouldComponentUpdate",value:function(e,t){return e.value.getTime()!==this.props.value.getTime()||!a(t,this.state)}},{key:"componentWillUnmount",value: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)}},{key:"_iniDates",value:function(n){var r=this,a=this.props.type,e=Array.apply(void 0,g(Array(10))).map(function(e,t){return i["next"+a](n,(t-y)*r.props.step)});this.setState({dates:e})}},{key:"_updateDates",value:function(e){var t=this.props.type,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(g(n.slice(1)),[i["next"+t](n[n.length-1],this.props.step)]),marginTop:(this.currentIndex-y)*b})):(this.currentIndex--,this.setState({dates:[i["next"+t](n[0],-this.props.step)].concat(g(n.slice(0,n.length-1))),marginTop:(this.currentIndex-y)*b}))}},{key:"_checkIsUpdateDates",value:function(e,t){return 1===e?this.currentIndex*b+20<-t:this.currentIndex*b-20>-t}},{key:"_clearTransition",value:function(e){s(e,{transition:""})}},{key:"_moveToNext",value:function(e){var t=this.state.dates[y],n=this.props,r=n.max,a=n.min;-1===e&&t.getTime()<a.getTime()&&this.moveDateCount?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&this.moveDateCount&&this._updateDates(-1),this._moveTo(this.refs.scroll,this.currentIndex)}},{key:"_moveTo",value:function(e,t){var n=this;this.animating=!0,s(e,{transition:"transform .2s ease-out"}),this.setState({translateY:-t*b}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[y]),n._clearTransition(n.refs.scroll)},200)}},{key:"handleStart",value:function(e){this.touchY=w(e.targetTouches)||w(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY,this.moveDateCount=0}},{key:"handleMove",value:function(e){var t=(w(e.targetTouches)||w(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY)-this.touchY,n=this.translateY+t,r=0<t?-1:1,a=this.state.dates[y],o=this.props,i=o.max,d=o.min;a.getTime()<d.getTime()||a.getTime()>i.getTime()||(this._checkIsUpdateDates(r,n)&&(this.moveDateCount=0<r?this.moveDateCount+1:this.moveDateCount-1,this._updateDates(r)),this.setState({translateY:n}))}},{key:"handleEnd",value:function(e){var t=0<(e.pageY||e.changedTouches[0].pageY)-this.touchY?-1:1;this._moveToNext(t)}},{key:"handleContentTouch",value:function(e){e.preventDefault(),this.animating||("touchstart"===e.type?this.handleStart(e):"touchmove"===e.type?this.handleMove(e):"touchend"===e.type&&this.handleEnd(e))}},{key:"handleContentMouseDown",value:function(e){this.animating||(this.handleStart(e),document.addEventListener("mousemove",this.handleContentMouseMove),document.addEventListener("mouseup",this.handleContentMouseUp))}},{key:"handleContentMouseMove",value:function(e){this.animating||this.handleMove(e)}},{key:"handleContentMouseUp",value:function(e){this.animating||(this.handleEnd(e),document.removeEventListener("mousemove",this.handleContentMouseMove),document.removeEventListener("mouseup",this.handleContentMouseUp))}},{key:"renderDatepickerItem",value:function(e,t){var n,r=e<this.props.min||e>this.props.max?"disabled":"",a=void 0;return n=this.props.format,a="[object Function]"===Object.prototype.toString.apply(n)?this.props.format(e):k(e,this.props.format),m.createElement("li",{key:t,className:r},a)}},{key:"render",value:function(){var t=this,e=c({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return m.createElement("div",{className:"datepicker-col-1"},m.createElement("div",{ref:function(e){return t.viewport=e},className:"datepicker-viewport"},m.createElement("div",{className:"datepicker-wheel"},m.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:e},this.state.dates.map(this.renderDatepickerItem)))))}}]),n}(e.Component),t={isPopup:!0,isOpen:!1,theme:"default",value:new Date,min:new Date(1970,0,1),max:new Date(2050,0,1),showHeader:!0,showCaption:!1,dateConfig:{year:{format:"YYYY",caption:"Year",step:1},month:{format:"M",caption:"Mon",step:1},date:{format:"D",caption:"Day",step:1}},headerFormat:"YYYY/MM/DD",confirmText:"完成",cancelText:"取消",onSelect:function(){},onCancel:function(){}},T={year:{format:"YYYY",caption:"Year",step:1},month:{format:"M",caption:"Mon",step:1},date:{format:"D",caption:"Day",step:1},hour:{format:"hh",caption:"Hour",step:1},minute:{format:"mm",caption:"Min",step:1},second:{format:"hh",caption:"Sec",step:1}},D=function(e){var t,n=(t=e,Array.isArray(t)?t:Array.from(t)),r=n[0],a=n.slice(1);return r.toUpperCase()+a.join("")},E=function(e){function n(e){l(this,n);var t=v(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={value:r(t.props.value)},"dateFormat"in e&&console.warn("dateFormat已经被弃用, 请使用dateConfig属性配置"),"dateSteps"in e&&console.warn("dateSteps已经被弃用, 请使用dateConfig属性配置"),"showFormat"in e&&console.warn("headerFormat, 请使用dateConfig属性"),t.handleFinishBtnClick=t.handleFinishBtnClick.bind(t),t.handleDateSelect=t.handleDateSelect.bind(t),t}return h(n,e),p(n,[{key:"componentWillReceiveProps",value:function(e){var t=r(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})}},{key:"componentDidUpdate",value:function(){var e=this.state.value,t=this.props,n=t.min,r=t.max;e.getTime()>r.getTime()&&this.setState({value:r}),e.getTime()<n.getTime()&&this.setState({value:n})}},{key:"shouldComponentUpdate",value:function(e,t){return r(t.value).getTime()!==this.state.value.getTime()||d.shouldComponentUpdate(e,t,this.props,this.state)}},{key:"handleFinishBtnClick",value:function(){this.props.onSelect(this.state.value)}},{key:"handleDateSelect",value:function(e){this.setState({value:e})}},{key:"normalizeDateConfig",value:function(e){var t,n=[];if(t=e,"[object Array]"===Object.prototype.toString.apply(t))for(var r=0;r<e.length;r++){var a=e[r];if("string"==typeof a){var o=a.toLocaleLowerCase();n.push(u({},T[o],{type:D(o)}))}}else for(var i in e)if(e.hasOwnProperty(i)){var d=i.toLocaleLowerCase();T.hasOwnProperty(d)&&n.push(u({},T[d],e[i],{type:D(d)}))}return n}},{key:"render",value:function(){var n=this,e=this.props,r=e.min,a=e.max,t=e.theme,o=e.dateConfig,i=e.confirmText,d=e.cancelText,c=e.headerFormat,s=e.showHeader,l=e.customHeader,p=e.showCaption,u=this.state.value,h=-1===["default","dark","ios","android","android-dark"].indexOf(t)?"default":t,f=this.normalizeDateConfig(o);return m.createElement("div",{className:"datepicker "+h},s&&m.createElement("div",{className:"datepicker-header"},l||k(u,c)),p&&m.createElement("div",{className:"datepicker-caption"},f.map(function(e,t){return m.createElement("div",{key:t,className:"datepicker-caption-item"},e.caption)})),m.createElement("div",{className:"datepicker-content"},f.map(function(e,t){return m.createElement(C,{key:t,value:u,min:r,max:a,step:e.step,type:e.type,format:e.format,onSelect:n.handleDateSelect})})),m.createElement("div",{className:"datepicker-navbar"},m.createElement("a",{className:"datepicker-navbar-btn",onClick:this.handleFinishBtnClick},i),m.createElement("a",{className:"datepicker-navbar-btn",onClick:this.props.onCancel},d)))}}]),n}(e.Component),M=n.unstable_renderSubtreeIntoContainer,_=function(e){function t(){return l(this,t),v(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return h(t,e),p(t,[{key:"componentDidMount",value:function(){this._div=document.createElement("div"),this._div.classList.add("Modal-Portal"),document.body.appendChild(this._div),this.renderPortal(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.renderPortal(e)}},{key:"componentWillUnmount",value:function(){n.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)}},{key:"renderPortal",value:function(e){var t=m.cloneElement(this.props.children,u({},e,{key:"portal"}),null);this.portal=M(this,t,this._div)}},{key:"render",value:function(){return m.createElement("noscript",null)}}]),t}(e.Component);function S(e){var t=e.isOpen,n=f(e,["isOpen"]);return m.createElement("div",{style:{display:t?"":"none"},onClick:function(e){e.target===e.currentTarget&&n.onCancel()},className:"datepicker-modal"},m.createElement(E,n))}function Y(e){var t=e.isPopup,n=f(e,["isPopup"]);return t?m.createElement(_,n,m.createElement(S,null)):m.createElement(E,n)}return _.defaultProps={isOpen:!1},Y.displayName="MobileDatePicker",Y.defaultProps=t,Y});
+!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,n){"use strict";var k="default"in e?e.default:e;function o(e){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function v(e,t){var n=t,r={"M+":e.getMonth()+1,"D+":e.getDate(),"h+":e.getHours(),"m+":e.getMinutes(),"s+":e.getSeconds()};for(var a in/(Y+)/.test(t)&&(n=n.replace(RegExp.$1,e.getFullYear().toString().substr(4-RegExp.$1.length))),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 r(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+24*t*60*60*1e3)}n=n&&n.hasOwnProperty("default")?n.default:n,function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".datepicker-modal {\n    position: absolute;\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    font-size: 16px;\n    text-align: center;\n    font-family: arial,verdana,sans-serif;\n    -webkit-box-sizing: content-box;\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    }\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-caption {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        padding: .5em .25em;\n    }\n\n.datepicker .datepicker-caption-item {\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        margin: 0 .25em;\n        height: 40px;\n        line-height: 40px;\n        font-size: 1.2em;\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        padding: 0\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\n.datepicker.default {\n    background-color: #f7f7f7;\n}\n\n.datepicker.default .datepicker-header {\n            color: #4eccc4;\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-caption-item {\n            color: rgb(59, 59, 59);\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 {\n\n    /* dark */\n}\n\n.datepicker.dark {\n    background-color: #263238;\n}\n\n.datepicker.dark .datepicker-header {\n            color: #50ccc4;\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-caption-item {\n            color: rgb(201, 203, 204);\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 {\n\n    /* ios */\n}\n\n.datepicker.ios {\n    background-color: #f7f7f7;\n}\n\n.datepicker.ios .datepicker-col-1 {margin: 0;\n}\n\n.datepicker.ios .datepicker-header {\n            color: rgb(59, 59, 59);\n            padding: 0 3.5em;\n}\n\n.datepicker.ios .datepicker-viewport::after {\n    background: -webkit-gradient(linear,left top, left bottom,from(#f7f7f7),color-stop(52%, rgba(245, 245, 245, 0)),color-stop(48%, rgba(245, 245, 245, 0)),to(#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-caption-item {\n            color: rgb(59, 59, 59);\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            z-index: 2;\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.ios .datepicker-header + .datepicker-content {\n          padding-top: 0;\n}\n\n.datepicker.ios .datepicker-caption + .datepicker-content {\n          padding-top: 0;\n}\n\n.datepicker {\n\n    /* android */\n}\n\n.datepicker.android, .datepicker.android-dark {\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}\n\n.datepicker.android .datepicker-col-1, .datepicker.android-dark .datepicker-col-1 {margin: 0 .625em;\n}\n\n.datepicker.android .datepicker-viewport::after, .datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-gradient(linear,left top, left bottom,from(#f5f5f5),color-stop(52%, rgba(245, 245, 245, 0)),color-stop(48%, rgba(245, 245, 245, 0)),to(#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-caption-item, .datepicker.android-dark .datepicker-caption-item {\n            color: rgb(56, 56, 56);\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 {\n\n    /* android-dark */\n}\n\n.datepicker.android-dark {\n    background-color: #292829;\n}\n\n.datepicker.android-dark .datepicker-viewport::after {\n    background-image: -webkit-gradient(linear,left top, left bottom,from(#282828),color-stop(52%, rgba(40, 40, 40, 0)),color-stop(48%, rgba(40, 40, 40, 0)),to(#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-caption-item {\n            color: rgb(199, 199, 199);\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 { 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",{});var i=Object.freeze({convertDate:v,nextYear:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getFullYear()+t,e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds())},nextMonth:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;o(e);var n=e.getFullYear(),r=e.getMonth()+t,a=Math.min(e.getDate(),new Date(n,r+1,0).getDate());return new Date(n,r,a,e.getHours(),e.getMinutes(),e.getSeconds())},nextDate:r,nextHour:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+60*t*60*1e3)},nextMinute:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+60*t*1e3)},nextSecond:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;return o(e),new Date(e.getTime()+1e3*t)}});function a(t,n){if(t===n)return!0;var e=Object.keys(t),r=Object.keys(n);return e.length===r.length&&e.every(function(e){return t.hasOwnProperty(e)&&t[e]===n[e]})}function d(e){e.prototype.shouldComponentUpdate=function(e,t){return d.shouldComponentUpdate(e,t,this.props,this.state)}}function c(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++){n[(t[i]+a).replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")]=o.replace(r,t[i]+"$&")}n[a]=o}return n}function s(e,t){var n=c(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}d.shouldComponentUpdate=function(e,t,n,r){return!a(n,e)||!a(r,t)};!function(){function s(e){this.value=e}function e(a){var o,i;function d(e,t){try{var n=a[e](t),r=n.value;r instanceof s?Promise.resolve(r.value).then(function(e){d("next",e)},function(e){d("throw",e)}):c(n.done?"return":"normal",n.value)}catch(e){c("throw",e)}}function c(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?d(o.key,o.arg):i=null}this._invoke=function(r,a){return new Promise(function(e,t){var n={key:r,arg:a,resolve:e,reject:t,next:null};i?i=i.next=n:(o=i=n,d(r,a))})},"function"!=typeof a.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(e){return this._invoke("next",e)},e.prototype.throw=function(e){return this._invoke("throw",e)},e.prototype.return=function(e){return this._invoke("return",e)}}();var l=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},p=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),u=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},h=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)},f=function(e,t){var n={};for(var r in e)0<=t.indexOf(r)||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},m=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},g=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},b=40,y=Math.floor(5),x=-b*y,w=function(e){return void 0===e},C=function(e){function n(e){l(this,n);var t=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.animating=!1,t.touchY=0,t.translateY=0,t.currentIndex=y,t.moveDateCount=0,t.state={translateY:x,marginTop:(t.currentIndex-y)*b},t.renderDatepickerItem=t.renderDatepickerItem.bind(t),t.handleContentTouch=t.handleContentTouch.bind(t),t.handleContentMouseDown=t.handleContentMouseDown.bind(t),t.handleContentMouseMove=t.handleContentMouseMove.bind(t),t.handleContentMouseUp=t.handleContentMouseUp.bind(t),t}return h(n,e),p(n,[{key:"componentWillMount",value:function(){this._iniDates(this.props.value)}},{key:"componentDidMount",value: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)}},{key:"componentWillReceiveProps",value:function(e){e.value.getTime()!==this.props.value.getTime()&&(this._iniDates(e.value),this.currentIndex=y,this.setState({translateY:x,marginTop:(this.currentIndex-y)*b}))}},{key:"shouldComponentUpdate",value:function(e,t){return e.value.getTime()!==this.props.value.getTime()||!a(t,this.state)}},{key:"componentWillUnmount",value: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)}},{key:"_iniDates",value:function(n){var r=this,a=this.props.type,e=Array.apply(void 0,g(Array(10))).map(function(e,t){return i["next"+a](n,(t-y)*r.props.step)});this.setState({dates:e})}},{key:"_updateDates",value:function(e){var t=this.props.type,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(g(n.slice(1)),[i["next"+t](n[n.length-1],this.props.step)]),marginTop:(this.currentIndex-y)*b})):(this.currentIndex--,this.setState({dates:[i["next"+t](n[0],-this.props.step)].concat(g(n.slice(0,n.length-1))),marginTop:(this.currentIndex-y)*b}))}},{key:"_checkIsUpdateDates",value:function(e,t){return 1===e?this.currentIndex*b+b/2<-t:this.currentIndex*b-b/2>-t}},{key:"_clearTransition",value:function(e){s(e,{transition:""})}},{key:"_moveToNext",value:function(e){var t=this.state.dates[y],n=this.props,r=n.max,a=n.min;-1===e&&t.getTime()<a.getTime()&&this.moveDateCount?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&this.moveDateCount&&this._updateDates(-1),this._moveTo(this.refs.scroll,this.currentIndex)}},{key:"_moveTo",value:function(e,t){var n=this;this.animating=!0,s(e,{transition:"transform .2s ease-out"}),this.setState({translateY:-t*b}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[y]),n._clearTransition(n.refs.scroll)},200)}},{key:"handleStart",value:function(e){this.touchY=w(e.targetTouches)||w(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY,this.moveDateCount=0}},{key:"handleMove",value:function(e){var t=(w(e.targetTouches)||w(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY)-this.touchY,n=this.translateY+t,r=0<t?-1:1,a=this.state.dates[y],o=this.props,i=o.max,d=o.min;a.getTime()<d.getTime()||a.getTime()>i.getTime()||(this._checkIsUpdateDates(r,n)&&(this.moveDateCount=0<r?this.moveDateCount+1:this.moveDateCount-1,this._updateDates(r)),this.setState({translateY:n}))}},{key:"handleEnd",value:function(e){var t=0<(e.pageY||e.changedTouches[0].pageY)-this.touchY?-1:1;this._moveToNext(t)}},{key:"handleContentTouch",value:function(e){e.preventDefault(),this.animating||("touchstart"===e.type?this.handleStart(e):"touchmove"===e.type?this.handleMove(e):"touchend"===e.type&&this.handleEnd(e))}},{key:"handleContentMouseDown",value:function(e){this.animating||(this.handleStart(e),document.addEventListener("mousemove",this.handleContentMouseMove),document.addEventListener("mouseup",this.handleContentMouseUp))}},{key:"handleContentMouseMove",value:function(e){this.animating||this.handleMove(e)}},{key:"handleContentMouseUp",value:function(e){this.animating||(this.handleEnd(e),document.removeEventListener("mousemove",this.handleContentMouseMove),document.removeEventListener("mouseup",this.handleContentMouseUp))}},{key:"renderDatepickerItem",value:function(e,t){var n,r=e<this.props.min||e>this.props.max?"disabled":"",a=void 0;return n=this.props.format,a="[object Function]"===Object.prototype.toString.apply(n)?this.props.format(e):v(e,this.props.format),k.createElement("li",{key:t,className:r},a)}},{key:"render",value:function(){var t=this,e=c({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return k.createElement("div",{className:"datepicker-col-1"},k.createElement("div",{ref:function(e){return t.viewport=e},className:"datepicker-viewport"},k.createElement("div",{className:"datepicker-wheel"},k.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:e},this.state.dates.map(this.renderDatepickerItem)))))}}]),n}(e.Component),t={isPopup:!0,isOpen:!1,theme:"default",value:new Date,min:new Date(1970,0,1),max:new Date(2050,0,1),showFooter:!0,showHeader:!0,showCaption:!1,dateConfig:{year:{format:"YYYY",caption:"Year",step:1},month:{format:"M",caption:"Mon",step:1},date:{format:"D",caption:"Day",step:1}},headerFormat:"YYYY/MM/DD",confirmText:"完成",cancelText:"取消",onChange:function(){},onSelect:function(){},onCancel:function(){}},T={year:{format:"YYYY",caption:"Year",step:1},month:{format:"M",caption:"Mon",step:1},date:{format:"D",caption:"Day",step:1},hour:{format:"hh",caption:"Hour",step:1},minute:{format:"mm",caption:"Min",step:1},second:{format:"hh",caption:"Sec",step:1}},D=function(e){var t,n=(t=e,Array.isArray(t)?t:Array.from(t)),r=n[0],a=n.slice(1);return r.toUpperCase()+a.join("")},E=function(e){function n(e){l(this,n);var t=m(this,(n.__proto__||Object.getPrototypeOf(n)).call(this,e));return t.state={value:r(t.props.value)},"dateFormat"in e&&console.warn("dateFormat已经被弃用, 请使用dateConfig属性配置"),"dateSteps"in e&&console.warn("dateSteps已经被弃用, 请使用dateConfig属性配置"),"showFormat"in e&&console.warn("headerFormat, 请使用dateConfig属性"),t.handleFinishBtnClick=t.handleFinishBtnClick.bind(t),t.handleDateSelect=t.handleDateSelect.bind(t),t}return h(n,e),p(n,[{key:"componentWillReceiveProps",value:function(e){var t=r(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})}},{key:"componentDidUpdate",value:function(){var e=this.state.value,t=this.props,n=t.min,r=t.max;e.getTime()>r.getTime()&&this.setState({value:r}),e.getTime()<n.getTime()&&this.setState({value:n})}},{key:"shouldComponentUpdate",value:function(e,t){return r(t.value).getTime()!==this.state.value.getTime()||d.shouldComponentUpdate(e,t,this.props,this.state)}},{key:"handleFinishBtnClick",value:function(){this.props.onSelect(this.state.value)}},{key:"handleDateSelect",value:function(e){var t=this;this.setState({value:e},function(){t.props.onChange(e)})}},{key:"normalizeDateConfig",value:function(e){var t,n=[];if(t=e,"[object Array]"===Object.prototype.toString.apply(t))for(var r=0;r<e.length;r++){var a=e[r];if("string"==typeof a){var o=a.toLocaleLowerCase();n.push(u({},T[o],{type:D(o)}))}}else for(var i in e)if(e.hasOwnProperty(i)){var d=i.toLocaleLowerCase();T.hasOwnProperty(d)&&n.push(u({},T[d],e[i],{type:D(d)}))}return n}},{key:"render",value:function(){var n=this,e=this.props,r=e.min,a=e.max,t=e.theme,o=e.dateConfig,i=e.confirmText,d=e.cancelText,c=e.headerFormat,s=e.showHeader,l=e.showFooter,p=e.customHeader,u=e.showCaption,h=this.state.value,f=-1===["default","dark","ios","android","android-dark"].indexOf(t)?"default":t,m=this.normalizeDateConfig(o);return k.createElement("div",{className:"datepicker "+f},s&&k.createElement("div",{className:"datepicker-header"},p||v(h,c)),u&&k.createElement("div",{className:"datepicker-caption"},m.map(function(e,t){return k.createElement("div",{key:t,className:"datepicker-caption-item"},e.caption)})),k.createElement("div",{className:"datepicker-content"},m.map(function(e,t){return k.createElement(C,{key:t,value:h,min:r,max:a,step:e.step,type:e.type,format:e.format,onSelect:n.handleDateSelect})})),l&&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)))}}]),n}(e.Component),M=n.unstable_renderSubtreeIntoContainer,_=function(e){function t(){return l(this,t),m(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return h(t,e),p(t,[{key:"componentDidMount",value:function(){this._div=document.createElement("div"),this._div.classList.add("Modal-Portal"),document.body.appendChild(this._div),this.renderPortal(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.renderPortal(e)}},{key:"componentWillUnmount",value:function(){n.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)}},{key:"renderPortal",value:function(e){var t=k.cloneElement(this.props.children,u({},e,{key:"portal"}),null);this.portal=M(this,t,this._div)}},{key:"render",value:function(){return k.createElement("noscript",null)}}]),t}(e.Component);function S(e){var t=e.isOpen,n=f(e,["isOpen"]);return k.createElement("div",{style:{display:t?"":"none"},onClick:function(e){e.target===e.currentTarget&&n.onCancel()},className:"datepicker-modal"},k.createElement(E,n))}function Y(e){var t=e.isPopup,n=f(e,["isPopup"]);return t?k.createElement(_,n,k.createElement(S,null)):k.createElement(E,n)}return _.defaultProps={isOpen:!1},Y.displayName="MobileDatePicker",Y.defaultProps=t,Y});
 //# sourceMappingURL=dist/react-mobile-datepicker.min.js.map

lib/dataSource.js

@@ -12,2 +12,3 @@
     max: new Date(2050, 0, 1),
+    showFooter: true,
     showHeader: true,
@@ -35,2 +36,3 @@ showCaption: false,
     cancelText: '取消',
+    onChange: () => {},
     onSelect: () => {},
@@ -37,0 +39,0 @@ onCancel: () => {},

lib/DatePicker.js

@@ -18,2 +18,3 @@ /**
     showHeader: boolean,
+    showFooter: boolean,
     showCaption: boolean,
@@ -24,2 +25,3 @@ dateConfig: Object | Array<string>,
     cancelText: string,
+    onChange: Function,
     onSelect: Function,
@@ -123,3 +125,5 @@ onCancel: Function,
     handleDateSelect(value) {
-        this.setState({ value });
+        this.setState({ value }, () => {
+            this.props.onChange(value);
+        });
     }
@@ -167,3 +171,3 @@
     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;
@@ -204,3 +208,3 @@ const themeClassName =
                 </div>
-                <div className="datepicker-navbar">
+                {showFooter && <div className="datepicker-navbar">
                     <a
@@ -212,3 +216,3 @@ className="datepicker-navbar-btn"
                         onClick={this.props.onCancel}>{cancelText}</a>
-                </div>
+                </div>}
             </div>
@@ -215,0 +219,0 @@ );

package.json

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

README.md

@@ -270,2 +270,3 @@ # react-mobile-datepicker
 | 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`|
@@ -276,2 +277,3 @@ | confirmText  | String | 完成 | customize the selection time button text |
 | onCancel | Function | () => {} | the callback function after click button of cancel |
+| onChange | Function | () => {} | the callback function after date be changed |
 
@@ -278,0 +280,0 @@

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

627381

increased by0.21%

Lines of code

2464

increased by0.49%

Number of lines in readme file

344

increased by0.58%

No dependency changes