@momo-kits/date-picker 0.0.66-alpha.1 → 0.0.66-alpha.11

package/datePicker/DatePicker.js

@@ -11,7 +11,7 @@ import {
   SwitchLanguage,
   Spacing,
   Colors,
-} from '@momo-kits/core';
+} from '@momo-kits/core-v2';
 import WheelPicker from './WheelPicker';
 import DatePickerHelper from './helper/DatePickerHelper';
 
@@ -73,7 +73,20 @@ class DatePicker extends Component {
     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);
@@ -191,8 +204,6 @@ class DatePicker extends Component {
       this.minutes = DatePickerHelper.makeRange(0, 59, true);
     }
     this.ranged = rangeHour || DatePickerHelper.arrayRange;
-    this.startTime = startTime || DatePickerHelper.arrayRange;
-    this.endTime = endTime || DatePickerHelper.arrayRange;
   }
 
   selectedIndexDate() {
@@ -321,6 +332,7 @@ class DatePicker extends Component {
     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,
@@ -560,9 +572,9 @@ class DatePicker extends Component {
     const {description, descriptionStyle, renderDescription} = this.props;
     if (renderDescription) return renderDescription;
     return description ? (
-      <Text.Title style={[{marginBottom: Spacing.S}, descriptionStyle]}>
+      <Text.Paragraph style={[{marginBottom: Spacing.S}, descriptionStyle]}>
         {description}
-      </Text.Title>
+      </Text.Paragraph>
     ) : null;
   };
 
@@ -577,6 +589,7 @@ class DatePicker extends Component {
       labelHour,
       isRanged,
     } = this.props;
+
     if (isRanged && format === 'hh:mm') {
       return (
         <View style={styles.container}>
@@ -585,7 +598,7 @@ class DatePicker extends Component {
             {this.renderColumn(
               'HourRange1',
               this.hourRangeIndex_1,
-              this.startTime,
+              this.ranged,
               SwitchLanguage.from,
               bottomOffset,
               value => {
@@ -596,7 +609,7 @@ class DatePicker extends Component {
             {this.renderColumn(
               'HourRange2',
               this.hourRangeIndex_2,
-              this.endTime,
+              this.ranged,
               SwitchLanguage.to,
               bottomOffset,
               value => {

package/datePicker/DatePickerInput.js

@@ -1,139 +1,136 @@
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import { StyleSheet } from 'react-native';
-import { isEmpty } from 'lodash';
+import React, {useState} from 'react';
+import {StyleSheet} from 'react-native';
+import {isEmpty} from 'lodash';
 import {
-    IconSource,
-    TouchableOpacity,
-    Text,
-    Colors,
-    ValueUtil,
-    Image,
-} from '@momo-kits/core';
+  IconSource,
+  TouchableOpacity,
+  Text,
+  Colors,
+  ValueUtil,
+  Image,
+  Radius,
+} from '@momo-kits/core-v2';
 import DatePicker from './DatePicker';
 
 const DatePickerInput = ({
-    navigator,
-    defaultDate,
-    maxDate,
-    minDate,
-    format = 'dd/MM/YYYY',
-    onSelected,
-    onClose,
-    style,
-    textStyle,
-    icon,
-    iconStyle,
-    error,
-    disabled,
-    minuteArray,
-    title,
-    showRightIcon,
+  navigator,
+  defaultDate,
+  maxDate,
+  minDate,
+  format = 'dd/MM/YYYY',
+  onSelected,
+  onClose,
+  style,
+  textStyle,
+  icon,
+  iconStyle,
+  error,
+  disabled,
+  minuteArray,
+  title,
+  showRightIcon,
 }) => {
-    const [selected, setSelected] = useState(defaultDate || '');
+  const [selected, setSelected] = useState(defaultDate || '');
 
-    const onPress = () => {
-        navigator?.showBottom?.({
-            screen: DatePicker,
-            params: {
-                dragDisabled: true,
-                minDate,
-                maxDate,
-                format,
-                title,
-                selectedDate: selected,
-                onClose,
-                minuteArray,
-                onSelected: (dateSelected) => {
-                    onSelected?.(dateSelected);
-                    setSelected(dateSelected);
-                },
-            },
-        });
-    };
-    let otherStyle = {};
-    if (error) otherStyle = styles.error;
-    if (disabled) otherStyle = styles.disabled;
+  const onPress = () => {
+    navigator?.showBottom?.({
+      screen: DatePicker,
+      params: {
+        dragDisabled: true,
+        minDate,
+        maxDate,
+        format,
+        title,
+        selectedDate: selected,
+        onClose,
+        minuteArray,
+        onSelected: dateSelected => {
+          onSelected?.(dateSelected);
+          setSelected(dateSelected);
+        },
+      },
+    });
+  };
+  let otherStyle = {};
+  if (error) otherStyle = styles.error;
+  if (disabled) otherStyle = styles.disabled;
 
-    return (
-        <TouchableOpacity
-            disabled={disabled}
-            onPress={onPress}
-            style={[
-                styles.container,
-                ValueUtil.extractStyle(style),
-                otherStyle,
-            ]}>
-            <Text.Title
-                style={[
-                    styles.defaultText,
-                    ValueUtil.extractStyle(textStyle),
-                    isEmpty(selected) ? { color: Colors.black_09 } : {},
-                ]}>
-                {isEmpty(selected) ? format : selected}
-            </Text.Title>
-            {showRightIcon ? (
-                <Image
-                    source={icon || IconSource.ic_calendar}
-                    style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
-                />
-            ) : (
-                <View />
-            )}
-        </TouchableOpacity>
-    );
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.container, ValueUtil.extractStyle(style), otherStyle]}>
+      <Text.Paragraph
+        style={[
+          styles.defaultText,
+          ValueUtil.extractStyle(textStyle),
+          isEmpty(selected) ? {color: Colors.black_09} : {},
+        ]}>
+        {isEmpty(selected) ? format : selected}
+      </Text.Paragraph>
+      {showRightIcon ? (
+        <Image
+          source={icon || IconSource.ic_calendar}
+          style={[styles.icon, ValueUtil.extractStyle(iconStyle)]}
+        />
+      ) : (
+        <View />
+      )}
+    </TouchableOpacity>
+  );
 };
 
 DatePickerInput.propTypes = {
-    defaultDate: PropTypes.string,
-    format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
-    icon: PropTypes.any,
-    maxDate: PropTypes.string,
-    minDate: PropTypes.string,
-    navigator: PropTypes.object,
-    onClose: PropTypes.func,
-    onSelected: PropTypes.func,
-    iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    error: PropTypes.bool,
-    disabled: PropTypes.bool,
-    minuteArray: PropTypes.arrayOf(PropTypes.string),
-    showRightIcon: PropTypes.bool,
-    title: PropTypes.string,
+  defaultDate: PropTypes.string,
+  format: PropTypes.oneOf(['hh:mm', 'MM/YYYY', 'dd/MM', 'dd/MM/YYYY']),
+  icon: PropTypes.any,
+  maxDate: PropTypes.string,
+  minDate: PropTypes.string,
+  navigator: PropTypes.object,
+  onClose: PropTypes.func,
+  onSelected: PropTypes.func,
+  iconStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  textStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  error: PropTypes.bool,
+  disabled: PropTypes.bool,
+  minuteArray: PropTypes.arrayOf(PropTypes.string),
+  showRightIcon: PropTypes.bool,
+  title: PropTypes.string,
 };
 DatePickerInput.defaultProps = {
-    showRightIcon: true,
+  showRightIcon: true,
 };
 
 export default DatePickerInput;
 
 const styles = StyleSheet.create({
-    icon: {
-        width: 16,
-        height: 16,
-        resizeMode: 'contain',
-        tintColor: Colors.black_09,
-    },
-    container: {
-        flexDirection: 'row',
-        height: 42,
-        borderRadius: 4,
-        borderColor: Colors.black_06,
-        borderWidth: 1,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        backgroundColor: Colors.black_01,
-    },
-    error: {
-        borderColor: Colors.red_05,
-    },
-    defaultText: {
-        // fontSize: 14
-    },
-    disabled: {
-        backgroundColor: Colors.black_05,
-        borderWidth: 0,
-    },
+  icon: {
+    width: 16,
+    height: 16,
+    resizeMode: 'contain',
+    tintColor: Colors.black_09,
+  },
+  container: {
+    flexDirection: 'row',
+    height: 42,
+    borderRadius: Radius.S,
+    borderColor: Colors.black_06,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    backgroundColor: Colors.black_01,
+  },
+  error: {
+    borderColor: Colors.red_03,
+  },
+  defaultText: {
+    // fontSize: 14
+  },
+  disabled: {
+    backgroundColor: Colors.black_05,
+    borderWidth: 0,
+  },
 });

package/datePicker/ListPicker.js

@@ -1,197 +1,208 @@
-import React, { Component } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import React, {Component} from 'react';
+import {Dimensions, StyleSheet, View} from 'react-native';
 import {
-    Button,
-    IconSource,
-    TouchableOpacity,
-    Text,
-    Colors,
-    Image,
-    DeviceUtils,
-    SwitchLanguage,
-} from '@momo-kits/core';
+  Button,
+  IconSource,
+  TouchableOpacity,
+  Text,
+  Colors,
+  Image,
+  DeviceUtils,
+  SwitchLanguage,
+} from '@momo-kits/core-v2';
 import WheelPicker from './WheelPicker';
 
-const { isIphoneX } = DeviceUtils;
+const {isIphoneX} = DeviceUtils;
 
 const widthScreen = Dimensions.get('window').width;
 
 export default class ListPicker extends Component {
-    constructor(props) {
-        super(props);
-        this.data = 0;
-    }
+  constructor(props) {
+    super(props);
+    this.data = 0;
+  }
 
-    hide = () => {
-        const { onClose, requestClose } = this.props;
-        if (requestClose && typeof requestClose === 'function') {
-            requestClose(() => {
-                if (onClose && typeof onClose === 'function') {
-                    onClose();
-                }
-            });
+  hide = () => {
+    const {onClose, requestClose} = this.props;
+    if (requestClose && typeof requestClose === 'function') {
+      requestClose(() => {
+        if (onClose && typeof onClose === 'function') {
+          onClose();
         }
-    };
+      });
+    }
+  };
 
-    onBeginDrag = () => {
-        if (this.refs.picker) {
-            this.refs.picker.setScrollEnabled(false);
-        }
-    };
+  onBeginDrag = () => {
+    if (this.refs.picker) {
+      this.refs.picker.setScrollEnabled(false);
+    }
+  };
 
-    onEndDrag = () => {
-        if (this.refs.picker) {
-            this.refs.picker.setScrollEnabled(true);
-        }
-    };
+  onEndDrag = () => {
+    if (this.refs.picker) {
+      this.refs.picker.setScrollEnabled(true);
+    }
+  };
 
-    onChangeValue = (value) => {
-        const { callback } = this.props;
-        if (typeof callback === 'function') {
-            callback(value);
-        }
-    };
+  onChangeValue = value => {
+    const {callback} = this.props;
+    if (typeof callback === 'function') {
+      callback(value);
+    }
+  };
 
-    onPressClear = () => {
-        this.hide();
-    };
+  onPressClear = () => {
+    this.hide();
+  };
 
-    onPressChoose = () => {
-        this.onChangeValue(this.data);
-        this.hide();
-    };
+  onPressChoose = () => {
+    this.onChangeValue(this.data);
+    this.hide();
+  };
 
-    renderRight = () => (
-        <TouchableOpacity onPress={this.onPressChoose}>
-            <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>
-                {SwitchLanguage.save}
-            </Text.Title>
-        </TouchableOpacity>
-    );
+  renderRight = () => (
+    <TouchableOpacity onPress={this.onPressChoose}>
+      <Text.Paragraph
+        style={{
+          fontWeight: 'bold',
+          color: Colors.pink_05,
+        }}>
+        {SwitchLanguage.save}
+      </Text.Paragraph>
+    </TouchableOpacity>
+  );
 
-    renderLeftIcon = () => (
-        <TouchableOpacity onPress={() => this.hide()}>
-            <Image
-                source={IconSource.ic_close_x_24}
-                style={{ width: 25, height: 25, tintColor: Colors.black_17 }}
-            />
-        </TouchableOpacity>
-    );
+  renderLeftIcon = () => (
+    <TouchableOpacity onPress={() => this.hide()}>
+      <Image
+        source={IconSource.ic_close_x_24}
+        style={{
+          width: 25,
+          height: 25,
+          tintColor: Colors.black_17,
+        }}
+      />
+    </TouchableOpacity>
+  );
 
-    renderHeader() {
-        const { title = '' } = this.props;
-        return (
-            <View style={styles.header}>
-                {this.renderLeftIcon()}
-                <Text style={styles.title}>{title}</Text>
-                {this.props.typeStyle === 'aboveAction' ? (
-                    this.renderRight()
-                ) : (
-                    <View style={{ width: 25 }} />
-                )}
-            </View>
-        );
-    }
+  renderHeader() {
+    const {title = ''} = this.props;
+    return (
+      <View style={styles.header}>
+        {this.renderLeftIcon()}
+        <Text style={styles.title}>{title}</Text>
+        {this.props.typeStyle === 'aboveAction' ? (
+          this.renderRight()
+        ) : (
+          <View style={{width: 25}} />
+        )}
+      </View>
+    );
+  }
 
-    renderContent() {
-        const { arrData = [], stylePicker, initValue } = this.props;
-        return (
-            <View style={styles.contentStyle}>
-                <WheelPicker
-                    stylePicker={stylePicker}
-                    bottomOffset={1}
-                    value={initValue}
-                    key="picker"
-                    ref="picker"
-                    arrayValue={arrData}
-                    onBeginDrag={this.onBeginDrag}
-                    onEndDrag={this.onEndDrag}
-                    onValueChange={(value) => {
-                        this.data = value;
-                    }}
-                />
-            </View>
-        );
-    }
+  renderContent() {
+    const {arrData = [], stylePicker, initValue} = this.props;
+    return (
+      <View style={styles.contentStyle}>
+        <WheelPicker
+          stylePicker={stylePicker}
+          bottomOffset={1}
+          value={initValue}
+          key="picker"
+          ref="picker"
+          arrayValue={arrData}
+          onBeginDrag={this.onBeginDrag}
+          onEndDrag={this.onEndDrag}
+          onValueChange={value => {
+            this.data = value;
+          }}
+        />
+      </View>
+    );
+  }
 
-    render() {
-        return (
-            <View style={styles.view}>
-                {this.renderHeader()}
-                {this.renderContent()}
-                {this.props.typeStyle === 'aboveAction' ? null : (
-                    <View style={styles.btnView}>
-                        <Button
-                            style={{ flex: 1 }}
-                            title={SwitchLanguage.cancel}
-                            buttonStyle={{
-                                backgroundColor: Colors.second_text_color,
-                            }}
-                            onPress={this.onPressClear}
-                        />
-                        <Button
-                            style={{ flex: 1, marginLeft: 15 }}
-                            title={SwitchLanguage.choose}
-                            type="primary"
-                            onPress={this.onPressChoose}
-                        />
-                    </View>
-                )}
-            </View>
-        );
-    }
+  render() {
+    return (
+      <View style={styles.view}>
+        {this.renderHeader()}
+        {this.renderContent()}
+        {this.props.typeStyle === 'aboveAction' ? null : (
+          <View style={styles.btnView}>
+            <Button
+              style={{flex: 1}}
+              title={SwitchLanguage.cancel}
+              buttonStyle={{
+                backgroundColor: Colors.second_text_color,
+              }}
+              onPress={this.onPressClear}
+            />
+            <Button
+              style={{
+                flex: 1,
+                marginLeft: 15,
+              }}
+              title={SwitchLanguage.choose}
+              type="primary"
+              onPress={this.onPressChoose}
+            />
+          </View>
+        )}
+      </View>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        width: widthScreen,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    contentStyle: {
-        height: 230,
-    },
-    column: {
-        borderWidth: 2,
-        borderColor: 'red',
-    },
-    header: {
-        flexDirection: 'row',
-        height: 50,
-        width: widthScreen,
-        paddingHorizontal: 16,
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: '#fff',
-        borderBottomWidth: 1,
-        borderColor: '#DADADA',
-    },
-    view: {
-        backgroundColor: 'white',
-        paddingBottom: 10 + (isIphoneX() ? 10 : 0),
-    },
-    title: {
-        fontWeight: 'bold',
-        color: Colors.black_17,
-        flex: 1,
-        fontSize: 16,
-        textAlign: 'center',
-    },
-    titleCancel: {
-        fontSize: 17,
-        color: '#4A90E2',
-    },
-    titleConfirm: {
-        fontSize: 17,
-        color: '#4A90E2',
-        textAlign: 'right',
-    },
-    btnView: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginHorizontal: 15,
-        height: 60,
-        alignItems: 'center',
-    },
+  container: {
+    flexDirection: 'row',
+    width: widthScreen,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentStyle: {
+    height: 230,
+  },
+  column: {
+    borderWidth: 2,
+    borderColor: 'red',
+  },
+  header: {
+    flexDirection: 'row',
+    height: 50,
+    width: widthScreen,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: '#fff',
+    borderBottomWidth: 1,
+    borderColor: '#DADADA',
+  },
+  view: {
+    backgroundColor: 'white',
+    paddingBottom: 10 + (isIphoneX() ? 10 : 0),
+  },
+  title: {
+    fontWeight: 'bold',
+    color: Colors.black_17,
+    flex: 1,
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  titleCancel: {
+    fontSize: 17,
+    color: '#4A90E2',
+  },
+  titleConfirm: {
+    fontSize: 17,
+    color: '#4A90E2',
+    textAlign: 'right',
+  },
+  btnView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginHorizontal: 15,
+    height: 60,
+    alignItems: 'center',
+  },
 });

package/datePicker/WheelPicker.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {Dimensions, View} from 'react-native';
-import {LinearGradient, Text, Colors, ScaleSize} from '@momo-kits/core';
+import {LinearGradient, Text, Colors, ScaleSize} from '@momo-kits/core-v2';
 import ScrollCustom from './custom/ScrollCustom';
 import DatePickerHelper from './helper/DatePickerHelper';
 
@@ -27,6 +27,7 @@ export default class WheelPicker extends Component {
 
   componentDidMount() {
     const {value} = this.props;
+    console.log(value);
     this.scrollToPosition(value);
   }
 
@@ -186,20 +187,19 @@ export default class WheelPicker extends Component {
           flex: 1,
           height: heightContain + 40,
         }}>
-        <Text.SubTitle
-          weight="bold"
+        <Text.Description2
+          weight="semibold"
           style={{
             color: Colors.black_17,
             marginLeft: 6,
             marginBottom: 3,
           }}>
           {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
-        </Text.SubTitle>
+        </Text.Description2>
         <View
           style={{
             flex: 1,
             height: heightContain,
-            //backgroundColor: 'blue',
             marginHorizontal: 6,
             paddingBottom: 20,
             borderWidth: 1,
@@ -233,7 +233,6 @@ export default class WheelPicker extends Component {
           />
 
           <ScrollCustom
-            accessibilityLabel={`Select ${preFix}/ScrollView`}
             ref={refName => {
               this.ScrollWheelPicker = refName;
             }}
@@ -261,24 +260,24 @@ export default class WheelPicker extends Component {
             {this.renderHiddenItem(this.numberItem, this.heightItem)}
             {items.map((valueItem, index) => (
               <View
-                // eslint-disable-next-line react/no-array-index-key=
+                // eslint-disable-next-line react/no-array-index-key
                 key={index}
-                accessibilityLabel={`Selected/${valueItem}/${preFix}`}
-                access
                 style={{
                   flex: 1,
                   height: this.heightItem,
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}>
-                <Text
+                <Text.Action2
+                  weight={value === index ? 'bold' : 'semibold'}
                   style={{
-                    color: value === index ? Colors.black_17 : '#909090',
-                    fontWeight: value === index ? 'bold' : '700',
-                    fontSize: value === index ? ScaleSize(20) : ScaleSize(16),
+                    color: value === index ? Colors.black_17 : Colors.black_12,
+
+                    fontSize: 15,
                   }}>
                   {valueItem}
-                </Text>
+                  {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
+                </Text.Action2>
               </View>
             ))}
             {this.renderHiddenItem(

package/datePicker/helper/DatePickerHelper.js

@@ -49,7 +49,7 @@ export default class DatePickerHelper {
         '22:00',
         '22:30',
         '23:00',
-        '23:30'
+        '23:30',
     ];
 
     static makeRange(min, max, isDouble) {
@@ -57,7 +57,8 @@ export default class DatePickerHelper {
         // eslint-disable-next-line no-plusplus
         for (let i = min; i <= max; i++) {
             const string = String(i);
-            const value = string.length === 1 && isDouble ? `0${string}` : string;
+            const value =
+                string.length === 1 && isDouble ? `0${string}` : string;
             array.push(value);
         }
         return array;
@@ -69,7 +70,14 @@ export default class DatePickerHelper {
             const day = current.getDate().toString();
             const month = (current.getMonth() + 1).toString();
             const year = current.getFullYear().toString();
-            return DatePickerHelper.toString(day, month, year, null, null, format);
+            return DatePickerHelper.toString(
+                day,
+                month,
+                year,
+                null,
+                null,
+                format,
+            );
         }
         return '';
     }
@@ -77,10 +85,17 @@ export default class DatePickerHelper {
     static formatDate(date, format) {
         if (date && format) {
             const {
-                year, month, day, hour, minute, second = 0
+                year,
+                month,
+                day,
+                hour,
+                minute,
+                second = 0,
             } = DatePickerHelper.getDateTimeFromFormat(date, format);
-            if (DatePickerHelper.checkValidDate(year, month, day)
-                && DatePickerHelper.checkValidTime(hour, minute, second)) {
+            if (
+                DatePickerHelper.checkValidDate(year, month, day) &&
+                DatePickerHelper.checkValidTime(hour, minute, second)
+            ) {
                 return new Date(year, month, day, hour, minute, second);
             }
             return null;
@@ -119,8 +134,14 @@ export default class DatePickerHelper {
 
         const today = new Date();
 
-        const year = yearIndex > -1 ? dateItems?.[yearIndex] : today.getFullYear();
-        const month = monthIndex > -1 ? dateItems?.[monthIndex] - 1 : today.getMonth() === 0 ? 1 : today.getMonth() - 1;
+        const year =
+            yearIndex > -1 ? dateItems?.[yearIndex] : today.getFullYear();
+        const month =
+            monthIndex > -1
+                ? dateItems?.[monthIndex] - 1
+                : today.getMonth() === 0
+                ? 1
+                : today.getMonth() - 1;
         const day = dayIndex > -1 ? dateItems?.[dayIndex] : today.getDate();
 
         const hour = hourIndex > -1 ? dateItems[hourIndex] : 0;
@@ -142,7 +163,7 @@ export default class DatePickerHelper {
             return number;
         }
         return `0${number}`;
-    }
+    };
 
     static toString(day, month, year, hour, minute, format) {
         if (day && month && year && format) {
@@ -160,24 +181,32 @@ export default class DatePickerHelper {
         const year = parseInt(y);
         const month = parseInt(m);
         const day = parseInt(d);
-        const months31 = [0, 2, 4, 6, 7, 9, 11];
-        const months30 = [3, 5, 8, 10];
-        const months28 = [1];
-        const isLeap = ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
+        const months31 = [1, 3, 5, 7, 8, 10, 12];
+        const months30 = [4, 6, 9, 11];
+        const months28 = [2];
+        const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
         if (year != null && month != null && day != null) {
             const isDayValid = day > 0;
-            const isMonthValid = (months31.indexOf(parseInt(month)) != -1 && day <= 31)
-            || (months30.indexOf(month) != -1 && day <= 30)
-            || (months30.indexOf(month) != -1 && day <= 31)
-            || (months28.indexOf(month) != -1 && day <= 28)
-            || (months28.indexOf(month) != -1 && day <= 29 && isLeap);
+            const isMonthValid =
+                (months31.indexOf(parseInt(month)) != -1 && day <= 31) ||
+                (months30.indexOf(month) != -1 && day <= 30) ||
+                (months30.indexOf(month) != -1 && day <= 31) ||
+                (months28.indexOf(month) != -1 && day <= 28) ||
+                (months28.indexOf(month) != -1 && day <= 29 && isLeap);
             return isDayValid && isMonthValid;
         }
         return false;
     }
 
     static checkValidTime(hour, minute, second) {
-        if ((hour >= 0 && hour < 24) && (minute >= 0 && minute < 60) && (second >= 0 && second < 60)) {
+        if (
+            hour >= 0 &&
+            hour < 24 &&
+            minute >= 0 &&
+            minute < 60 &&
+            second >= 0 &&
+            second < 60
+        ) {
             return true;
         }
         return false;
@@ -185,11 +214,18 @@ export default class DatePickerHelper {
 
     static calculateDateSinceYearAgo(yearAgo) {
         let nowDate = new Date();
-        nowDate = new Date(nowDate.getFullYear() - yearAgo, nowDate.getMonth(), nowDate.getDate());
+        nowDate = new Date(
+            nowDate.getFullYear() - yearAgo,
+            nowDate.getMonth(),
+            nowDate.getDate(),
+        );
         return nowDate;
     }
 
-    static getMaxDate(month = new Date().getMonth(), year = new Date().getFullYear()) {
+    static getMaxDate(
+        month = new Date().getMonth(),
+        year = new Date().getFullYear(),
+    ) {
         const monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
         // Adjust for leap years
         if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) {
@@ -201,5 +237,5 @@ export default class DatePickerHelper {
 
     static capitalizeFirstLetter(string) {
         return string.charAt(0).toUpperCase() + string.slice(1);
-      }
+    }
 }

package/package.json

@@ -1,16 +1,16 @@
 {
-  "name": "@momo-kits/date-picker",
-  "version": "0.0.66-alpha.1",
-  "private": false,
-  "main": "index.js",
-  "dependencies": {},
-  "peerDependencies": {
-    "@momo-kits/core": ">=0.0.5-beta",
-    "lodash": "^4.17.15",
-    "prop-types": "^15.7.2",
-    "react": "16.9.0",
-    "react-native": ">=0.55"
-  },
-  "devDependencies": {},
-  "license": "MoMo"
-}
+    "name": "@momo-kits/date-picker",
+    "version": "0.0.66-alpha.11",
+    "private": false,
+    "main": "index.js",
+    "dependencies": {},
+    "peerDependencies": {
+        "@momo-kits/core-v2": ">=0.0.5-beta",
+        "lodash": "^4.17.15",
+        "prop-types": "^15.7.2",
+        "react": "16.9.0",
+        "react-native": ">=0.55"
+    },
+    "devDependencies": {},
+    "license": "MoMo"
+}