@momo-kits/date-picker 0.0.34-beta → 0.0.34

package/datePicker/DatePicker.js

@@ -1 +1,612 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _core=require("@momo-kits/core");var _WheelPicker=_interopRequireDefault(require("./WheelPicker"));var _DatePickerHelper=_interopRequireDefault(require("./helper/DatePickerHelper"));var _jsxFileName="/Users/trinh.ho2/momo-folk/kits/src/libs/datePicker/dist/datePicker/DatePicker.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var ifIphoneX=_core.ScreenUtils.ifIphoneX;var widthScreen=_reactNative.Dimensions.get('window').width;var styles=_reactNative.StyleSheet.create({container:{width:widthScreen,alignItems:'center',justifyContent:'center',paddingHorizontal:6},content:{flexDirection:'row',width:widthScreen,alignItems:'center',justifyContent:'center'},column:{borderWidth:2,borderColor:'red'},header:{borderRadius:16,marginBottom:0},view:{backgroundColor:'white',borderTopRightRadius:16,borderTopLeftRadius:16,overflow:'hidden'},titleCancel:{fontSize:17,color:'#4A90E2'},titleConfirm:{fontSize:17,color:'#4A90E2',textAlign:'right'}});var getStrings=function getStrings(strings){return(strings==null?void 0:strings.length)===1?"0"+strings:strings;};var DatePicker=function(_Component){(0,_inherits2.default)(DatePicker,_Component);var _super=_createSuper(DatePicker);function DatePicker(props){var _this;(0,_classCallCheck2.default)(this,DatePicker);_this=_super.call(this,props);_this.onBeginDrag=function(refName){for(var i in _this.arrayRef){if(i&&i!==refName&&_this.arrayRef&&_this.arrayRef[i]&&_this.arrayRef[i].update){_this.arrayRef[i].setScrollEnabled(false);}}};_this.onEndDrag=function(refName){for(var i in _this.arrayRef){if(i&&i!==refName&&_this.arrayRef&&_this.arrayRef[i]&&_this.arrayRef[i].update){_this.arrayRef[i].setScrollEnabled(true);}}};_this.show=function(){};_this.hide=function(){var _this$props=_this.props,onClose=_this$props.onClose,requestClose=_this$props.requestClose;if(requestClose&&typeof requestClose==='function'){requestClose(function(){if(onClose&&typeof onClose==='function'){onClose();}});}};_this.finish=function(){var _this$props2=_this.props,format=_this$props2.format,onSelected=_this$props2.onSelected,isRanged=_this$props2.isRanged,selectedDate=_this$props2.selectedDate;if(isRanged&&format==='hh:mm'){var from=_this.ranged[_this.hourRangeIndex_1];var to=_this.ranged[_this.hourRangeIndex_2];if(onSelected&&typeof onSelected==='function'){onSelected({from:from,to:to});}_this.hide();return;}var day=_this.days[_this.dayIndex];var month=_this.months[_this.monthIndex];var year=_this.years[_this.yearIndex];var hour=_this.hours[_this.hourIndex];var minute=_this.minutes[_this.minuteIndex];var selectedDateFormatted=_DatePickerHelper.default.toString(day,month,year,hour,minute,format);if(onSelected&&typeof onSelected==='function'){onSelected(selectedDateFormatted||selectedDate||_DatePickerHelper.default.getCurrentDate(format));}_this.hide();};_this.renderDescription=function(){var _this$props3=_this.props,description=_this$props3.description,descriptionStyle=_this$props3.descriptionStyle,renderDescription=_this$props3.renderDescription;if(renderDescription)return renderDescription;return description?_react.default.createElement(_core.Text.Title,{style:[{marginBottom:_core.Spacing.S},descriptionStyle],__source:{fileName:_jsxFileName,lineNumber:471,columnNumber:13}},description):null;};_this.initDefault(props);return _this;}(0,_createClass2.default)(DatePicker,[{key:"componentDidMount",value:function componentDidMount(){this.setStateMonth(this.dayIndex,this.monthIndex,this.yearIndex);var onCreateRef=this.props.onCreateRef;if(typeof onCreateRef==='function')onCreateRef(this);}},{key:"componentWillUnmount",value:function componentWillUnmount(){}},{key:"initDefault",value:function initDefault(props){if(props){var propsMinDate=props.minDate?props.minDate:props.minValue;var propsMaxDate=props.maxDate?props.maxDate:props.maxValue;var propsSelectedDate=props.selectedDate?props.selectedDate:props.value;if(propsMinDate){this.minDate=_DatePickerHelper.default.formatDate(propsMinDate,props.format);}else if(props.maxAge){this.minDate=_DatePickerHelper.default.calculateDateSinceYearAgo(props.maxAge);}else{this.minDate=null;}if(propsMaxDate){this.maxDate=_DatePickerHelper.default.formatDate(propsMaxDate,props.format);}else if(props.minAge){this.maxDate=_DatePickerHelper.default.calculateDateSinceYearAgo(props.minAge);}else{this.maxDate=null;}if(this.maxDate&&this.minDate&&this.maxDate.getTime()<this.minDate.getTime()){this.maxDate=null;this.minDate=null;}if(propsSelectedDate){this.selectedDate=_DatePickerHelper.default.formatDate(propsSelectedDate,props.format);if(this.selectedDate){if(this.minDate&&this.selectedDate.getTime()<this.minDate.getTime()){this.selectedDate=null;}else if(this.maxDate&&this.maxDate.getTime()<this.selectedDate.getTime()){this.selectedDate=null;}}}else{this.selectedDate=null;}if(props.format==='hh:mm'){this.selectedDate=props.isRanged?{from:_DatePickerHelper.default.formatDate(propsSelectedDate.from,props.format),to:_DatePickerHelper.default.formatDate(propsSelectedDate.to,props.format)}:_DatePickerHelper.default.formatDate(propsSelectedDate,props.format);}}this.createDataDate(this.minDate,this.maxDate,props.minuteArray);this.selectedIndexDate();}},{key:"createDataDate",value:function createDataDate(minDate,maxDate,minuteArray){this.minDay=1;this.minMonth=1;this.minYear=1970;this.maxDay=31;this.maxMonth=12;this.maxYear=2100;if(minDate){this.minDay=minDate.getDate();this.minMonth=minDate.getMonth()+1;this.minYear=minDate.getFullYear();}if(maxDate){this.maxDay=maxDate.getDate();this.maxMonth=maxDate.getMonth()+1;this.maxYear=maxDate.getFullYear();}this.days=_DatePickerHelper.default.makeRange(1,31);this.months=_DatePickerHelper.default.makeRange(1,12);this.years=_DatePickerHelper.default.makeRange(this.minYear,this.maxYear);this.hours=_DatePickerHelper.default.makeRange(0,23,true);if(Array.isArray(minuteArray)){this.minutes=minuteArray;}else{this.minutes=_DatePickerHelper.default.makeRange(0,59,true);}this.ranged=_DatePickerHelper.default.arrayRange;}},{key:"selectedIndexDate",value:function selectedIndexDate(){var _this$props4=this.props,format=_this$props4.format,isRanged=_this$props4.isRanged;var current=new Date();if(this.minDate&&current.getTime()<this.minDate.getTime()){current=this.minDate;}else if(this.maxDate&&current.getTime()>this.maxDate.getTime()){current=this.maxDate;}if(format==='hh:mm'&&isRanged){var _this$selectedDate,_this$selectedDate$fr,_this$selectedDate$fr2,_this$selectedDate2,_this$selectedDate2$f,_this$selectedDate2$f2,_this$selectedDate3,_this$selectedDate3$t,_this$selectedDate3$t2,_this$selectedDate4,_this$selectedDate4$t,_this$selectedDate4$t2;var valueHours_1=this.selectedDate?getStrings((_this$selectedDate=this.selectedDate)==null?void 0:(_this$selectedDate$fr=_this$selectedDate.from)==null?void 0:(_this$selectedDate$fr2=_this$selectedDate$fr.getHours())==null?void 0:_this$selectedDate$fr2.toString())+":"+getStrings((_this$selectedDate2=this.selectedDate)==null?void 0:(_this$selectedDate2$f=_this$selectedDate2.from)==null?void 0:(_this$selectedDate2$f2=_this$selectedDate2$f.getMinutes())==null?void 0:_this$selectedDate2$f2.toString()):'';var valueHours_2=this.selectedDate?getStrings((_this$selectedDate3=this.selectedDate)==null?void 0:(_this$selectedDate3$t=_this$selectedDate3.to)==null?void 0:(_this$selectedDate3$t2=_this$selectedDate3$t.getHours())==null?void 0:_this$selectedDate3$t2.toString())+":"+getStrings((_this$selectedDate4=this.selectedDate)==null?void 0:(_this$selectedDate4$t=_this$selectedDate4.to)==null?void 0:(_this$selectedDate4$t2=_this$selectedDate4$t.getMinutes())==null?void 0:_this$selectedDate4$t2.toString()):'';this.hourRangeIndex_1=this.selectedDate?this.ranged.indexOf(valueHours_1):this.ranged.indexOf(current.getHours().toString()+":"+current.getMinutes().toString());this.hourRangeIndex_2=this.selectedDate?this.ranged.indexOf(valueHours_2):this.ranged.indexOf(current.getHours().toString()+":"+current.getMinutes().toString());return;}this.dayIndex=this.selectedDate?this.days.indexOf(this.selectedDate.getDate().toString()):this.days.indexOf(current.getDate().toString());this.monthIndex=this.selectedDate?this.months.indexOf((this.selectedDate.getMonth()+1).toString()):this.months.indexOf((current.getMonth()+1).toString());this.yearIndex=this.selectedDate?this.years.indexOf(this.selectedDate.getFullYear().toString()):this.years.indexOf(current.getFullYear().toString());if(format==='hh:mm'&&!isRanged){var _this$selectedDate5,_this$selectedDate5$g,_this$selectedDate5$g2,_this$selectedDate6,_this$selectedDate6$g,_this$selectedDate7,_this$selectedDate7$g,_this$selectedDate7$g2,_this$selectedDate8,_this$selectedDate8$g;var valueHours=this.selectedDate?((_this$selectedDate5=this.selectedDate)==null?void 0:(_this$selectedDate5$g=_this$selectedDate5.getHours())==null?void 0:(_this$selectedDate5$g2=_this$selectedDate5$g.toString())==null?void 0:_this$selectedDate5$g2.length)===1?"0"+this.selectedDate.getHours().toString():((_this$selectedDate6=this.selectedDate)==null?void 0:(_this$selectedDate6$g=_this$selectedDate6.getHours())==null?void 0:_this$selectedDate6$g.toString())||'':'';var valueMinute=this.selectedDate?((_this$selectedDate7=this.selectedDate)==null?void 0:(_this$selectedDate7$g=_this$selectedDate7.getMinutes())==null?void 0:(_this$selectedDate7$g2=_this$selectedDate7$g.toString())==null?void 0:_this$selectedDate7$g2.length)===1?"0"+this.selectedDate.getMinutes().toString():((_this$selectedDate8=this.selectedDate)==null?void 0:(_this$selectedDate8$g=_this$selectedDate8.getMinutes())==null?void 0:_this$selectedDate8$g.toString())||'':'';this.hourIndex=this.selectedDate?this.hours.indexOf(valueHours):this.hours.indexOf(current.getHours().toString());this.minuteIndex=this.selectedDate?this.minutes.indexOf(valueMinute):this.minutes.indexOf(current.getMinutes().toString());}}},{key:"renderUpdate",value:function renderUpdate(param){if(param&&param.day!=null){this.dayIndex=param.day;this.updateWheelPiker('DayView',{arrayValue:this.days,value:param.day});}if(param&&param.month!=null){this.monthIndex=param.month;this.updateWheelPiker('MonthView',{arrayValue:this.months,value:param.month});}if(param&&param.year!=null){this.yearIndex=param.year;this.updateWheelPiker('YearView',{arrayValue:this.years,value:param.year});}if(param&&param.hour!=null){this.hourIndex=param.hour;this.updateWheelPiker('HourView',{arrayValue:this.hours,value:param.hour});}if(param&&param.minute!=null){this.minuteIndex=param.minute;this.updateWheelPiker('MinuteView',{arrayValue:this.minutes,value:param.minute});}if(param&&param.hourRange_1!=null){this.hourRangeIndex_1=param.hourRange_1;this.updateWheelPiker('HourRange1',{arrayValue:this.ranged,value:param.hourRange_1});}if(param&&param.hourRange_2!=null){this.hourRangeIndex_2=param.hourRange_2;this.updateWheelPiker('HourRange2',{arrayValue:this.ranged,value:param.hourRange_2});}}},{key:"setStateDate",value:function setStateDate(dayIndex,monthIndex,yearIndex){var _this$days;var day=parseInt(this.days[dayIndex]);var month=parseInt(this.months[monthIndex]);var year=parseInt(this.years[yearIndex]);var isUpDate=false;var minDay=1;var maxDay=_DatePickerHelper.default.getMaxDate(month,year);if(this.maxDay&&year===this.maxYear&&this.maxMonth===month){maxDay=this.maxDay;}if(this.minDay&&year===this.minYear&&this.minMonth===month){minDay=this.minDay;}if(maxDay!==((_this$days=this.days)==null?void 0:_this$days.length)||minDay!==parseInt(this.days[0])){isUpDate=true;}var index=dayIndex;if(isUpDate){var _this$days2;this.days=_DatePickerHelper.default.makeRange(minDay,maxDay);index=day>maxDay?((_this$days2=this.days)==null?void 0:_this$days2.length)-1:day<minDay?0:this.days.indexOf(day.toString());}this.renderUpdate({day:index,month:monthIndex,year:yearIndex});}},{key:"setStateMonth",value:function setStateMonth(dayIndex,monthIndex,yearIndex){var _this$months;var month=parseInt(this.months[monthIndex]);var year=parseInt(this.years[yearIndex]);var isUpDate=false;var minMonth=1;var maxMonth=12;if(this.maxMonth&&year===this.maxYear){maxMonth=this.maxMonth;}if(this.minMonth&&year===this.minYear){minMonth=this.minMonth;}if(maxMonth!==((_this$months=this.months)==null?void 0:_this$months.length)||minMonth!==parseInt(this.months[0])){isUpDate=true;}var index=monthIndex;if(isUpDate){var _this$months2,_this$months3;this.months=_DatePickerHelper.default.makeRange(minMonth,maxMonth);index=month>maxMonth?((_this$months2=this.months)==null?void 0:_this$months2.length)-1:month<minMonth?0:(_this$months3=this.months)==null?void 0:_this$months3.indexOf(month.toString());}this.setStateDate(dayIndex,index,yearIndex);}},{key:"updateWheelPiker",value:function updateWheelPiker(refName,param){var refWheelPicker;if(this.arrayRef){refWheelPicker=this.arrayRef[refName];if(refWheelPicker&&refWheelPicker.update){this.arrayRef[refName].update(param);}}}},{key:"renderColumn",value:function renderColumn(refName,valueInput,arrayValue,label,bottomOffset,callback,reversePreFix){var _this2=this;if(!this.arrayRef){this.arrayRef={};}return _react.default.createElement(_WheelPicker.default,{bottomOffset:bottomOffset,key:refName,refName:refName,ref:function ref(_ref){_this2.arrayRef[refName]=_ref;},value:valueInput,arrayValue:arrayValue,reversePreFix:reversePreFix,preFix:label,onBeginDrag:this.onBeginDrag,onEndDrag:this.onEndDrag,onValueChange:function onValueChange(value){if(callback){callback(value);}},__source:{fileName:_jsxFileName,lineNumber:408,columnNumber:13}});}},{key:"renderHeader",value:function renderHeader(){var _this$props5=this.props,title=_this$props5.title,placeholder=_this$props5.placeholder,body=_this$props5.body,buttonTitle=_this$props5.buttonTitle,onButtonPress=_this$props5.onButtonPress,headerStyle=_this$props5.headerStyle,_this$props5$iconClos=_this$props5.iconClosePosition,iconClosePosition=_this$props5$iconClos===void 0?'right':_this$props5$iconClos;return _react.default.createElement(_core.BottomPopupHeader,{iconClosePosition:iconClosePosition,body:body,onClose:this.hide,title:title||placeholder,buttonTitle:buttonTitle,onButtonPress:onButtonPress,style:[styles.header,headerStyle],__source:{fileName:_jsxFileName,lineNumber:435,columnNumber:13}});}},{key:"renderContent",value:function renderContent(){var _this3=this;var _this$props6=this.props,format=_this$props6.format,labelDay=_this$props6.labelDay,labelMonth=_this$props6.labelMonth,labelYear=_this$props6.labelYear,bottomOffset=_this$props6.bottomOffset,labelMinute=_this$props6.labelMinute,labelHour=_this$props6.labelHour,isRanged=_this$props6.isRanged;if(isRanged&&format==='hh:mm'){return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:481,columnNumber:17}},this.renderDescription(),_react.default.createElement(_reactNative.View,{style:styles.content,__source:{fileName:_jsxFileName,lineNumber:483,columnNumber:21}},this.renderColumn('HourRange1',this.hourRangeIndex_1,this.ranged,_core.SwitchLanguage.from,bottomOffset,function(value){_this3.renderUpdate({hourRange_1:value});},true),this.renderColumn('HourRange2',this.hourRangeIndex_2,this.ranged,_core.SwitchLanguage.to,bottomOffset,function(value){_this3.renderUpdate({hourRange_2:value});},true)));}return _react.default.createElement(_reactNative.View,{style:styles.container,__source:{fileName:_jsxFileName,lineNumber:495,columnNumber:13}},this.renderDescription(),_react.default.createElement(_reactNative.View,{style:styles.content,__source:{fileName:_jsxFileName,lineNumber:497,columnNumber:17}},format.indexOf('dd')!==-1?this.renderColumn('DayView',this.dayIndex,this.days,labelDay||_core.SwitchLanguage.day,bottomOffset,function(value){_this3.renderUpdate({day:value});}):null,format.indexOf('MM')!==-1?this.renderColumn('MonthView',this.monthIndex,this.months,labelMonth||_core.SwitchLanguage.month,bottomOffset,function(value){_this3.setStateDate(_this3.dayIndex,value,_this3.yearIndex);}):null,format.indexOf('YYYY')!==-1?this.renderColumn('YearView',this.yearIndex,this.years,labelYear||_core.SwitchLanguage.year,bottomOffset,function(value){_this3.setStateMonth(_this3.dayIndex,_this3.monthIndex,value);}):null,format.indexOf('hh')!==-1?this.renderColumn('HourView',this.hourIndex,this.hours,labelHour||_core.SwitchLanguage.hour,bottomOffset,function(value){_this3.renderUpdate({hour:value});},true):null,format.indexOf('mm')!==-1?this.renderColumn('MinuteView',this.minuteIndex,this.minutes,labelMinute||_core.SwitchLanguage.minute,bottomOffset,function(value){_this3.renderUpdate({minute:value});},true):null));}},{key:"renderFooter",value:function renderFooter(){var _this$props7=this.props,titleFooter=_this$props7.titleFooter,renderFooter=_this$props7.renderFooter;return renderFooter?renderFooter():_react.default.createElement(_reactNative.View,{style:{paddingHorizontal:12,marginBottom:ifIphoneX(29,11),marginTop:28},__source:{fileName:_jsxFileName,lineNumber:542,columnNumber:13}},_react.default.createElement(_core.Button,{onPress:this.finish,title:titleFooter||_core.SwitchLanguage.confirm,type:"primary",__source:{fileName:_jsxFileName,lineNumber:543,columnNumber:17}}));}},{key:"render",value:function render(){var style=this.props.style;return _react.default.createElement(_reactNative.View,{style:[styles.view,style],__source:{fileName:_jsxFileName,lineNumber:556,columnNumber:13}},this.renderHeader(),this.renderContent(),this.renderFooter());}}]);return DatePicker;}(_react.Component);DatePicker.propTypes={selectedDate:_propTypes.default.any,format:_propTypes.default.string,placeholder:_propTypes.default.string,minDate:_propTypes.default.string,maxDate:_propTypes.default.string,titleFooter:_propTypes.default.string,title:_propTypes.default.string,labelMonth:_propTypes.default.string,labelHour:_propTypes.default.string,labelMinute:_propTypes.default.string,labelDay:_propTypes.default.string,labelYear:_propTypes.default.string,onSelected:_propTypes.default.func,bottomOffset:_propTypes.default.number,renderDescription:_propTypes.default.any,description:_propTypes.default.string,renderFooter:_propTypes.default.any,style:_propTypes.default.any};DatePicker.defaultProps={format:'dd/MM/YYYY',placeholder:_core.SwitchLanguage.chooseDate,minDate:'1/1/1970',bottomOffset:0};var _default=DatePicker;exports.default=_default;
+/* eslint-disable max-len */
+/* eslint-disable react/no-unused-prop-types */
+import React, { Component } from 'react';
+import {
+    View, StyleSheet, Dimensions
+} from 'react-native';
+import PropTypes from 'prop-types';
+import {
+    BottomPopupHeader, Button, Text, ScreenUtils, SwitchLanguage, Spacing, Colors
+} from '@momo-kits/core';
+import WheelPicker from './WheelPicker';
+import DatePickerHelper from './helper/DatePickerHelper';
+
+const { ifIphoneX } = ScreenUtils;
+
+const widthScreen = Dimensions.get('window').width;
+const styles = StyleSheet.create({
+    container: {
+        width: widthScreen,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 6,
+    },
+    content: {
+        flexDirection: 'row',
+        width: widthScreen,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 21,
+        paddingTop: 12
+    },
+    column: {
+        borderWidth: 2,
+        borderColor: 'red',
+    },
+    header: {
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+        //backgroundColor:'red',
+        height: 64,
+        borderBottomColor: Colors.black_04,
+        borderBottomWidth: 1,
+        alignItems:'center',
+        justifyContent:'center',
+        marginBottom: 0, // Spacing.S,
+    },
+    view: {
+        backgroundColor: 'white',
+        borderTopRightRadius: 16,
+        borderTopLeftRadius: 16,
+        overflow: 'hidden'
+    },
+    titleCancel: {
+        fontSize: 17,
+        color: '#4A90E2'
+    },
+    titleConfirm: {
+        fontSize: 17,
+        color: '#4A90E2',
+        textAlign: 'right'
+    }
+});
+
+const getStrings = (strings) => (strings?.length === 1 ? `0${strings}` : strings);
+class DatePicker extends Component {
+    constructor(props) {
+        super(props);
+        this.initDefault(props);
+    }
+
+    // onBackPress = () => {
+    //     this.hide();
+    //     return true;
+    // }
+
+    componentDidMount() {
+        // BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
+        // BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
+
+        // setTimeout(() => {
+        //     BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
+        //     BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
+        // }, 200);
+
+        this.setStateMonth(this.dayIndex, this.monthIndex, this.yearIndex);
+        const { onCreateRef } = this.props;
+        if (typeof onCreateRef === 'function') onCreateRef(this);
+    }
+
+    componentWillUnmount() {
+        // BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
+    }
+
+    initDefault(props) {
+        if (props) {
+            const propsMinDate = props.minDate ? props.minDate : props.minValue;
+            const propsMaxDate = props.maxDate ? props.maxDate : props.maxValue;
+            const propsSelectedDate = props.selectedDate ? props.selectedDate : props.value;
+
+            if (propsMinDate) {
+                this.minDate = DatePickerHelper.formatDate(propsMinDate, props.format);
+            } else if (props.maxAge) {
+                this.minDate = DatePickerHelper.calculateDateSinceYearAgo(props.maxAge);
+            } else {
+                this.minDate = null;
+            }
+
+            if (propsMaxDate) {
+                this.maxDate = DatePickerHelper.formatDate(propsMaxDate, props.format);
+            } else if (props.minAge) {
+                this.maxDate = DatePickerHelper.calculateDateSinceYearAgo(props.minAge);
+            } else {
+                this.maxDate = null;
+            }
+
+            if (this.maxDate && this.minDate && this.maxDate.getTime() < this.minDate.getTime()) {
+                this.maxDate = null;
+                this.minDate = null;
+            }
+
+            if (propsSelectedDate) {
+                this.selectedDate = DatePickerHelper.formatDate(propsSelectedDate, props.format);
+                if (this.selectedDate) {
+                    if (this.minDate && this.selectedDate.getTime() < this.minDate.getTime()) {
+                        this.selectedDate = null;
+                    } else if (this.maxDate && this.maxDate.getTime() < this.selectedDate.getTime()) {
+                        this.selectedDate = null;
+                    }
+                }
+            } else {
+                this.selectedDate = null;
+            }
+            if (props.format === 'hh:mm') {
+                this.selectedDate = props.isRanged ? {
+                    from: DatePickerHelper.formatDate(propsSelectedDate.from, props.format),
+                    to: DatePickerHelper.formatDate(propsSelectedDate.to, props.format)
+                } : DatePickerHelper.formatDate(propsSelectedDate, props.format);
+            }
+        }
+        this.createDataDate(this.minDate, this.maxDate, props.minuteArray, props.rangeHour);
+        this.selectedIndexDate();
+    }
+
+    createDataDate(minDate, maxDate, minuteArray, rangeHour) {
+        this.minDay = 1;
+        this.minMonth = 1;
+        this.minYear = 1970;
+
+        this.maxDay = 31;
+        this.maxMonth = 12;
+        this.maxYear = 2100;
+        if (minDate) {
+            this.minDay = minDate.getDate();
+            this.minMonth = minDate.getMonth() + 1;
+            this.minYear = minDate.getFullYear();
+        }
+        if (maxDate) {
+            this.maxDay = maxDate.getDate();
+            this.maxMonth = maxDate.getMonth() + 1;
+            this.maxYear = maxDate.getFullYear();
+        }
+        this.days = DatePickerHelper.makeRange(1, 31);
+        this.months = DatePickerHelper.makeRange(1, 12);
+        this.years = DatePickerHelper.makeRange(this.minYear, this.maxYear);
+        this.hours = DatePickerHelper.makeRange(0, 23, true);
+        if (Array.isArray(minuteArray)) {
+            this.minutes = minuteArray;
+        } else {
+            this.minutes = DatePickerHelper.makeRange(0, 59, true);
+        }
+        this.ranged = rangeHour || DatePickerHelper.arrayRange;
+    }
+
+    selectedIndexDate() {
+        const { format, isRanged } = this.props;
+        let current = new Date();
+        if (this.minDate && current.getTime() < this.minDate.getTime()) {
+            current = this.minDate;
+        } else if (this.maxDate && current.getTime() > this.maxDate.getTime()) {
+            current = this.maxDate;
+        }
+        if (format === 'hh:mm' && isRanged) {
+            const valueHours_1 = this.selectedDate?.from ? `${getStrings(this.selectedDate?.from?.getHours()?.toString())}:${getStrings(this.selectedDate?.from?.getMinutes()?.toString())}` : '00:00';
+            const valueHours_2 = this.selectedDate?.to ? `${getStrings(this.selectedDate?.to?.getHours()?.toString())}:${getStrings(this.selectedDate?.to?.getMinutes()?.toString())}` : '00:00';
+            this.hourRangeIndex_1 = valueHours_1
+                ? this.ranged.indexOf(valueHours_1)
+                : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
+
+            this.hourRangeIndex_2 = valueHours_2
+                ? this.ranged.indexOf(valueHours_2)
+                : this.ranged.indexOf(`${current.getHours().toString()}:${current.getMinutes().toString()}`);
+            return;
+        }
+        this.dayIndex = this.selectedDate
+            ? this.days.indexOf(this.selectedDate.getDate().toString())
+            : this.days.indexOf(current.getDate().toString());
+
+        this.monthIndex = this.selectedDate
+            ? this.months.indexOf((this.selectedDate.getMonth() + 1).toString())
+            : this.months.indexOf((current.getMonth() + 1).toString());
+
+        this.yearIndex = this.selectedDate
+            ? this.years.indexOf(this.selectedDate.getFullYear().toString())
+            : this.years.indexOf(current.getFullYear().toString());
+
+        if (format === 'hh:mm' && !isRanged) {
+            const valueHours = this.selectedDate ? this.selectedDate?.getHours()?.toString()?.length === 1 ? `0${this.selectedDate.getHours().toString()}` : this.selectedDate?.getHours()?.toString() || '' : '';
+            const valueMinute = this.selectedDate ? this.selectedDate?.getMinutes()?.toString()?.length === 1 ? `0${this.selectedDate.getMinutes().toString()}` : this.selectedDate?.getMinutes()?.toString() || '' : '';
+            
+            this.hourIndex = this.selectedDate
+                ? this.hours.indexOf(valueHours)
+                : this.hours.indexOf(current.getHours().toString().length === 1 ? `0${current.getHours().toString()}` : current.getHours().toString());
+
+            this.minuteIndex = this.selectedDate
+                ? this.minutes.indexOf(valueMinute)
+                : this.minutes.indexOf(current.getMinutes().toString().length === 1 ? `0${current.getMinutes().toString()}` : current.getMinutes().toString());
+        }
+    }
+
+    onBeginDrag = (refName) => {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const i in this.arrayRef) {
+            if (i && i !== refName && this.arrayRef && this.arrayRef[i] && this.arrayRef[i].update) {
+                this.arrayRef[i].setScrollEnabled(false);
+            }
+        }
+    }
+
+    onEndDrag = (refName) => {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const i in this.arrayRef) {
+            if (i && i !== refName && this.arrayRef && this.arrayRef[i] && this.arrayRef[i].update) {
+                this.arrayRef[i].setScrollEnabled(true);
+            }
+        }
+    }
+
+    show = () => {
+
+    }
+
+    hide = () => {
+        const { onClose, requestClose } = this.props;
+        if (requestClose && typeof requestClose === 'function') {
+            requestClose(() => {
+                if (onClose && typeof onClose === 'function') {
+                    onClose();
+                }
+            });
+        }
+    }
+
+    finish = () => {
+        const {
+            format, onSelected, isRanged, selectedDate
+        } = this.props;
+        if (isRanged && format === 'hh:mm') {
+            const from = this.ranged[this.hourRangeIndex_1];
+            const to = this.ranged[this.hourRangeIndex_2];
+            if (onSelected && typeof onSelected === 'function') {
+                onSelected({ from, to });
+            }
+            this.hide();
+            return;
+        }
+        const day = this.days[this.dayIndex];
+        const month = this.months[this.monthIndex];
+        const year = this.years[this.yearIndex];
+        const hour = this.hours[this.hourIndex] || '00';
+        const minute = this.minutes[this.minuteIndex] || '00';
+        const selectedDateFormatted = DatePickerHelper.toString(day, month, year, hour, minute, format);
+        if (onSelected && typeof onSelected === 'function') {
+            onSelected(selectedDateFormatted || selectedDate || DatePickerHelper.getCurrentDate(format));
+        }
+        this.hide();
+    }
+
+    renderUpdate(param) {
+        if (param && param.day != null) {
+            this.dayIndex = param.day;
+            this.updateWheelPiker('DayView', {
+                arrayValue: this.days,
+                value: param.day
+            });
+        }
+
+        if (param && param.month != null) {
+            this.monthIndex = param.month;
+            this.updateWheelPiker('MonthView', {
+                arrayValue: this.months,
+                value: param.month
+            });
+        }
+
+        if (param && param.year != null) {
+            this.yearIndex = param.year;
+            this.updateWheelPiker('YearView', {
+                arrayValue: this.years,
+                value: param.year
+            });
+        }
+
+        if (param && param.hour != null) {
+            this.hourIndex = param.hour;
+            this.updateWheelPiker('HourView', {
+                arrayValue: this.hours,
+                value: param.hour
+            });
+        }
+
+        if (param && param.minute != null) {
+            this.minuteIndex = param.minute;
+            this.updateWheelPiker('MinuteView', {
+                arrayValue: this.minutes,
+                value: param.minute
+            });
+        }
+
+        if (param && param.hourRange_1 != null) {
+            this.hourRangeIndex_1 = param.hourRange_1;
+            this.updateWheelPiker('HourRange1', {
+                arrayValue: this.ranged,
+                value: param.hourRange_1
+            });
+        }
+
+        if (param && param.hourRange_2 != null) {
+            this.hourRangeIndex_2 = param.hourRange_2;
+            this.updateWheelPiker('HourRange2', {
+                arrayValue: this.ranged,
+                value: param.hourRange_2
+            });
+        }
+    }
+
+    setStateDate(dayIndex, monthIndex, yearIndex) {
+        const day = parseInt(this.days[dayIndex]);
+        const month = parseInt(this.months[monthIndex]);
+        const year = parseInt(this.years[yearIndex]);
+
+        let isUpDate = false;
+        let minDay = 1;
+        let maxDay = DatePickerHelper.getMaxDate(month, year);
+
+        if (this.maxDay && year === this.maxYear && this.maxMonth === month) {
+            maxDay = this.maxDay;
+        }
+
+        if (this.minDay && year === this.minYear && this.minMonth === month) {
+            minDay = this.minDay;
+        }
+
+        if (maxDay !== this.days?.length || minDay !== parseInt(this.days[0])) {
+            isUpDate = true;
+        }
+
+        let index = dayIndex;
+
+        if (isUpDate) {
+            this.days = DatePickerHelper.makeRange(minDay, maxDay);
+            index = day > maxDay ? this.days?.length - 1 : (day < minDay ? 0 : this.days.indexOf(day.toString()));
+        }
+
+        this.renderUpdate({
+            day: index,
+            month: monthIndex,
+            year: yearIndex
+        });
+    }
+
+    setStateMonth(dayIndex, monthIndex, yearIndex) {
+        const month = parseInt(this.months[monthIndex]);
+        const year = parseInt(this.years[yearIndex]);
+
+        let isUpDate = false;
+        let minMonth = 1;
+        let maxMonth = 12;
+
+        if (this.maxMonth && year === this.maxYear) {
+            maxMonth = this.maxMonth;
+        }
+        if (this.minMonth && year === this.minYear) {
+            minMonth = this.minMonth;
+        }
+        if (maxMonth !== this.months?.length || minMonth !== parseInt(this.months[0])) {
+            isUpDate = true;
+        }
+        let index = monthIndex;
+        if (isUpDate) {
+            this.months = DatePickerHelper.makeRange(minMonth, maxMonth);
+            index = month > maxMonth
+                ? this.months?.length - 1
+                : (month < minMonth ? 0 : this.months?.indexOf(month.toString()));
+        }
+        this.setStateDate(dayIndex, index, yearIndex);
+    }
+
+    updateWheelPiker(refName, param) {
+        let refWheelPicker;
+        if (this.arrayRef) {
+            refWheelPicker = this.arrayRef[refName];
+            if (refWheelPicker && refWheelPicker.update) {
+                this.arrayRef[refName].update(param);
+            }
+        }
+    }
+
+    renderColumn(refName, valueInput, arrayValue, label, bottomOffset, callback, reversePreFix) {
+        if (!this.arrayRef) {
+            this.arrayRef = {};
+        }
+        return (
+            <WheelPicker
+                bottomOffset={bottomOffset}
+                key={refName}
+                refName={refName}
+                ref={(ref) => {
+                    this.arrayRef[refName] = ref;
+                }}
+                value={valueInput}
+                arrayValue={arrayValue}
+                reversePreFix={reversePreFix}
+                preFix={label}
+                onBeginDrag={this.onBeginDrag}
+                onEndDrag={this.onEndDrag}
+                onValueChange={(value) => {
+                    if (callback) {
+                        callback(value);
+                    }
+                }}
+            />
+        );
+    }
+
+    renderHeader() {
+        const {
+            title, placeholder, body, buttonTitle, onButtonPress, headerStyle, iconClosePosition = 'right', iconType
+        } = this.props;
+        return (
+            <BottomPopupHeader
+                iconType={iconType}
+                iconClosePosition={iconClosePosition}
+                body={body}
+                onClose={this.hide}
+                title={title || placeholder}
+                buttonTitle={buttonTitle}
+                onButtonPress={onButtonPress}
+                style={[styles.header, headerStyle]}
+            />
+        );
+        // return (
+        //     <View style={styles.header}>
+        //         <TouchableOpacity
+        //             onPress={this.hide}
+        //         >
+        //             <Text style={styles.titleCancel}>
+        //                 {titleCancel}
+        //             </Text>
+        //         </TouchableOpacity>
+        //         <Text style={styles.title}>
+        //             {title || placeholder}
+        //         </Text>
+        //         <TouchableOpacity onPress={this.finish}>
+        //             <Text style={styles.titleConfirm}>
+        //                 {titleConfirm}
+
+        //             </Text>
+        //         </TouchableOpacity>
+        //     </View>
+        // );
+    }
+
+    renderDescription = () => {
+        const { description, descriptionStyle, renderDescription } = this.props;
+        if (renderDescription) return renderDescription;
+        return description ? (
+            <Text.Title style={[{ marginBottom: Spacing.S }, descriptionStyle]}>{description}</Text.Title>
+        ) : null;
+    };
+
+    renderContent() {
+        const {
+            format, labelDay, labelMonth, labelYear, bottomOffset, labelMinute, labelHour, isRanged
+        } = this.props;
+        if (isRanged && format === 'hh:mm') {
+            return (
+                <View style={styles.container}>
+                    {this.renderDescription()}
+                    <View style={styles.content}>
+                        {this.renderColumn('HourRange1', this.hourRangeIndex_1, this.ranged, SwitchLanguage.from, bottomOffset, (value) => {
+                            this.renderUpdate({ hourRange_1: value });
+                        }, true)}
+                        {this.renderColumn('HourRange2', this.hourRangeIndex_2, this.ranged, SwitchLanguage.to, bottomOffset, (value) => {
+                            this.renderUpdate({ hourRange_2: value });
+                        }, true)}
+                    </View>
+                </View>
+            );
+        }
+        return (
+            <View style={styles.container}>
+                {this.renderDescription()}
+                <View style={styles.content}>
+                    {
+                        format.indexOf('dd') !== -1
+                            ? this.renderColumn('DayView', this.dayIndex, this.days, labelDay || SwitchLanguage.day, bottomOffset, (value) => {
+                                this.renderUpdate({ day: value });
+                            })
+                            : null
+                    }
+                    {
+                        format.indexOf('MM') !== -1
+                            ? this.renderColumn('MonthView', this.monthIndex, this.months, labelMonth || SwitchLanguage.month, bottomOffset, (value) => {
+                                this.setStateDate(this.dayIndex, value, this.yearIndex);
+                            })
+                            : null
+                    }
+                    {
+                        format.indexOf('YYYY') !== -1
+                            ? this.renderColumn('YearView', this.yearIndex, this.years, labelYear || SwitchLanguage.year, bottomOffset, (value) => {
+                                this.setStateMonth(this.dayIndex, this.monthIndex, value);
+                            })
+                            : null
+                    }
+                    {
+                        format.indexOf('hh') !== -1
+                            ? this.renderColumn('HourView', this.hourIndex, this.hours, labelHour || SwitchLanguage.hour, bottomOffset, (value) => {
+                                this.renderUpdate({ hour: value });
+                            }, true)
+                            : null
+                    }
+                    {
+                        format.indexOf('mm') !== -1
+                            ? this.renderColumn('MinuteView', this.minuteIndex, this.minutes, labelMinute || SwitchLanguage.minute, bottomOffset, (value) => {
+                                this.renderUpdate({ minute: value });
+                            }, true)
+                            : null
+                    }
+                </View>
+
+            </View>
+        );
+    }
+
+    renderFooter() {
+        const { titleFooter, renderFooter } = this.props;
+        return renderFooter ? renderFooter() : (
+            <View style={{ paddingHorizontal: 12, marginBottom: ifIphoneX(35, 12), marginTop: 16 }}>
+                <Button
+                    onPress={this.finish}
+                    title={titleFooter || SwitchLanguage.confirm}
+                    type="primary"
+                />
+            </View>
+
+        );
+    }
+
+    render() {
+        const { style } = this.props;
+        return (
+            <View style={[styles.view, style]}>
+                {this.renderHeader()}
+                {this.renderContent()}
+                {this.renderFooter()}
+            </View>
+        );
+    }
+}
+
+DatePicker.propTypes = {
+    selectedDate: PropTypes.any,
+    format: PropTypes.string,
+    placeholder: PropTypes.string,
+    minDate: PropTypes.string,
+    maxDate: PropTypes.string,
+    titleFooter: PropTypes.string,
+    title: PropTypes.string,
+    // titleCancel: PropTypes.string,
+    // titleConfirm: PropTypes.string,
+    labelMonth: PropTypes.string,
+    labelHour: PropTypes.string,
+    labelMinute: PropTypes.string,
+    labelDay: PropTypes.string,
+    labelYear: PropTypes.string,
+    onSelected: PropTypes.func,
+    bottomOffset: PropTypes.number,
+    renderDescription: PropTypes.any,
+    description: PropTypes.string,
+    renderFooter: PropTypes.any,
+    style: PropTypes.any,
+    rangeHour: PropTypes.array,
+    iconClosePosition: PropTypes.oneOf(['left', 'right']),
+    iconType: PropTypes.oneOf(['icon', 'text']),
+};
+
+DatePicker.defaultProps = {
+    format: 'dd/MM/YYYY',
+    placeholder: SwitchLanguage.chooseDate,
+    minDate: '1/1/1970',
+    // titleCancel: SwitchLanguage.cancel,
+    // titleConfirm: SwitchLanguage.done,
+    // labelMonth: SwitchLanguage.month,
+    // labelDay: SwitchLanguage.day,
+    // labelYear: SwitchLanguage.year,
+    // labelHour: SwitchLanguage.hour,
+    // labelMinute: SwitchLanguage.minute,
+    bottomOffset: 0,
+};
+
+export default DatePicker;
+