import React from 'react';
import { Button, Checkbox, DatePicker } from 'antd';
const CheckboxGroup = Checkbox.Group;

class AddDatePage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = { item: { title: '', fruits: [] } };
    this.options = ['Apple', 'Pear', 'Orange'];

    this.titleChange = this.titleChange.bind(this);
    this.dateChange = this.dateChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fruitsChanged = this.fruitsChanged.bind(this);
  }
  fruitsChanged(newFruits) {
    this.setState({ item: { ...this.state.item, fruits: newFruits } });
  }
  clearInput() {
    this.setState({ item: { title: '', fruits: [], date: null } });
  }
  titleChange(event) {
    this.setState({ item: { ...this.state.item, title: event.target.value } });
  }
  dateChange(date, dateString) {
    this.setState({ item: { ...this.state.item, date: dateString } });
  }

  handleKeyUp(event) {
    if (event.keyCode === 27) this.clearInput();
  }

  handleSubmit(event) {
    event.preventDefault();
    this.props.handleSubmit(this.state.item);
    this.clearInput();
  }
  render() {
    return (
      <div>
        <DatePicker value={this.state.item.date} onChange={this.dateChange} />
        <input autoFocus onChange={this.titleChange} onKeyUp={this.handleKeyUp} placeholder="Title" type="text" value={this.state.item.title} />
        <CheckboxGroup options={this.options} defaultValue={this.state.item.fruits} onChange={this.fruitsChanged} />
        <Button onClick={this.handleSubmit} >Submit</Button>
      </div>
    );
  }
}

export default AddDatePage;
import React from 'react';
import { Button, Checkbox, DatePicker } from 'antd';
const CheckboxGroup = Checkbox.Group;
import moment from 'moment';

import 'moment/locale/en-gb';
moment.locale('en-gb');

class AddDatePage extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = { item: { title: '', fruits: [] } };
    this.options = ['Apple', 'Pear', 'Orange'];

    this.titleChange = this.titleChange.bind(this);
    this.dateChange = this.dateChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fruitsChanged = this.fruitsChanged.bind(this);
  }
  fruitsChanged(newFruits) {
    this.setState({ item: { ...this.state.item, fruits: newFruits } });
  }
  clearInput() {
    this.setState({ item: { title: '', fruits: [], date: null } });
  }
  titleChange(event) {
    this.setState({ item: { ...this.state.item, title: event.target.value } });
  }
  dateChange(date, dateString) {
    this.setState({ item: { ...this.state.item, date: dateString } });
  }

  handleKeyUp(event) {
    if (event.keyCode === 27) this.clearInput();
  }

  handleSubmit(event) {
    event.preventDefault();
    this.props.handleSubmit(this.state.item);
    this.clearInput();
  }
  render() {
    const pickerValue = this.state.item.date? moment(this.state.item.date):null;
    return (
      <div>
        <DatePicker value={pickerValue} onChange={this.dateChange} />
        <input autoFocus onChange={this.titleChange} onKeyUp={this.handleKeyUp} placeholder="Title" type="text" value={this.state.item.title} />
        <CheckboxGroup options={this.options} defaultValue={this.state.item.fruits} onChange={this.fruitsChanged} />
        <Button onClick={this.handleSubmit} >Submit</Button>
      </div>
    );
  }
}

export default AddDatePage;
fix date on date picker