created date time picker

src/components/basicHeader/view/basicHeaderView.js

@@ -3,21 +3,17 @@ import {
   View, Text, ActivityIndicator, SafeAreaView,
 } from 'react-native';
 import { injectIntl } from 'react-intl';
-import DatePicker from 'react-native-datepicker';
-import moment from 'moment';
 
 // Components
 import { TextButton } from '../..';
 import { IconButton } from '../../iconButton';
 import { DropdownButton } from '../../dropdownButton';
 import { TextInput } from '../../textInput';
-import { Icon } from '../../icon';
 import { DateTimePicker } from '../../dateTimePicker';
 
 // Constants
 // Styles
 import styles from './basicHeaderStyles';
-import datePickerStyles from './datePickerStyles';
 
 class BasicHeaderView extends Component {
   /* Props
@@ -30,7 +26,6 @@ class BasicHeaderView extends Component {
     super(props);
     this.state = {
       isInputVisible: false,
-      datePickerValue: '',
     };
   }
 
@@ -65,8 +60,6 @@ class BasicHeaderView extends Component {
   _handleDatePickerChange = (datePickerValue) => {
     const { handleDatePickerChange } = this.props;
 
-    this.setState({ datePickerValue });
-
     if (handleDatePickerChange) {
       handleDatePickerChange(datePickerValue);
     }
@@ -97,7 +90,7 @@ class BasicHeaderView extends Component {
       rightIconName,
       title,
     } = this.props;
-    const { isInputVisible, datePickerValue } = this.state;
+    const { isInputVisible } = this.state;
 
     return (
       <SafeAreaView style={styles.safeArea}>
@@ -192,32 +185,6 @@ class BasicHeaderView extends Component {
             <Fragment>
               {!isReply
                 && (
-                // <DatePicker
-                //   style={{ width: 50 }}
-                //   date={datePickerValue}
-                //   mode={datePickerValue ? 'time' : 'date'}
-                //   format="YYYY-MM-DD"
-                //   minDate={moment()}
-                //   maxDate="3000-06-01"
-                //   confirmBtnText="Confirm"
-                //   cancelBtnText="Cancel"
-                //   onDateChange={(_datePickerValue) => { this._handleDatePickerChange(_datePickerValue); }}
-                //   hideText
-                //   disabled={!isFormValid}
-                //   onPressDate
-                //   customStyles={{
-                //     ...datePickerStyles,
-                //   }}
-                //   iconComponent={(
-                //     <Icon
-                //       style={{ ...styles.iconButton, ...styles.scheduleIcon }}
-                //       size={20}
-                //       iconType="MaterialIcons"
-                //       name="timer"
-                //     />
-                //     )}
-                // />
-
                 <DateTimePicker type="date-time" onSubmit={this._handleDatePickerChange} disabled={!isFormValid} />
                 )
               }

src/components/dateTimePicker/view/dateTimePickerView.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import DatePicker from 'react-native-datepicker';
 import moment from 'moment';
+import { injectIntl } from 'react-intl';
 
 // Component
 import { Icon } from '../../icon';
@@ -8,7 +9,7 @@ import { Icon } from '../../icon';
 // Styles
 import styles from './dateTimePickerStyles';
 
-export default class DateTimePickerView extends PureComponent {
+class DateTimePickerView extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
@@ -38,7 +39,8 @@ export default class DateTimePickerView extends PureComponent {
     }
 
     if (date && value) {
-      onSubmit(value);
+      const formatedDateTime = new Date(`${date} ${value}`).toISOString();
+      onSubmit(formatedDateTime);
       this._initState();
     }
   }
@@ -49,17 +51,21 @@ export default class DateTimePickerView extends PureComponent {
       type,
       iconName,
       disabled,
+      intl,
     } = this.props;
     const { date } = this.state;
     let _type;
     let _format;
+    let _minDate;
 
     if (type === 'date-time') {
       _type = date ? 'time' : 'date';
       _format = date ? 'HH:MM' : 'YYYY-MM-DD';
+      _minDate = date ? null : moment();
     } else {
       _type = type;
       _format = type === 'date' ? 'YYYY-MM-DD' : 'HH:MM';
+      _minDate = type === 'date' ? moment() : null;
     }
 
     return (
@@ -68,12 +74,16 @@ export default class DateTimePickerView extends PureComponent {
         date={date}
         mode={_type}
         format={_format}
-        minDate={moment()}
-        maxDate="3000-06-01"
-        confirmBtnText="Confirm"
-        cancelBtnText="Cancel"
+        minDate={_minDate}
+        confirmBtnText={intl.formatMessage({
+          id: 'alert.confirm',
+        })}
+        cancelBtnText={intl.formatMessage({
+          id: 'alert.cancel',
+        })}
         onDateChange={_datePickerValue => this._setValue(!date ? 'date' : 'time', _datePickerValue)}
         hideText
+        is24Hour
         ref={(picker) => { this.datePicker = picker; }}
         disabled={disabled}
         customStyles={{
@@ -96,3 +106,5 @@ DateTimePickerView.defaultProps = {
   iconName: 'timer',
   type: 'date',
 };
+
+export default injectIntl(DateTimePickerView);