import DatePicker2 from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker2;

const onChange = (date, dateStr) => console.log(date, dateStr);
const onPanelChange = (value, mode) => console.log(value.format('YYYY-MM-DD'), mode);

function App() {
  return (
    <div className="app">
      <div>
        <DatePicker2
          // @ts-ignore
          defaultPanelValue={dayjs('2020-11')}
          onPanelChange={onPanelChange}
          onChange={onChange}/>
      </div>
      <div>
        <DatePicker2
          showTime
          // @ts-ignore
          defaultPanelValue={dayjs('2020-11')}
          onPanelChange={onPanelChange}
          onChange={onChange}/>
      </div>
      <div>
        <DatePicker2
          mode="month"
          // @ts-ignore
          defaultPanelValue={dayjs('2020-11')}
          onPanelChange={onPanelChange}
          onChange={onChange}/>
      </div>
      <div>
        <DatePicker2
          mode="year"
          // @ts-ignore
          defaultPanelValue={dayjs('2030')}
          onPanelChange={onPanelChange}
          onChange={onChange}/>
      </div>
      <div>
        <RangePicker
          // @ts-ignore
          defaultPanelValue={dayjs('2020-11')}
          onPanelChange={onPanelChange}
          onChange={onChange}/>
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('date-picker2-demo-8'));