import './demo5.css';
import DatePicker2 from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const { RangePicker } = DatePicker2;

const defaultVal = '2020-02-02';
const defaultRangeVal = [ '2020-01-01', '2020-02-02' ];
function customizeFormatter(v) {
  return `DATE: ${v.format('YYYY/MM/DD')}`;
}

function App() {
  return (
    <div className="app">
      <div><DatePicker2 defaultValue={defaultVal} format="YYYY/MM/DD"/></div>
      <div><DatePicker2 defaultValue={defaultVal} showTime format="YYYY/MM/DD HH:mm:ss"/></div>
      <div><DatePicker2 defaultValue={defaultVal} format="YYYY/MM/DD HH:mm" showTime timePanelProps={{ format: 'HH:mm' }}/></div>
      <div><RangePicker defaultValue={defaultRangeVal} format="YYYY/MM/DD" /></div>
      <div><RangePicker defaultValue={defaultRangeVal} format="YYYY/MM/DD HH:mm:ss" showTime/></div>
      <div><DatePicker2 defaultValue={defaultVal} format={customizeFormatter}/></div>
      <br/>
      <br/>
      <div style={{ backgroundColor: '#f3f3f3', padding: '10px' }}>
        <div><DatePicker2 theme='grey' defaultValue={defaultVal} format="YYYY/MM/DD"/></div><br/>
        <div><DatePicker2 theme='grey' defaultValue={defaultVal} showTime format="YYYY/MM/DD HH:mm:ss"/></div><br/>
        <div><DatePicker2 theme='grey' defaultValue={defaultVal} format="YYYY/MM/DD HH:mm" showTime timePanelProps={{ format: 'HH:mm' }}/></div><br/>
        <div><RangePicker theme='grey' defaultValue={defaultRangeVal} format="YYYY/MM/DD" /></div><br/>
        <div><RangePicker theme='grey' defaultValue={defaultRangeVal} format="YYYY/MM/DD HH:mm:ss" showTime/></div><br/>
        <div><DatePicker2 theme='grey' defaultValue={defaultVal} format={customizeFormatter}/></div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('date-picker2-demo-5'));