import * as React from 'react';
import { addMonths, addYears, addDays } from '@fluentui/date-time-utilities';
import { Calendar } from '@fluentui/react';
import { useConst } from '@fluentui/react-hooks';
export var CalendarInlineDateBoundariesExample = function () {
    var today = useConst(new Date());
    var minDate = useConst(addMonths(today, -1));
    var maxDate = useConst(addYears(today, 1));
    var restrictedDates = useConst([addDays(today, -2), addDays(today, -8), addDays(today, 2), addDays(today, 8)]);
    var _a = React.useState(), selectedDate = _a[0], setSelectedDate = _a[1];
    var onSelectDate = React.useCallback(function (date, dateRangeArray) {
        setSelectedDate(date);
    }, []);
    return (React.createElement("div", { style: { height: 'auto' } },
        React.createElement("div", null,
            "Selected date: ",
            (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleString()) || 'Not set'),
        React.createElement("div", null,
            "Date boundary: ",
            minDate.toLocaleDateString(),
            "-",
            maxDate.toLocaleDateString()),
        React.createElement("div", null,
            "Disabled dates: ",
            restrictedDates.map(function (d) { return d.toLocaleDateString(); }).join(', ')),
        React.createElement(Calendar, { highlightSelectedMonth: true, showGoToToday: false, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, onSelectDate: onSelectDate, value: selectedDate })));
};
//# sourceMappingURL=Calendar.Inline.DateBoundaries.Example.js.map