@momo-kits/date-picker 0.0.65-beta.9 → 0.0.66-alpha.2

package/datePicker/DatePicker.js

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

package/datePicker/DatePickerInput.js

@@ -1,136 +1,139 @@
 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,
-  Radius,
-} from '@momo-kits/core-v2';
+    IconSource,
+    TouchableOpacity,
+    Text,
+    Colors,
+    ValueUtil,
+    Image,
+} from '@momo-kits/core';
 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.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>
-  );
+    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>
+    );
 };
 
 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: 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,
-  },
+    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,
+    },
 });

package/datePicker/ListPicker.js

@@ -1,208 +1,197 @@
-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-v2';
+    Button,
+    IconSource,
+    TouchableOpacity,
+    Text,
+    Colors,
+    Image,
+    DeviceUtils,
+    SwitchLanguage,
+} from '@momo-kits/core';
 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;
-  }
-
-  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);
-    }
-  };
-
-  onEndDrag = () => {
-    if (this.refs.picker) {
-      this.refs.picker.setScrollEnabled(true);
+    constructor(props) {
+        super(props);
+        this.data = 0;
     }
-  };
 
-  onChangeValue = value => {
-    const {callback} = this.props;
-    if (typeof callback === 'function') {
-      callback(value);
-    }
-  };
+    hide = () => {
+        const { onClose, requestClose } = this.props;
+        if (requestClose && typeof requestClose === 'function') {
+            requestClose(() => {
+                if (onClose && typeof onClose === 'function') {
+                    onClose();
+                }
+            });
+        }
+    };
 
-  onPressClear = () => {
-    this.hide();
-  };
+    onBeginDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(false);
+        }
+    };
 
-  onPressChoose = () => {
-    this.onChangeValue(this.data);
-    this.hide();
-  };
+    onEndDrag = () => {
+        if (this.refs.picker) {
+            this.refs.picker.setScrollEnabled(true);
+        }
+    };
 
-  renderRight = () => (
-    <TouchableOpacity onPress={this.onPressChoose}>
-      <Text.Paragraph
-        style={{
-          fontWeight: 'bold',
-          color: Colors.pink_05,
-        }}>
-        {SwitchLanguage.save}
-      </Text.Paragraph>
-    </TouchableOpacity>
-  );
+    onChangeValue = (value) => {
+        const { callback } = this.props;
+        if (typeof callback === 'function') {
+            callback(value);
+        }
+    };
 
-  renderLeftIcon = () => (
-    <TouchableOpacity onPress={() => this.hide()}>
-      <Image
-        source={IconSource.ic_close_x_24}
-        style={{
-          width: 25,
-          height: 25,
-          tintColor: Colors.black_17,
-        }}
-      />
-    </TouchableOpacity>
-  );
+    onPressClear = () => {
+        this.hide();
+    };
 
-  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>
-    );
-  }
+    onPressChoose = () => {
+        this.onChangeValue(this.data);
+        this.hide();
+    };
 
-  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>
+    renderRight = () => (
+        <TouchableOpacity onPress={this.onPressChoose}>
+            <Text.Title style={{ fontWeight: 'bold', color: Colors.pink_05 }}>
+                {SwitchLanguage.save}
+            </Text.Title>
+        </TouchableOpacity>
     );
-  }
 
-  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}
+    renderLeftIcon = () => (
+        <TouchableOpacity onPress={() => this.hide()}>
+            <Image
+                source={IconSource.ic_close_x_24}
+                style={{ width: 25, height: 25, tintColor: Colors.black_17 }}
             />
-          </View>
-        )}
-      </View>
+        </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>
+        );
+    }
+
+    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>
+        );
+    }
 }
 
 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-v2';
+import {LinearGradient, Text, Colors, ScaleSize} from '@momo-kits/core';
 import ScrollCustom from './custom/ScrollCustom';
 import DatePickerHelper from './helper/DatePickerHelper';
 
@@ -27,7 +27,6 @@ export default class WheelPicker extends Component {
 
   componentDidMount() {
     const {value} = this.props;
-    console.log(value);
     this.scrollToPosition(value);
   }
 
@@ -187,19 +186,20 @@ export default class WheelPicker extends Component {
           flex: 1,
           height: heightContain + 40,
         }}>
-        <Text.Description2
-          weight="semibold"
+        <Text.SubTitle
+          weight="bold"
           style={{
             color: Colors.black_17,
             marginLeft: 6,
             marginBottom: 3,
           }}>
           {DatePickerHelper.capitalizeFirstLetter(preFix || '')}
-        </Text.Description2>
+        </Text.SubTitle>
         <View
           style={{
             flex: 1,
             height: heightContain,
+            //backgroundColor: 'blue',
             marginHorizontal: 6,
             paddingBottom: 20,
             borderWidth: 1,
@@ -233,6 +233,7 @@ export default class WheelPicker extends Component {
           />
 
           <ScrollCustom
+            accessibilityLabel={`Select ${preFix}/ScrollView`}
             ref={refName => {
               this.ScrollWheelPicker = refName;
             }}
@@ -260,24 +261,25 @@ 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={
+                  value === index ? `Selected/${valueItem}/${preFix}` : ''
+                }
                 style={{
                   flex: 1,
                   height: this.heightItem,
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}>
-                <Text.Action2
-                  weight={value === index ? 'bold' : 'semibold'}
+                <Text
                   style={{
-                    color: value === index ? Colors.black_17 : Colors.black_12,
-
-                    fontSize: 15,
+                    color: value === index ? Colors.black_17 : '#909090',
+                    fontWeight: value === index ? 'bold' : '700',
+                    fontSize: value === index ? ScaleSize(20) : ScaleSize(16),
                   }}>
                   {valueItem}
-                  {/* {reversePreFix ? `${valueItem} ${preFix}` : `${preFix} ${valueItem}`} */}
-                </Text.Action2>
+                </Text>
               </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,8 +57,7 @@ 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;
@@ -70,14 +69,7 @@ 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 '';
     }
@@ -85,17 +77,10 @@ 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;
@@ -134,14 +119,8 @@ 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;
@@ -163,7 +142,7 @@ export default class DatePickerHelper {
             return number;
         }
         return `0${number}`;
-    };
+    }
 
     static toString(day, month, year, hour, minute, format) {
         if (day && month && year && format) {
@@ -181,32 +160,24 @@ export default class DatePickerHelper {
         const year = parseInt(y);
         const month = parseInt(m);
         const day = parseInt(d);
-        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;
+        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);
         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;
@@ -214,18 +185,11 @@ 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)) {
@@ -237,5 +201,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.65-beta.9",
-    "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"
-}
+  "name": "@momo-kits/date-picker",
+  "version": "0.0.66-alpha.2",
+  "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"
+}