date_picker.native.js

import React, { Component } from 'react';
import { View } from 'core';
import { IcoCalendar } from 'icons';
import NativeDatePicker from 'react-native-datepicker';
import { theme } from 'constants';
import { lang } from 'lang';

export class DatePicker extends Component {
  constructor(props) {
    super(props);
    const date = props.value ? new Date(props.value) : new Date();
    this.state = { date, today: new Date() };
  }

  render() {
    const { onChangeDate } = this.props;
    return (
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          width: 180,
          borderStyle: 'solid',
          backgroundColor: 'white',
          borderWidth: 1,
          borderRadius: 10,
          borderColor: theme.gray_color_lighten(),
          height: 50
        }}
      >
        <NativeDatePicker
          customStyles={{
            dateInput: { borderColor: 'white', borderRadius: 10 },
            dateIcon: {
              display: 'none'
            }
          }}
          date={this.state.date}
          mode="datetime"
          placeholder={lang.SELECT_DATE}
          confirmBtnText={lang.CONFIRM}
          cancelBtnText={lang.CANCEL}
          minDate={this.state.today}
          onDateChange={dateString => {
            this.setState({ date: dateString });
            let d = new Date(dateString);
            let timestamp = this.prepareDate(dateString).getTime();
            onChangeDate(timestamp);
          }}
        />
        <IcoCalendar />
      </View>
    );
  }
  prepareDate = dateString => {
    const newDate = new Date();
    const split = dateString.split(' ');
    const sDate = split[0].split('-').map(e => parseInt(e, 10));
    newDate.setFullYear(sDate[0], sDate[1] - 1, sDate[2]);
    const sTime = split[1].split(':').map(e => parseInt(e, 10));
    newDate.setHours(sTime[0], sTime[1], 0);
    return newDate;
  };
}