import React = require("react");
import ReactDOM = require("react-dom");
import {DateInputComponent, DateFormats } from "react-controlled-date-input";

class Container extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      year: "",
      month: "",
      date: ""
    };
  }
  onChange(year, month, date) {
    this.setState({ year, month, date });
  }
  render() {
    let {year, month, date} = this.state;
    if(!!!year) {year = "YYYY"};
    if(!!!month) {month = "MM"};
    if(!!!date) {date = "DD"};

    return (
      <div>
        <DateInputComponent
          onChange={this.onChange.bind(this)}
          dateFormat={DateFormats.DDMMYYYY}/>
        <label>Date <h3>{`${date}/${month}/${year}`}</h3></label>
      </div>
    );
  }
}

ReactDOM.render(
  <Container/>,
  document.getElementById('root')
);