import './demo11.css';
import Button from '../../button';
import DatePicker from '..';
import Field from '../../field';
import React from 'react';
import ReactDOM from 'react-dom';
const { RangePicker, YearPicker, MonthPicker } = DatePicker;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
        this.printData = () => {
            this.field.validate((err, values) => {
                if (err) {
                    console.error('Error: ', err);
                    return;
                }
                // @ts-ignore
                console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));
                // @ts-ignore
                console.log('monthpicker: %s', values.month.format('YYYY-MM'));
                // @ts-ignore
                console.log('yearpicker: %s', values.year.format('YYYY'));
                // @ts-ignore
                const range = values.range;
                console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));
            });
        };
        this.printError = name => {
            if (this.field.getError(name)) {
                return (React.createElement("span", { className: "error-msg" }, this.field.getError(name).join(',')));
            }
        };
    }
    render() {
        const init = this.field.init;
        return (React.createElement("div", null,
            React.createElement(DatePicker, Object.assign({}, init('date', {
                rules: [
                    {
                        required: true,
                        message: '请选择日期',
                    },
                ],
            }))),
            this.printError('date'),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(MonthPicker, Object.assign({}, init('month', {
                rules: [
                    {
                        required: true,
                        message: '请选择月份',
                    },
                ],
            }))),
            this.printError('month'),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(YearPicker, Object.assign({}, init('year', {
                rules: [
                    {
                        required: true,
                        message: '请选择年份',
                    },
                ],
            }))),
            this.printError('year'),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(RangePicker, Object.assign({}, init('range', {
                rules: [
                    {
                        required: true,
                        message: '请选择日期范围',
                    },
                ],
            }))),
            this.printError('range'),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Button, { onClick: this.printData }, "Print to Console")));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('date-picker-demo-11'));
