office-ui-fabric-react/lib/components/DatePicker/examples/DatePicker.Input.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { DatePicker, DayOfWeek } from 'office-ui-fabric-react/lib/DatePicker';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
var DayPickerStrings = {
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    goToToday: 'Go to today',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year',
    closeButtonAriaLabel: 'Close date picker',
    isRequiredErrorMessage: 'Start date is required.',
    invalidInputErrorMessage: 'Invalid date format.'
};
var controlClass = mergeStyleSets({
    control: {
        margin: '0 0 15px 0',
        maxWidth: '300px'
    }
});
var DatePickerInputExample = /** @class */ (function (_super) {
    tslib_1.__extends(DatePickerInputExample, _super);
    function DatePickerInputExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onSelectDate = function (date) {
            _this.setState({ value: date });
        };
        _this._onClick = function () {
            _this.setState({ value: null });
        };
        _this.state = {
            firstDayOfWeek: 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(DatePicker, { className: controlClass.control, label: "Start date", isRequired: false, allowTextInput: true, ariaLabel: desc, firstDayOfWeek: firstDayOfWeek, strings: DayPickerStrings, value: value, onSelectDate: this._onSelectDate }),
            React.createElement(DefaultButton, { onClick: this._onClick, text: "Clear" })));
    };
    return DatePickerInputExample;
}(React.Component));
export { DatePickerInputExample };
//# sourceMappingURL=DatePicker.Input.Example.js.map