import React, { Component } from 'react';
import DateTimePicker from 'react-styled-date-time-picker';
import { DateTime } from 'luxon';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dateFrom: DateTime.local(),
      dateTo: DateTime.local().plus({ day: 1 }),
      open: false,
    };
  }

  setDate = (dateFrom, dateTo) =>
    this.setState(() => ({ dateFrom, dateTo }), this.togglePicker);

  togglePicker = () => this.setState(({ open }) => ({ open: !open }));

  render() {
    const { open, dateFrom, dateTo } = this.state;

    return (
      <div>
        <input
          onClick={this.togglePicker}
          value={this.state.dateFrom.toFormat('dd/MM/yyyy HH:mm')}
          readOnly
        />
        <input
          onClick={this.togglePicker}
          value={this.state.dateTo.toFormat('dd/MM/yyyy HH:mm')}
          readOnly
        />
        <DateTimePicker
          dateFrom={dateFrom}
          dateTo={dateTo}
          open={open}
          onChange={this.setDate}
          onClose={this.togglePicker}
          language="ru"
          label="Some Label"
          labelStyle={{
            fontSize: 20,
            color: 'red',
          }}
        />
      </div>
    );
  }
}

export default Test;