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 (React.createElement("div", { className: "app" },
        React.createElement("div", null,
            React.createElement(DatePicker2, { defaultValue: defaultVal, format: "YYYY/MM/DD" })),
        React.createElement("div", null,
            React.createElement(DatePicker2, { defaultValue: defaultVal, showTime: true, format: "YYYY/MM/DD HH:mm:ss" })),
        React.createElement("div", null,
            React.createElement(DatePicker2, { defaultValue: defaultVal, format: "YYYY/MM/DD HH:mm", showTime: true, timePanelProps: { format: 'HH:mm' } })),
        React.createElement("div", null,
            React.createElement(RangePicker, { defaultValue: defaultRangeVal, format: "YYYY/MM/DD" })),
        React.createElement("div", null,
            React.createElement(RangePicker, { defaultValue: defaultRangeVal, format: "YYYY/MM/DD HH:mm:ss", showTime: true })),
        React.createElement("div", null,
            React.createElement(DatePicker2, { defaultValue: defaultVal, format: customizeFormatter })),
        React.createElement("br", null),
        React.createElement("br", null),
        React.createElement("div", { style: { backgroundColor: '#f3f3f3', padding: '10px' } },
            React.createElement("div", null,
                React.createElement(DatePicker2, { theme: 'grey', defaultValue: defaultVal, format: "YYYY/MM/DD" })),
            React.createElement("br", null),
            React.createElement("div", null,
                React.createElement(DatePicker2, { theme: 'grey', defaultValue: defaultVal, showTime: true, format: "YYYY/MM/DD HH:mm:ss" })),
            React.createElement("br", null),
            React.createElement("div", null,
                React.createElement(DatePicker2, { theme: 'grey', defaultValue: defaultVal, format: "YYYY/MM/DD HH:mm", showTime: true, timePanelProps: { format: 'HH:mm' } })),
            React.createElement("br", null),
            React.createElement("div", null,
                React.createElement(RangePicker, { theme: 'grey', defaultValue: defaultRangeVal, format: "YYYY/MM/DD" })),
            React.createElement("br", null),
            React.createElement("div", null,
                React.createElement(RangePicker, { theme: 'grey', defaultValue: defaultRangeVal, format: "YYYY/MM/DD HH:mm:ss", showTime: true })),
            React.createElement("br", null),
            React.createElement("div", null,
                React.createElement(DatePicker2, { theme: 'grey', defaultValue: defaultVal, format: customizeFormatter })))));
}
ReactDOM.render(React.createElement(App, null), document.getElementById('date-picker2-demo-5'));
