react-native-1app/__lib/DatePicker.js

'use strict';

import React, { Component } from 'react';
import Icon from './Icon';
import { StyleSheet, View, Switch, ActivityIndicator, TouchableOpacity, Text } from 'react-native';

// var pt =require('moment/locale/pt-br');
var moment = require("moment");
// moment.locale('pt-br');

import DateTimePicker from 'react-native-modal-datetime-picker';

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = { value: props.value };
    if (this.state.value) {
      this.state.date = this.getDate(this.state.value);
    }
    this.state.br = this.getDateBr(this.state.date);
  }
  getDate(value) {
    if (this.props.time == "timeOnly") {
      return new Date(moment(moment().format("DD/MM/YYYY") + " " + (value ? value : "00:00"), "DD/MM/YYYY HH:mm").toJSON());
    } else {
      return new Date(value);
    }
  }
  getDateBr(date) {
    if (!date) {
      return "";
    }
    var br = moment(date).format("DD/MM/YYYY");
    if (this.props.time == "timeOnly") {
      br = moment(date).format("HH:mm");;
    } else if (this.props.time) {
      br = moment(date).format("DD/MM/YYYY HH:mm");;
    }
    // alert(br)
    return br;
  }

  showDateTimePicker() {
    this.setState({ isDateTimePickerVisible: true });
  }

  hideDateTimePicker() {
    this.setState({ isDateTimePickerVisible: false });
  }

  handleDatePicked(date) {
    // alert(date)
    var value = moment(date).toJSON();
    var br = this.getDateBr(date);
    //
    try {
      if (this.props.time == "timeOnly") {
        value = br;
      }
      this.setState({ value: value, isDateTimePickerVisible: false, br: br });

      if (this.props.onChange) {
        this.props.onChange(value, br);
      }
      if (this.props.onChangeText) {
        this.props.onChange(value, br);
      }
    } catch (e) {
      console.log(e);
      alert(e);
    }

    // this._hideDateTimePicker()
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps != this.props) {
      nextState.value = nextProps.value;
      if (nextState.value) {
        nextState.date = this.getDate(nextState.value);
      } else {
        nextState.date = null;
      }
      nextState.br = this.getDateBr(nextState.date);
    }
    return true;
  }

  render() {
    var style = {

      flex: 1,
      alignSelf: "stretch",
      borderBottomColor: "#777",
      borderTopWidth: 0,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderBottomWidth: 1,
      borderStyle: "solid"
    };

    if (this.props.style) {
      var lista = [];
      if (Array === this.props.style.constructor) {
        lista = this.props.style;
      } else {
        lista.push(this.props.style);
      }
      for (var a = 0; a < lista.length; a++) {
        var st = lista[a];
        if (typeof st === "object" && st !== null) {
          //nada
        } else if (st) {
          st = StyleSheet.flatten(this.props.style);
        } else if (!st) {
          continue;
        }
        var tags = Object.keys(st);
        for (var i = 0; i < tags.length; i++) {
          style[tags[i]] = st[tags[i]];
        }
      }
    }
    var color = style.color ? style.color : "#000";
    delete style.color;
    // this.state.br = this.getDateBr(  this.state.date);
    // console.log(this.state);
    if (this.props.decorationColor) {
      style.borderBottomColor = this.props.decorationColor;
    }
    if (this.props.display) {
      this.state.br = this.props.display;
    }
    return React.createElement(
      View,
      { style: [style, { flexDirection: "row" }] },
      React.createElement(
        TouchableOpacity,
        { onPress: () => {
            this.showDateTimePicker();
          }, style: {
            padding: 5,
            paddingTop: 10,
            paddingLeft: 0,
            minHeight: 55,
            flexDirection: "column",
            flex: 1,
            alignSelf: "stretch"
            // backgroundColor:"#ccc"
          } },
        this.props.label ? React.createElement(
          Text,
          { style: [{
              fontSize: 11,
              padding: 0,
              margin: 0,
              marginBottom: 3,
              color: style.borderBottomColor
            }] },
          this.props.label
        ) : null,
        React.createElement(
          Text,
          { style: { color: color, fontSize: style.fontSize ? style.fontSize : 15, marginTop: 4 } },
          this.state.br ? this.state.br : "-"
        )
      ),
      !this.props.disabledClear ? React.createElement(
        TouchableOpacity,
        { style: {
            "alignSelf": "stretch",
            "justifyContent": "center",
            "alignItems": "center",
            marginBottom: -10,

            "height": 50,
            "width": 50
          }, onPress: () => {
            this.setState({ value: "", isDateTimePickerVisible: false, br: "" });
            try {
              if (this.props.onChange) {
                this.props.onChange("", "");
              }
              if (this.props.onChangeText) {
                this.props.onChange("", "");
              }
            } catch (e) {
              console.log(e);
            }
          } },
        React.createElement(Icon, { style: {
            "fontSize": 20,
            "color": "#000"
          }, fromFontFamily: "Material Design Icons", icon: "close" })
      ) : null,
      React.createElement(DateTimePicker, {
        date: this.state.date ? this.state.date : new Date(),
        is24Hour: true,
        datePickerModeAndroid: this.props.datePickerModeAndroid ? this.props.datePickerModeAndroid : "calendar",
        mode: this.props.time == "timeOnly" ? "time" : this.props.time ? "datetime" : "date",
        isVisible: this.state.isDateTimePickerVisible,
        onConfirm: date => {
          this.handleDatePicked(date);
        },
        onCancel: () => {
          this.hideDateTimePicker();
        }
      })
    );
  }
}