@docsvision/material-ui-pickers 3.2.0-beta.27 → 3.2.0-beta.28

package/DatePicker/DatePickerToolbar.js

@@ -40,7 +40,7 @@ exports.DatePickerToolbar = function (_a) {
             _b[classes.toolbar] = !isYearOnly,
             _b[classes.toolbarLandscape] = isLandscape,
             _b)) },
-        React.createElement(ToolbarButton_1.default, { variant: isYearOnly ? 'h3' : 'subtitle1', onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.getYearText(date) }),
-        !isYearOnly && !isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", selected: openView === 'date', onClick: function () { return setOpenView('date'); }, align: isLandscape ? 'left' : 'center', label: utils.getDatePickerHeaderText(date), className: clsx_1.default((_c = {}, _c[classes.dateLandscape] = isLandscape, _c)) })),
-        isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('month'); }, selected: openView === 'month', label: utils.getMonthText(date) }))));
+        React.createElement(ToolbarButton_1.default, { variant: isYearOnly ? 'h3' : 'subtitle1', onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.formatByString(date, utils.formats.year) }),
+        !isYearOnly && !isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", selected: openView === 'date', onClick: function () { return setOpenView('date'); }, align: isLandscape ? 'left' : 'center', label: utils.formatByString(date, utils.formats.normalDateWithWeekday), className: clsx_1.default((_c = {}, _c[classes.dateLandscape] = isLandscape, _c)) })),
+        isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('month'); }, selected: openView === 'month', label: utils.formatByString(date, utils.formats.month) }))));
 };

package/DateTimePicker/DateTimePicker.d.ts

@@ -8,9 +8,9 @@ export declare type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | '
 export declare type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
 export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
     /** Array of views to show */
-    views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
+    views?: ('year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds')[];
     /** Open to DatePicker */
-    openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
+    openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
     /** To show tabs */
     hideTabs?: boolean;
     /** Date tab icon */

package/DateTimePicker/DateTimePicker.js

@@ -26,8 +26,8 @@ function useOptions(props) {
     return {
         getDefaultFormat: function () {
             return text_field_helper_1.pick12hOr24hFormat(props.format, props.ampm, {
-                '12h': utils.dateTime12hFormat,
-                '24h': utils.dateTime24hFormat,
+                '12h': utils.formats.fullDateTime12h,
+                '24h': utils.formats.fullDateTime24h,
             });
         },
     };

package/DateTimePicker/DateTimePickerToolbar.js

@@ -43,13 +43,13 @@ exports.DateTimePickerToolbar = function (_a) {
             React.createElement(core_1.Grid, { container: true, justify: "center", wrap: "nowrap" },
                 React.createElement(core_1.Grid, { item: true, container: true, xs: 5, justify: "flex-start", direction: "column" },
                     React.createElement("div", null,
-                        React.createElement(ToolbarButton_1.default, { variant: "subtitle1", onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.getYearText(date) })),
+                        React.createElement(ToolbarButton_1.default, { variant: "subtitle1", onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.formatByString(date, utils.formats.year) })),
                     React.createElement("div", null,
-                        React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('date'); }, selected: openView === 'date', label: utils.getDateTimePickerHeaderText(date) }))),
+                        React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('date'); }, selected: openView === 'date', label: utils.formatByString(date, utils.formats.shortDate) }))),
                 React.createElement(core_1.Grid, { item: true, container: true, xs: 6, justify: "center", alignItems: "flex-end", direction: rtl ? 'row-reverse' : 'row' },
-                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('hours'); }, selected: openView === 'hours', label: utils.getHourText(date, ampm) }),
+                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('hours'); }, selected: openView === 'hours', label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h) }),
                     React.createElement(ToolbarText_1.default, { variant: "h3", label: ":", className: classes.separator }),
-                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('minutes'); }, selected: openView === 'minutes', label: utils.getMinuteText(date) })),
+                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('minutes'); }, selected: openView === 'minutes', label: utils.formatByString(date, utils.formats.minutes) })),
                 ampm && (React.createElement(core_1.Grid, { item: true, container: true, xs: 1, direction: "column", justify: "flex-end" },
                     React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'am', label: utils.getMeridiemText('am'), onClick: function () { return handleMeridiemChange('am'); } }),
                     React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'pm', label: utils.getMeridiemText('pm'), onClick: function () { return handleMeridiemChange('pm'); } }))))),

