define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "@uifabric/date-time", "./DatePicker.Examples.scss"], function (require, exports, tslib_1, React, Button_1, date_time_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DatePickerInputExample = /** @class */ (function (_super) {
        tslib_1.__extends(DatePickerInputExample, _super);
        function DatePickerInputExample(props) {
            var _this = _super.call(this, props) || this;
            _this.datePicker = React.createRef();
            _this._onSelectDate = function (date) {
                _this.setState({ value: date });
            };
            _this._onClick = function () {
                var _a;
                (_a = _this.datePicker.current) === null || _a === void 0 ? void 0 : _a.reset();
                _this.setState({ value: null });
            };
            _this.state = {
                firstDayOfWeek: date_time_1.DayOfWeek.Sunday,
                value: null,
            };
            return _this;
        }
        DatePickerInputExample.prototype.render = function () {
            var _a = this.state, firstDayOfWeek = _a.firstDayOfWeek, value = _a.value;
            var desc = 'This field is required. One of the support input formats is year dash month dash day.';
            return (React.createElement("div", { className: "docs-DatePickerExample" },
                React.createElement("p", null, "Text input allowed by default when use keyboard navigation. Mouse click the TextField will popup DatePicker, click the TextField again will dismiss the DatePicker and allow text input."),
                React.createElement(date_time_1.DatePicker, { label: "Start date", isRequired: false, allowTextInput: true, ariaLabel: desc, firstDayOfWeek: firstDayOfWeek, strings: date_time_1.defaultDayPickerStrings, value: value, onSelectDate: this._onSelectDate, componentRef: this.datePicker }),
                React.createElement(Button_1.DefaultButton, { onClick: this._onClick, text: "Clear" })));
        };
        return DatePickerInputExample;
    }(React.Component));
    exports.DatePickerInputExample = DatePickerInputExample;
});
//# sourceMappingURL=DatePicker.Input.Example.js.map