import * as React from 'react';
import * as ReactDOM from 'react-dom';

import {
  DateTimePicker,
  DateTimePickerChangeEvent,
} from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';

const App = () => {
  const [date, setDate] = React.useState(new Date());

  const handleChange = (event: DateTimePickerChangeEvent) => {
    setDate(event.value);
  };

  const handleClick = () => {
    setDate(new Date('invaild!'));
  };

  return (
    <React.Fragment>
      <div className="example-wrapper">
        <p>
          (use Alt+<code>↓</code> to open the date-time selector, <code>←</code>{' '}
          and <code>→</code> to navigate, <code>↑</code> to increment and{' '}
          <code>↓</code> to decrement the value)
        </p>
        <DateTimePicker onChange={handleChange} value={date} />
      </div>
      <Button onClick={handleClick}>
        Click me, then the calendar, to break the DateTimePicker.
      </Button>
      <div>{date?.toString()}</div>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));