package/MuiPickersUtilsProvider.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from './typings/date';
-export declare const MuiPickersContext: React.Context<IUtils<MaterialUiPickersDate> | null>;
+export declare const MuiPickersContext: React.Context<IUtils<MaterialUiPickersDate, any> | null>;
 export interface MuiPickersUtilsProviderProps {
     utils: any;
     children: React.ReactNode;

package/Picker/Picker.d.ts

@@ -31,17 +31,17 @@ export interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProp
     hideTabs?: boolean;
     dateRangeIcon?: React.ReactNode;
     timeIcon?: React.ReactNode;
+    showActionsBar?: boolean;
 }
 interface PickerProps extends PickerViewProps {
     date: MaterialUiPickersDate;
     orientation?: BasePickerProps['orientation'];
     onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-    showActionsBar?: boolean;
     showTodayButton?: boolean;
-    todayLabel?: string;
+    todayLabel?: React.ReactNode;
     showShiftButtons?: boolean;
     setShiftFunction?: (days: number) => Date;
-    shiftButtonValues?: Object;
+    shiftButtonValues?: Record<string, React.Key>;
     onSetToday?: () => void;
     onSetShift?: (shiftDate: Date) => void;
 }

package/Picker/Picker.js

@@ -96,7 +96,7 @@ exports.Picker = function (props) {
     return (React.createElement("div", { className: clsx_1.default(classes.container, (_a = {},
             _a[classes.containerLandscape] = isLandscape,
             _a)) },
-        !disableToolbar && (React.createElement(ToolbarComponent, __assign({ date: date, onChange: onChange, setOpenView: setOpenView, openView: openView, hideTabs: hideTabs, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, isLandscape: isLandscape }, props))),
+        !disableToolbar && (React.createElement(ToolbarComponent, __assign({ setOpenView: setOpenView, openView: openView, hideTabs: hideTabs, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, isLandscape: isLandscape }, props))),
         React.createElement("div", { className: clsx_1.default(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b)) },
             openView === 'year' && (React.createElement(YearView_1.YearSelection, { date: date, onChange: handleChangeAndOpenNext, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onYearChange: onYearChange, animateYearScrolling: animateYearScrolling })),
             openView === 'month' && (React.createElement(MonthView_1.MonthSelection, { date: date, onChange: handleChangeAndOpenNext, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onMonthChange: onMonthChange })),

package/Picker/WrappedPurePicker.js

@@ -39,9 +39,10 @@ function makePurePicker(_a) {
     function WrappedPurePicker(props) {
         var allowKeyboardControl = props.allowKeyboardControl, ampm = props.ampm, hideTabs = props.hideTabs, animateYearScrolling = props.animateYearScrolling, autoOk = props.autoOk, disableFuture = props.disableFuture, disablePast = props.disablePast, format = props.format, forwardedRef = props.forwardedRef, initialFocusedDate = props.initialFocusedDate, invalidDateMessage = props.invalidDateMessage, labelFunc = props.labelFunc, leftArrowIcon = props.leftArrowIcon, leftArrowButtonProps = props.leftArrowButtonProps, maxDate = props.maxDate, maxDateMessage = props.maxDateMessage, minDate = props.minDate, onOpen = props.onOpen, onClose = props.onClose, minDateMessage = props.minDateMessage, strictCompareDates = props.strictCompareDates, minutesStep = props.minutesStep, onAccept = props.onAccept, onChange = props.onChange, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, renderDay = props.renderDay, views = props.views, openTo = props.openTo, rightArrowIcon = props.rightArrowIcon, rightArrowButtonProps = props.rightArrowButtonProps, shouldDisableDate = props.shouldDisableDate, dateRangeIcon = props.dateRangeIcon, emptyLabel = props.emptyLabel, invalidLabel = props.invalidLabel, timeIcon = props.timeIcon, value = props.value, variant = props.variant, orientation = props.orientation, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, _a = props.ToolbarComponent, ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
         var injectedProps = getCustomProps ? getCustomProps(props) : {};
+        var dialogVariantProps = variant === "dialog" ? { showTodayButton: showTodayButton, todayLabel: todayLabel } : {};
         var options = useOptions(props);
         var _b = usePickerState_1.usePickerState(props, options), pickerProps = _b.pickerProps, inputProps = _b.inputProps, wrapperProps = _b.wrapperProps;
-        return (React.createElement(Wrapper_1.Wrapper, __assign({ variant: variant, InputComponent: PureDateInput_1.PureDateInput, DateInputProps: inputProps, showTodayButton: showTodayButton, todayLabel: todayLabel }, wrapperProps, injectedProps, other),
+        return (React.createElement(Wrapper_1.Wrapper, __assign({ variant: variant, InputComponent: PureDateInput_1.PureDateInput, DateInputProps: inputProps }, wrapperProps, injectedProps, dialogVariantProps, other),
             React.createElement(Picker_1.Picker, __assign({}, pickerProps, { orientation: orientation, disableToolbar: disableToolbar, ToolbarComponent: ToolbarComponent, hideTabs: hideTabs, ampm: ampm, views: views, openTo: openTo, allowKeyboardControl: allowKeyboardControl, minutesStep: minutesStep, animateYearScrolling: animateYearScrolling, disableFuture: disableFuture, disablePast: disablePast, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, maxDate: maxDate, minDate: minDate, strictCompareDates: strictCompareDates, onMonthChange: onMonthChange, onYearChange: onYearChange, renderDay: renderDay, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, shouldDisableDate: shouldDisableDate, loadingIndicator: loadingIndicator, showActionsBar: showActionsBar, showTodayButton: showTodayButton, todayLabel: todayLabel, showShiftButtons: showShiftButtons, setShiftFunction: setShiftFunction, shiftButtonValues: shiftButtonValues }))));
     }
     return WrappedPurePicker;

package/TimePicker/TimePicker.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="styled-jsx" />
 import { WrappedPurePickerProps } from '../Picker/WrappedPurePicker';
 import { WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+declare type TimePickerView = 'hours' | 'minutes' | 'seconds';
 export interface BaseTimePickerProps {
     /**
      * 12h/24h view for hour selection clock
@@ -16,11 +17,12 @@ export interface BaseTimePickerProps {
 }
 export interface TimePickerViewsProps extends BaseTimePickerProps {
     /** Array of views to show */
-    views?: ('hours' | 'minutes' | 'seconds')[];
+    views?: TimePickerView[];
     /** Open to timepicker */
-    openTo?: 'hours' | 'minutes' | 'seconds';
+    openTo?: TimePickerView;
 }
 export declare type TimePickerProps = WrappedPurePickerProps & TimePickerViewsProps;
 export declare type KeyboardTimePickerProps = WrappedKeyboardPickerProps & TimePickerViewsProps;
 export declare const TimePicker: import("react").FunctionComponent<TimePickerProps>;
 export declare const KeyboardTimePicker: import("react").FunctionComponent<KeyboardTimePickerProps>;
+export {};

package/TimePicker/TimePicker.js

@@ -26,8 +26,8 @@ function useOptions(props) {
     return {
         getDefaultFormat: function () {
             return text_field_helper_1.pick12hOr24hFormat(props.format, props.ampm, {
-                '12h': utils.time12hFormat,
-                '24h': utils.time24hFormat,
+                '12h': utils.formats.hours12h,
+                '24h': utils.formats.hours24h,
             });
         },
     };

package/TimePicker/TimePickerToolbar.js

@@ -88,11 +88,11 @@ var TimePickerToolbar = function (_a) {
                 _c[classes.hourMinuteLabelLandscape] = isLandscape,
                 _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl',
                 _c)) },
-            utils_1.arrayIncludes(views, 'hours') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.HOURS); }, selected: openView === ClockType_1.default.HOURS, label: utils.getHourText(date, Boolean(ampm)) })),
+            utils_1.arrayIncludes(views, 'hours') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.HOURS); }, selected: openView === ClockType_1.default.HOURS, label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h) })),
             utils_1.arrayIncludes(views, ['hours', 'minutes']) && (React.createElement(ToolbarText_1.default, { label: ":", variant: clockTypographyVariant, selected: false, className: classes.separator })),
