"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePickerFormatExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var Button_1 = require("@fluentui/react/lib-commonjs/Button");
var styles = react_1.mergeStyleSets({
    root: { selectors: { '> *': { marginBottom: 15 } } },
    control: { maxWidth: 300, marginBottom: 15 },
});
var onFormatDate = function (date) {
    return !date ? '' : date.getDate() + '/' + (date.getMonth() + 1) + '/' + (date.getFullYear() % 100);
};
var DatePickerFormatExample = function () {
    var _a = React.useState(), value = _a[0], setValue = _a[1];
    var datePickerRef = React.useRef(null);
    var onClick = React.useCallback(function () {
        var _a;
        setValue(undefined);
        (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, []);
    var onParseDateFromString = React.useCallback(function (newValue) {
        var previousValue = value || new Date();
        var newValueParts = (newValue || '').trim().split('/');
        var day = newValueParts.length > 0 ? Math.max(1, Math.min(31, parseInt(newValueParts[0], 10))) : previousValue.getDate();
        var month = newValueParts.length > 1
            ? Math.max(1, Math.min(12, parseInt(newValueParts[1], 10))) - 1
            : previousValue.getMonth();
        var year = newValueParts.length > 2 ? parseInt(newValueParts[2], 10) : previousValue.getFullYear();
        if (year < 100) {
            year += previousValue.getFullYear() - (previousValue.getFullYear() % 100);
        }
        return new Date(year, month, day);
    }, [value]);
    return (React.createElement("div", { className: styles.root },
        React.createElement("div", null, "Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed. In this example, we are formatting and parsing dates as dd/MM/yy."),
        React.createElement(react_1.DatePicker, { componentRef: datePickerRef, label: "Start date", allowTextInput: true, ariaLabel: "Select a date. Input format is day slash month slash year.", value: value, onSelectDate: setValue, formatDate: onFormatDate, parseDateFromString: onParseDateFromString, className: styles.control }),
        React.createElement(Button_1.DefaultButton, { "aria-label": "Clear the date input", onClick: onClick, text: "Clear" }),
        React.createElement("div", null,
            "Selected date: ",
            (value || '').toString())));
};
exports.DatePickerFormatExample = DatePickerFormatExample;
//# sourceMappingURL=DatePicker.Format.Example.js.map