react-mobile-datepicker - npm Package Compare versions

Comparing version 3.0.7 to 3.0.8

CHANGELOG.md

@@ -0,1 +1,7 @@
+[3.0.8](../../releases/tag/3.0.8)     2017-10-15 23:17:08
+---------------------------------------------------------
+
+- [3297180](../../commit/3297180) ✨  [feature] Add a function: Customize the header(https://github.com/lanjingling0510/react-mobile-datepicker/pull/16)
+
+
 [3.0.7](../../releases/tag/3.0.7)     2017-10-12 08:11:11
@@ -2,0 +8,0 @@ ---------------------------------------------------------

dist/react-mobile-datepicker.js

@@ -28,3 +28,3 @@ (function (global, factory) {
 
-__$styleInject(".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    -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        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        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-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 {\n\n    /* dark */\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 {\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-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-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 {\n\n    /* android */\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 {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-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-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", undefined);
+__$styleInject(".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    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-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-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-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-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 {\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-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-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", undefined);
 
@@ -909,3 +909,5 @@ /**
                 cancelText = _props.cancelText,
-                showFormat = _props.showFormat;
+                showFormat = _props.showFormat,
+                showHeader = _props.showHeader,
+                customHeader = _props.customHeader;
 
@@ -919,6 +921,6 @@ var value = this.state.value;
                     className: 'datepicker ' + themeClassName },
-                React__default.createElement(
+                showHeader && React__default.createElement(
                     'div',
                     { className: 'datepicker-header' },
-                    convertDate(value, showFormat)
+                    customHeader || convertDate(value, showFormat)
                 ),
@@ -1053,2 +1055,3 @@ React__default.createElement(
     max: new Date(2050, 0, 1),
+    showHeader: true,
     dateFormat: ['YYYY', 'M', 'D'],
@@ -1055,0 +1058,0 @@ showFormat: 'YYYY/MM/DD',

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){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function r(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 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 o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+24*t*60*60*1e3)}function i(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 d(e){e.prototype.shouldComponentUpdate=function(e,t){return d.shouldComponentUpdate(e,t,this.props,this.state)}}function c(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")}function l(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[c(t[i]+a)]=o.replace(r,t[i]+"$&");n[a]=o}return n}function s(e,t){var n=l(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}function p(e){var t=e.isOpen,n=g(e,["isOpen"]);return h.createElement("div",{style:{display:t?"":"none"},onClick:function(e){e.target===e.currentTarget&&n.onCancel()},className:"datepicker-modal"},h.createElement(_,n))}function u(e){var t=e.isPopup,n=g(e,["isPopup"]);return t?h.createElement(O,n,h.createElement(p,null)):h.createElement(_,n)}var h="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t,function(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}(".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    -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        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        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-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 {\n\n    /* dark */\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 {\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-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-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 {\n\n    /* android */\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 {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-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-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",void 0);var f=Object.freeze({convertDate:a,nextYear:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getFullYear()+t,e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds())},nextMonth:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;n(e);var a=e.getFullYear(),o=e.getMonth()+t,i=Math.min(e.getDate(),r(a,o));return new Date(a,o,i,e.getHours(),e.getMinutes(),e.getSeconds())},nextDate:o,nextHour:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+60*t*60*1e3)},nextMinute:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+60*t*1e3)},nextSecond:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+1e3*t)}});d.shouldComponentUpdate=function(e,t,n,r){return!i(n,e)||!i(r,t)};!function(){function e(e){this.value=e}function t(t){function n(a,o){try{var i=t[a](o),d=i.value;d instanceof e?Promise.resolve(d.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(i.done?"return":"normal",i.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":a.resolve({value:t,done:!0});break;case"throw":a.reject(t);break;default:a.resolve({value:t,done:!1})}(a=a.next)?n(a.key,a.arg):o=null}var a,o;this._invoke=function(e,t){return new Promise(function(r,i){var d={key:e,arg:t,resolve:r,reject:i,next:null};o?o=o.next=d:(a=o=d,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var k=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},m=function(){function e(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(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),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},b=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)},g=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},y=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},x=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)},w=40,T=Math.floor(5),C=-w*T,D=function(e){return void 0===e},E=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字母")},M=function(e){function t(e){k(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.animating=!1,n.touchY=0,n.translateY=0,n.currentIndex=T,n.state={translateY:C,marginTop:(n.currentIndex-T)*w},n.typeName=E(e.format),n.renderDatepickerItem=n.renderDatepickerItem.bind(n),n.handleContentTouch=n.handleContentTouch.bind(n),n.handleContentMouseDown=n.handleContentMouseDown.bind(n),n.handleContentMouseMove=n.handleContentMouseMove.bind(n),n.handleContentMouseUp=n.handleContentMouseUp.bind(n),n}return b(t,e),m(t,[{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=T,this.setState({translateY:C,marginTop:(this.currentIndex-T)*w}))}},{key:"shouldComponentUpdate",value:function(e,t){return e.value.getTime()!==this.props.value.getTime()||!i(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(e){var t=this.typeName,n=Array.apply(void 0,x(Array(10))).map(function(n,r){return f["next"+t](e,r-T)});this.setState({dates:n})}},{key:"_updateDates",value:function(e){var t=this.typeName,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(x(n.slice(1)),[f["next"+t](n[n.length-1],1)]),marginTop:(this.currentIndex-T)*w})):(this.currentIndex--,this.setState({dates:[f["next"+t](n[0],-1)].concat(x(n.slice(0,n.length-1))),marginTop:(this.currentIndex-T)*w}))}},{key:"_checkIsUpdateDates",value:function(e,t){return 1===e?this.currentIndex*w+w/2<-t:this.currentIndex*w-w/2>-t}},{key:"_clearTransition",value:function(e){s(e,{transition:""})}},{key:"_moveToNext",value:function(e){var t=this.state.dates[T],n=this.props,r=n.max,a=n.min;-1===e&&t.getTime()<a.getTime()?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&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*w}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[T]),n._clearTransition(n.refs.scroll)},200)}},{key:"handleStart",value:function(e){this.touchY=D(e.targetTouches)||D(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY}},{key:"handleMove",value:function(e){var t=(D(e.targetTouches)||D(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY)-this.touchY,n=this.translateY+t,r=t>0?-1:1,a=this.state.dates[T],o=this.props,i=o.max,d=o.min;a.getTime()<d.getTime()||a.getTime()>i.getTime()||(this._checkIsUpdateDates(r,n)&&this._updateDates(r),this.setState({translateY:n}))}},{key:"handleEnd",value:function(e){var t=(e.pageY||e.changedTouches[0].pageY)-this.touchY>0?-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=e<this.props.min||e>this.props.max?"disabled":"";return h.createElement("li",{key:t,className:n},a(e,this.props.format))}},{key:"render",value:function(){var e=this,t=l({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return h.createElement("div",{className:"datepicker-col-1"},h.createElement("div",{ref:function(t){return e.viewport=t},className:"datepicker-viewport"},h.createElement("div",{className:"datepicker-wheel"},h.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:t},this.state.dates.map(this.renderDatepickerItem)))))}}]),t}(e.Component),_=function(e){function t(e){k(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={value:o(n.props.value)},n.handleFinishBtnClick=n.handleFinishBtnClick.bind(n),n.handleDateSelect=n.handleDateSelect.bind(n),n}return b(t,e),m(t,[{key:"componentWillReceiveProps",value:function(e){var t=o(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})}},{key:"shouldComponentUpdate",value:function(e,t){return o(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:"render",value: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,l=t.showFormat,s=this.state.value,p=-1===["default","dark","ios","android","android-dark"].indexOf(o)?"default":o;return h.createElement("div",{className:"datepicker "+p},h.createElement("div",{className:"datepicker-header"},a(s,l)),h.createElement("div",{className:"datepicker-content"},i.map(function(t,a){return h.createElement(M,{key:a,value:s,min:n,max:r,format:t,onSelect:e.handleDateSelect})})),h.createElement("div",{className:"datepicker-navbar"},h.createElement("a",{className:"datepicker-navbar-btn",onClick:this.handleFinishBtnClick},d),h.createElement("a",{className:"datepicker-navbar-btn",onClick:this.props.onCancel},c)))}}]),t}(e.Component),Y=t.unstable_renderSubtreeIntoContainer,O=function(e){function n(){return k(this,n),y(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return b(n,e),m(n,[{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(){t.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)}},{key:"renderPortal",value:function(e){var t=h.cloneElement(this.props.children,v({},e,{key:"portal"}),null);this.portal=Y(this,t,this._div)}},{key:"render",value:function(){return h.createElement("noscript",null)}}]),n}(e.Component);return O.defaultProps={isOpen:!1},u.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(){}},u});
+!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){if("[object Date]"!==Object.prototype.toString.call(e,null))throw new Error("参数类型不对")}function r(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 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 o(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+24*t*60*60*1e3)}function i(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 d(e){e.prototype.shouldComponentUpdate=function(e,t){return d.shouldComponentUpdate(e,t,this.props,this.state)}}function c(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")}function l(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[c(t[i]+a)]=o.replace(r,t[i]+"$&");n[a]=o}return n}function s(e,t){var n=l(t);for(var r in n)n.hasOwnProperty(r)&&(e.style[r]=n[r])}function p(e){var t=e.isOpen,n=g(e,["isOpen"]);return h.createElement("div",{style:{display:t?"":"none"},onClick:function(e){e.target===e.currentTarget&&n.onCancel()},className:"datepicker-modal"},h.createElement(_,n))}function u(e){var t=e.isPopup,n=g(e,["isPopup"]);return t?h.createElement(O,n,h.createElement(p,null)):h.createElement(_,n)}var h="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t,function(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}(".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    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-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-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-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-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 {\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-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-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",void 0);var f=Object.freeze({convertDate:a,nextYear:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getFullYear()+t,e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds())},nextMonth:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;n(e);var a=e.getFullYear(),o=e.getMonth()+t,i=Math.min(e.getDate(),r(a,o));return new Date(a,o,i,e.getHours(),e.getMinutes(),e.getSeconds())},nextDate:o,nextHour:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+60*t*60*1e3)},nextMinute:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+60*t*1e3)},nextSecond:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return n(e),new Date(e.getTime()+1e3*t)}});d.shouldComponentUpdate=function(e,t,n,r){return!i(n,e)||!i(r,t)};!function(){function e(e){this.value=e}function t(t){function n(a,o){try{var i=t[a](o),d=i.value;d instanceof e?Promise.resolve(d.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(i.done?"return":"normal",i.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":a.resolve({value:t,done:!0});break;case"throw":a.reject(t);break;default:a.resolve({value:t,done:!1})}(a=a.next)?n(a.key,a.arg):o=null}var a,o;this._invoke=function(e,t){return new Promise(function(r,i){var d={key:e,arg:t,resolve:r,reject:i,next:null};o?o=o.next=d:(a=o=d,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var k=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},m=function(){function e(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(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),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},b=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)},g=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},y=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},x=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)},w=40,T=Math.floor(5),C=-w*T,D=function(e){return void 0===e},E=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字母")},M=function(e){function t(e){k(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.animating=!1,n.touchY=0,n.translateY=0,n.currentIndex=T,n.state={translateY:C,marginTop:(n.currentIndex-T)*w},n.typeName=E(e.format),n.renderDatepickerItem=n.renderDatepickerItem.bind(n),n.handleContentTouch=n.handleContentTouch.bind(n),n.handleContentMouseDown=n.handleContentMouseDown.bind(n),n.handleContentMouseMove=n.handleContentMouseMove.bind(n),n.handleContentMouseUp=n.handleContentMouseUp.bind(n),n}return b(t,e),m(t,[{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=T,this.setState({translateY:C,marginTop:(this.currentIndex-T)*w}))}},{key:"shouldComponentUpdate",value:function(e,t){return e.value.getTime()!==this.props.value.getTime()||!i(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(e){var t=this.typeName,n=Array.apply(void 0,x(Array(10))).map(function(n,r){return f["next"+t](e,r-T)});this.setState({dates:n})}},{key:"_updateDates",value:function(e){var t=this.typeName,n=this.state.dates;1===e?(this.currentIndex++,this.setState({dates:[].concat(x(n.slice(1)),[f["next"+t](n[n.length-1],1)]),marginTop:(this.currentIndex-T)*w})):(this.currentIndex--,this.setState({dates:[f["next"+t](n[0],-1)].concat(x(n.slice(0,n.length-1))),marginTop:(this.currentIndex-T)*w}))}},{key:"_checkIsUpdateDates",value:function(e,t){return 1===e?this.currentIndex*w+w/2<-t:this.currentIndex*w-w/2>-t}},{key:"_clearTransition",value:function(e){s(e,{transition:""})}},{key:"_moveToNext",value:function(e){var t=this.state.dates[T],n=this.props,r=n.max,a=n.min;-1===e&&t.getTime()<a.getTime()?this._updateDates(1):1===e&&t.getTime()>r.getTime()&&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*w}),setTimeout(function(){n.animating=!1,n.props.onSelect(n.state.dates[T]),n._clearTransition(n.refs.scroll)},200)}},{key:"handleStart",value:function(e){this.touchY=D(e.targetTouches)||D(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY,this.translateY=this.state.translateY}},{key:"handleMove",value:function(e){var t=(D(e.targetTouches)||D(e.targetTouches[0])?e.pageY:e.targetTouches[0].pageY)-this.touchY,n=this.translateY+t,r=t>0?-1:1,a=this.state.dates[T],o=this.props,i=o.max,d=o.min;a.getTime()<d.getTime()||a.getTime()>i.getTime()||(this._checkIsUpdateDates(r,n)&&this._updateDates(r),this.setState({translateY:n}))}},{key:"handleEnd",value:function(e){var t=(e.pageY||e.changedTouches[0].pageY)-this.touchY>0?-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=e<this.props.min||e>this.props.max?"disabled":"";return h.createElement("li",{key:t,className:n},a(e,this.props.format))}},{key:"render",value:function(){var e=this,t=l({transform:"translateY("+this.state.translateY+"px)",marginTop:this.state.marginTop});return h.createElement("div",{className:"datepicker-col-1"},h.createElement("div",{ref:function(t){return e.viewport=t},className:"datepicker-viewport"},h.createElement("div",{className:"datepicker-wheel"},h.createElement("ul",{ref:"scroll",className:"datepicker-scroll",style:t},this.state.dates.map(this.renderDatepickerItem)))))}}]),t}(e.Component),_=function(e){function t(e){k(this,t);var n=y(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={value:o(n.props.value)},n.handleFinishBtnClick=n.handleFinishBtnClick.bind(n),n.handleDateSelect=n.handleDateSelect.bind(n),n}return b(t,e),m(t,[{key:"componentWillReceiveProps",value:function(e){var t=o(e.value);t.getTime()!==this.state.value.getTime()&&this.setState({value:t})}},{key:"shouldComponentUpdate",value:function(e,t){return o(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:"render",value: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,l=t.showFormat,s=t.showHeader,p=t.customHeader,u=this.state.value,f=-1===["default","dark","ios","android","android-dark"].indexOf(o)?"default":o;return h.createElement("div",{className:"datepicker "+f},s&&h.createElement("div",{className:"datepicker-header"},p||a(u,l)),h.createElement("div",{className:"datepicker-content"},i.map(function(t,a){return h.createElement(M,{key:a,value:u,min:n,max:r,format:t,onSelect:e.handleDateSelect})})),h.createElement("div",{className:"datepicker-navbar"},h.createElement("a",{className:"datepicker-navbar-btn",onClick:this.handleFinishBtnClick},d),h.createElement("a",{className:"datepicker-navbar-btn",onClick:this.props.onCancel},c)))}}]),t}(e.Component),Y=t.unstable_renderSubtreeIntoContainer,O=function(e){function n(){return k(this,n),y(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return b(n,e),m(n,[{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(){t.unmountComponentAtNode(this._div),this._div.parentNode.removeChild(this._div)}},{key:"renderPortal",value:function(e){var t=h.cloneElement(this.props.children,v({},e,{key:"portal"}),null);this.portal=Y(this,t,this._div)}},{key:"render",value:function(){return h.createElement("noscript",null)}}]),n}(e.Component);return O.defaultProps={isOpen:!1},u.defaultProps={isPopup:!0,isOpen:!1,theme:"default",value:new Date,min:new Date(1970,0,1),max:new Date(2050,0,1),showHeader:!0,dateFormat:["YYYY","M","D"],showFormat:"YYYY/MM/DD",confirmText:"完成",cancelText:"取消",onSelect:function(){},onCancel:function(){}},u});
 //# sourceMappingURL=dist/react-mobile-datepicker.min.js.map

lib/DatePicker.js

@@ -15,2 +15,4 @@ /**
     max: Object,
+    customHeader?: React.Element<*>,
+    showHeader: boolean,
     dateFormat: Array<*>,
@@ -86,3 +88,3 @@ showFormat: string,
     render() {
-        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat } = this.props;
+        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat, showHeader, customHeader } = this.props;
         const value = this.state.value;
@@ -96,3 +98,4 @@ const themeClassName =
                 className={`datepicker ${themeClassName}`}>
-                <div className="datepicker-header">{convertDate(value, showFormat)}</div>
+                {showHeader &&
+                    <div className="datepicker-header">{customHeader || convertDate(value, showFormat)}</div>}
                 <div className="datepicker-content">
@@ -107,3 +110,3 @@ {dateFormat.map((format, index) => (
                             onSelect={this.handleDateSelect} />
-                        ))}
+                    ))}
                 </div>
@@ -110,0 +113,0 @@ <div className="datepicker-navbar">

lib/index.js

@@ -50,2 +50,3 @@ import './index.css';
     max: new Date(2050, 0, 1),
+    showHeader: true,
     dateFormat: ['YYYY', 'M', 'D'],
@@ -52,0 +53,0 @@ showFormat: 'YYYY/MM/DD',

package.json

 {
   "name": "react-mobile-datepicker",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "一个移动端时间选择器react组件",
@@ -38,3 +38,3 @@ "main": "./dist/react-mobile-datepicker.js",
     "babel-core": "^6.9.0",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^7.0.0",
     "babel-loader": "^7.1.2",
@@ -52,7 +52,9 @@ "babel-polyfill": "^6.9.1",
     "enzyme-adapter-react-15": "^1.0.1",
-    "eslint": "^2.10.2",
-    "eslint-config-airbnb": "9.0.1",
-    "eslint-plugin-import": "^1.8.0",
-    "eslint-plugin-jsx-a11y": "^1.2.1",
-    "eslint-plugin-react": "^5.1.1",
+    "eslint": "^3.19.0",
+    "eslint-config-cqaso-kit": "^0.0.1",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-flowtype": "^2.30.4",
+    "eslint-plugin-import": "^2.0.1",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.4.1",
     "gzip-size-cli": "^2.1.0",
@@ -59,0 +61,0 @@ "html-webpack-plugin": "^2.21.0",

README.md

@@ -134,2 +134,4 @@ # react-mobile-datepicker
 | max | Date | new Date(2050, 0, 1) | maximum date |
+| showHeader | Boolean | true | whether to show the header |
+| customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace `showFormat`|
 | confirmText  | String | 完成 | customize the selection time button text |
@@ -136,0 +138,0 @@ | cancelText | String | 取消 | customize the cancel button text |

webpack.config.js

@@ -6,3 +6,2 @@ /* eslint-disable */
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var config = require('./config.js');
 var postNested = require('postcss-nested');
@@ -9,0 +8,0 @@ var cssnext = require('cssnext');

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

557015

increased by0.24%

Lines of code

2108

increased by0.72%

Number of lines in readme file

161

increased by1.26%

Worsened metrics

Dev dependency count

51

increased by4.08%

Number of package files

36

decreased by-2.7%

No dependency changes