-            utils_1.arrayIncludes(views, 'minutes') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.MINUTES); }, selected: openView === ClockType_1.default.MINUTES, label: utils.getMinuteText(date) })),
+            utils_1.arrayIncludes(views, 'minutes') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.MINUTES); }, selected: openView === ClockType_1.default.MINUTES, label: utils.formatByString(date, utils.formats.minutes) })),
             utils_1.arrayIncludes(views, ['minutes', 'seconds']) && (React.createElement(ToolbarText_1.default, { variant: "h2", label: ":", selected: false, className: classes.separator })),
-            utils_1.arrayIncludes(views, 'seconds') && (React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: function () { return setOpenView(ClockType_1.default.SECONDS); }, selected: openView === ClockType_1.default.SECONDS, label: utils.getSecondText(date) }))),
+            utils_1.arrayIncludes(views, 'seconds') && (React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: function () { return setOpenView(ClockType_1.default.SECONDS); }, selected: openView === ClockType_1.default.SECONDS, label: utils.formatByString(date, utils.formats.seconds) }))),
         ampm && (React.createElement("div", { className: clsx_1.default(classes.ampmSelection, (_d = {},
                 _d[classes.ampmLandscape] = isLandscape,
                 _d[classes.ampmSelectionWithSeconds] = utils_1.arrayIncludes(views, 'seconds'),

package/_helpers/date-utils.d.ts

@@ -3,7 +3,7 @@ import { MaterialUiPickersDate } from '../typings/date';
 import { DatePickerView } from '../DatePicker/DatePicker';
 interface FindClosestDateParams {
     date: MaterialUiPickersDate;
-    utils: IUtils<MaterialUiPickersDate>;
+    utils: IUtils<MaterialUiPickersDate, any>;
     minDate: MaterialUiPickersDate;
     maxDate: MaterialUiPickersDate;
     disableFuture: boolean;
@@ -13,5 +13,5 @@ interface FindClosestDateParams {
 export declare const findClosestEnabledDate: ({ date, utils, minDate, maxDate, disableFuture, disablePast, shouldDisableDate, }: FindClosestDateParams) => MaterialUiPickersDate;
 export declare const isYearOnlyView: (views: DatePickerView[]) => boolean;
 export declare const isYearAndMonthViews: (views: DatePickerView[]) => boolean;
-export declare const getFormatByViews: (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate>) => string;
+export declare const getFormatByViews: (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate, any>) => any;
 export {};

package/_helpers/date-utils.js

@@ -52,10 +52,10 @@ exports.isYearAndMonthViews = function (views) {
 };
 exports.getFormatByViews = function (views, utils) {
     if (exports.isYearOnlyView(views)) {
-        return utils.yearFormat;
+        return utils.formats.year;
     }
     if (exports.isYearAndMonthViews(views)) {
-        return utils.yearMonthFormat;
+        return utils.formats.monthAndYear;
     }
-    return utils.dateFormat;
+    return utils.formats.monthAndDate;
 };

package/_helpers/text-field-helper.d.ts

@@ -3,7 +3,7 @@
 import { IUtils } from '@date-io/core/IUtils';
 import { ParsableDate } from '../constants/prop-types';
 import { BasePickerProps } from '../typings/BasePicker';
-export declare const getDisplayDate: (value: ParsableDate, format: string, utils: IUtils<any>, isEmpty: boolean, { invalidLabel, emptyLabel, labelFunc }: Pick<BasePickerProps, "onError" | "variant" | "open" | "disabled" | "format" | "orientation" | "onClose" | "onOpen" | "onAccept" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues">) => string;
+export declare const getDisplayDate: (value: ParsableDate, format: string, utils: IUtils<any, any>, isEmpty: boolean, { invalidLabel, emptyLabel, labelFunc }: Pick<BasePickerProps, "onError" | "variant" | "open" | "disabled" | "format" | "orientation" | "onClose" | "onOpen" | "onAccept" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues">) => string;
 export interface BaseValidationProps {
     /**
      * Message, appearing when date cannot be parsed
@@ -23,10 +23,10 @@ export interface DateValidationProps extends BaseValidationProps {
      */
     maxDateMessage?: React.ReactNode;
 }
-export declare const validate: (value: ParsableDate, utils: IUtils<any>, { maxDate, minDate, disablePast, disableFuture, maxDateMessage, minDateMessage, invalidDateMessage, strictCompareDates, }: Pick<import("../DatePicker/DatePicker").DatePickerProps, "children" | "ref" | "label" | "select" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "innerRef" | "error" | "name" | "margin" | "open" | "disabled" | "key" | "autoFocus" | "type" | "value" | "fullWidth" | "format" | "orientation" | "autoComplete" | "required" | "rows" | "onMonthChange" | "leftArrowIcon" | "rightArrowIcon" | "leftArrowButtonProps" | "rightArrowButtonProps" | "minDate" | "maxDate" | "disablePast" | "disableFuture" | "renderDay" | "allowKeyboardControl" | "shouldDisableDate" | "loadingIndicator" | "hiddenLabel" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "onClose" | "onOpen" | "onAccept" | "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps" | "PopoverProps" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues" | "minDateMessage" | "maxDateMessage" | "invalidDateMessage" | "strictCompareDates" | "animateYearScrolling" | "onYearChange">) => import("react").ReactNode;
+export declare const validate: (value: ParsableDate, utils: IUtils<any, any>, { maxDate, minDate, disablePast, disableFuture, maxDateMessage, minDateMessage, invalidDateMessage, strictCompareDates, }: Pick<import("../DatePicker/DatePicker").DatePickerProps, "children" | "ref" | "label" | "select" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "innerRef" | "error" | "name" | "margin" | "open" | "disabled" | "key" | "autoFocus" | "type" | "value" | "fullWidth" | "format" | "orientation" | "autoComplete" | "required" | "rows" | "onMonthChange" | "leftArrowIcon" | "rightArrowIcon" | "leftArrowButtonProps" | "rightArrowButtonProps" | "minDate" | "maxDate" | "disablePast" | "disableFuture" | "renderDay" | "allowKeyboardControl" | "shouldDisableDate" | "loadingIndicator" | "hiddenLabel" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "onClose" | "onOpen" | "onAccept" | "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps" | "PopoverProps" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues" | "minDateMessage" | "maxDateMessage" | "invalidDateMessage" | "strictCompareDates" | "animateYearScrolling" | "onYearChange">) => import("react").ReactNode;
 export declare function pick12hOr24hFormat(userFormat: string | undefined, ampm: boolean | undefined, formats: {
     '12h': string;
     '24h': string;
 }): string;
 export declare function makeMaskFromFormat(format: string, numberMaskChar: string): string;
-export declare const maskedDateFormatter: (mask: string, numberMaskChar: string) => (value: string, oldValue: string, currentCaretPosition?: number | undefined) => string;
+export declare const maskedDateFormatter: (mask: string, numberMaskChar: string) => (value: string, oldValue?: string | undefined, currentCaretPosition?: number | undefined) => string;

package/_helpers/text-field-helper.js

@@ -13,7 +13,7 @@ exports.getDisplayDate = function (value, format, utils, isEmpty, _a) {
     if (isEmpty) {
         return emptyLabel || '';
     }
-    return utils.isValid(date) ? utils.format(date, format) : invalidLabel;
+    return utils.isValid(date) ? utils.formatByString(date, format) : invalidLabel;
 };
 var getComparisonMaxDate = function (utils, strictCompareDates, date) {
     if (strictCompareDates) {

package/_helpers/time-utils.d.ts

@@ -2,5 +2,5 @@ import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from '../typings/date';
 export declare const getHours: (offsetX: number, offsetY: number, ampm: boolean) => number;
 export declare const getMinutes: (offsetX: number, offsetY: number, step?: number) => number;
-export declare const getMeridiem: (date: MaterialUiPickersDate, utils: IUtils<MaterialUiPickersDate>) => "am" | "pm";
-export declare const convertToMeridiem: (time: MaterialUiPickersDate, meridiem: "am" | "pm", ampm: boolean, utils: IUtils<MaterialUiPickersDate>) => MaterialUiPickersDate;
+export declare const getMeridiem: (date: MaterialUiPickersDate, utils: IUtils<MaterialUiPickersDate, any>) => "am" | "pm";
+export declare const convertToMeridiem: (time: MaterialUiPickersDate, meridiem: "am" | "pm", ampm: boolean, utils: IUtils<MaterialUiPickersDate, any>) => MaterialUiPickersDate;

package/_shared/WithUtils.d.ts

@@ -3,6 +3,6 @@ import { Omit } from '@material-ui/core';
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from '../typings/date';
 export interface WithUtilsProps {
-    utils: IUtils<MaterialUiPickersDate>;
+    utils: IUtils<MaterialUiPickersDate, any>;
 }
 export declare const withUtils: () => <P extends WithUtilsProps>(Component: React.ComponentType<P>) => React.FunctionComponent<Omit<P, "utils">>;

package/_shared/hooks/useKeyboardPickerState.js

@@ -35,7 +35,7 @@ function useKeyboardPickerState(props, options) {
         }
     }, [displayDate, setInnerInputValue, utils, value]);
     var handleKeyboardChange = react_1.useCallback(function (date) {
-        onChange(date, date === null ? null : utils.format(date, format));
+        onChange(date, date === null ? null : utils.formatByString(date, format));
     }, [format, onChange, utils]);
     var _c = usePickerState_1.usePickerState(__assign(__assign({}, props), { value: dateValue, onChange: handleKeyboardChange }), options), innerInputProps = _c.inputProps, wrapperProps = _c.wrapperProps, pickerProps = _c.pickerProps;
     var inputProps = react_1.useMemo(function () { return (__assign(__assign({}, innerInputProps), { format: wrapperProps.format, inputValue: inputValue || innerInputValue, onChange: function (value) {

package/_shared/hooks/useUtils.d.ts

@@ -1,4 +1,4 @@
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from '../../typings/date';
-export declare const checkUtils: (utils: IUtils<MaterialUiPickersDate> | null | undefined) => void;
-export declare function useUtils(): IUtils<MaterialUiPickersDate>;
+export declare const checkUtils: (utils: IUtils<MaterialUiPickersDate, any> | null | undefined) => void;
+export declare function useUtils(): IUtils<MaterialUiPickersDate, any>;