import './demo1.css';
import DatePicker2 from '..';
import React from 'react';
import ReactDOM from 'react-dom';

const { MonthPicker, YearPicker, WeekPicker, QuarterPicker } = DatePicker2;

const onChange = (date, dateStr) => console.log(date, dateStr);

function App() {
  return (
    <div className="app">
      <div><DatePicker2 onChange={onChange}/></div>
      <div><MonthPicker onChange={onChange} /></div>
      <div><YearPicker onChange={onChange} /></div>
      <div><WeekPicker onChange={onChange} /></div>
      <div><QuarterPicker onChange={onChange} /></div>
      <div style={{ backgroundColor: '#f3f3f3', padding: '10px' }}>
        <div><DatePicker2 theme='grey' onChange={onChange}/></div>
        <br/>
        <div><MonthPicker theme='grey' onChange={onChange} /></div>
        <br/>
        <div><YearPicker theme='grey' onChange={onChange} /></div>
        <br/>
        <div><WeekPicker theme='grey' onChange={onChange} /></div>
        <br/>
        <div><QuarterPicker theme='grey' onChange={onChange} /></div>
      </div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('date-picker2-demo-1'));