import { __assign } from "tslib";
import * as React from 'react';
import { DatePicker, defaultDatePickerStrings, addMonths, addYears, } from '@fluentui/react';
import { useConst } from '@fluentui/react-hooks';
var datePickerStyles = { root: { maxWidth: 300, marginTop: 15 } };
export var DatePickerBoundedExample = function () {
    var today = useConst(new Date(Date.now()));
    var minDate = useConst(addMonths(today, -1));
    var maxDate = useConst(addYears(today, 1));
    var strings = useConst(function () { return (__assign(__assign({}, defaultDatePickerStrings), { 
        // eslint-disable-next-line @fluentui/max-len
        isOutOfBoundsErrorMessage: "Date must be between " + minDate.toLocaleDateString() + " and " + maxDate.toLocaleDateString() })); });
    return (React.createElement("div", null,
        React.createElement("div", null,
            "When date boundaries are set (via ",
            React.createElement("code", null, "minDate"),
            " and ",
            React.createElement("code", null, "maxDate"),
            " props) the DatePicker will not allow out-of-bounds dates to be picked or entered. In this example, the allowed dates are",
            ' ',
            minDate.toLocaleDateString(),
            " to ",
            maxDate.toLocaleDateString(),
            "."),
        React.createElement(DatePicker, { styles: datePickerStyles, strings: strings, placeholder: "Select a date...", ariaLabel: "Select a date", minDate: minDate, maxDate: maxDate, allowTextInput: true })));
};
//# sourceMappingURL=DatePicker.Bounded.Example.js.map