@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/{build/dist → dist}/material-ui-pickers.esm.js

@@ -1,6 +1,7 @@
 import { __rest, __assign, __extends } from 'tslib';
-import React__default, { createContext, useMemo, createElement, useContext, useCallback, cloneElement, useEffect, useLayoutEffect, useRef, Fragment, Component, useState, forwardRef, memo, useDebugValue } from 'react';
+import React__default, { createContext, useMemo, createElement, useContext, useCallback, cloneElement, useEffect, useLayoutEffect, useRef, Fragment, Component, useState, forwardRef, memo, useDebugValue, useReducer } from 'react';
 import { func, oneOfType, object, string, element, arrayOf, bool, any, number, instanceOf, oneOf, node } from 'prop-types';
+import MomentUtils from '@date-io/moment';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles, fade, createStyles, withStyles, useTheme } from '@material-ui/core/styles';
@@ -10,34 +11,44 @@ import IconButton from '@material-ui/core/IconButton';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles as makeStyles$1, Button as Button$1, DialogActions as DialogActions$1, IconButton as IconButton$1, Grid } from '@material-ui/core';
+import { makeStyles as makeStyles$1, DialogActions as DialogActions$1, Button as Button$1, IconButton as IconButton$1, Grid } from '@material-ui/core';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import Dialog from '@material-ui/core/Dialog';
 import Popover from '@material-ui/core/Popover';
 import TextField from '@material-ui/core/TextField';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import { Rifm } from 'rifm';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
 import Paper from '@material-ui/core/Paper';
 
-var MuiPickersContext = createContext(null);
-var MuiPickersUtilsProvider = function (_a) {
+var MuiPickersContext =
+/*#__PURE__*/
+createContext(null);
+var MuiPickersUtilsProvider = function MuiPickersUtilsProvider(_a) {
   var Utils = _a.utils,
       children = _a.children,
       locale = _a.locale,
       libInstance = _a.libInstance;
   var utils = useMemo(function () {
-    return new Utils({
+    var instance = new Utils({
       locale: locale,
       moment: libInstance
     });
+
+    if (instance instanceof MomentUtils) {
+      instance.moment.locale(locale);
+    }
+
+    return instance;
   }, [Utils, libInstance, locale]);
-  return createElement(MuiPickersContext.Provider, {
-    value: utils,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    createElement(MuiPickersContext.Provider, {
+      value: utils,
+      children: children
+    })
+  );
 };
 process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
   utils: func.isRequired,
@@ -45,7 +56,7 @@ process.env.NODE_ENV !== "production" ? MuiPickersUtilsProvider.propTypes = {
   children: oneOfType([element.isRequired, arrayOf(element.isRequired)]).isRequired
 } : void 0;
 
-var checkUtils = function (utils) {
+var checkUtils = function checkUtils(utils) {
   if (!utils) {
     // tslint:disable-next-line
     throw new Error('Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports.  Recommendation: use named imports from the module index.');
@@ -58,7 +69,7 @@ function useUtils() {
 }
 
 var useStyles = makeStyles(function (theme) {
-  var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background.default);
+  var textColor = theme.palette.type === 'light' ? theme.palette.primary.contrastText : theme.palette.getContrastText(theme.palette.background["default"]);
   return {
     toolbarTxt: {
       color: fade(textColor, 0.54)
@@ -71,7 +82,7 @@ var useStyles = makeStyles(function (theme) {
   name: 'MuiPickersToolbarText'
 });
 
-var ToolbarText = function (_a) {
+var ToolbarText = function ToolbarText(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -81,13 +92,16 @@ var ToolbarText = function (_a) {
       other = __rest(_a, ["selected", "label", "className"]);
 
   var classes = useStyles();
-  return createElement(Typography, __assign({
-    children: label,
-    className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
-  }, other));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __assign({
+      children: label,
+      className: clsx(classes.toolbarTxt, className, (_b = {}, _b[classes.toolbarBtnSelected] = selected, _b))
+    }, other))
+  );
 };
 
-var ToolbarButton = function (_a) {
+var ToolbarButton = function ToolbarButton(_a) {
   var classes = _a.classes,
       _b = _a.className,
       className = _b === void 0 ? null : _b,
@@ -98,16 +112,21 @@ var ToolbarButton = function (_a) {
       typographyClassName = _a.typographyClassName,
       other = __rest(_a, ["classes", "className", "label", "selected", "variant", "align", "typographyClassName"]);
 
-  return createElement(Button, __assign({
-    variant: "text",
-    className: clsx(classes.toolbarBtn, className)
-  }, other), createElement(ToolbarText, {
-    align: align,
-    className: typographyClassName,
-    variant: variant,
-    label: label,
-    selected: selected
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(Button, __assign({
+      variant: "text",
+      className: clsx(classes.toolbarBtn, className)
+    }, other),
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      align: align,
+      className: typographyClassName,
+      variant: variant,
+      label: label,
+      selected: selected
+    }))
+  );
 };
 
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
@@ -139,7 +158,7 @@ var useStyles$1 = makeStyles(function (theme) {
       alignItems: 'center',
       justifyContent: 'center',
       height: 100,
-      backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default
+      backgroundColor: theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"]
     },
     toolbarLandscape: {
       height: 'auto',
@@ -152,7 +171,7 @@ var useStyles$1 = makeStyles(function (theme) {
   name: 'MuiPickersToolbar'
 });
 
-var PickerToolbar = function (_a) {
+var PickerToolbar = function PickerToolbar(_a) {
   var _b;
 
   var children = _a.children,
@@ -162,9 +181,12 @@ var PickerToolbar = function (_a) {
       other = __rest(_a, ["children", "isLandscape", "className"]);
 
   var classes = useStyles$1();
-  return createElement(Toolbar, __assign({
-    className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
-  }, other), children);
+  return (
+    /*#__PURE__*/
+    createElement(Toolbar, __assign({
+      className: clsx(classes.toolbar, (_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b), className)
+    }, other), children)
+  );
 };
 
 /** Use it instead of .includes method for IE support */
@@ -178,7 +200,7 @@ function arrayIncludes(array, itemOrItems) {
   return array.indexOf(itemOrItems) !== -1;
 }
 
-var findClosestEnabledDate = function (_a) {
+var findClosestEnabledDate = function findClosestEnabledDate(_a) {
   var date = _a.date,
       utils = _a.utils,
       minDate = _a.minDate,
@@ -240,22 +262,22 @@ var findClosestEnabledDate = function (_a) {
 
   return null;
 };
-var isYearOnlyView = function (views) {
+var isYearOnlyView = function isYearOnlyView(views) {
   return views.length === 1 && views[0] === 'year';
 };
-var isYearAndMonthViews = function (views) {
+var isYearAndMonthViews = function isYearAndMonthViews(views) {
   return views.length === 2 && arrayIncludes(views, 'month') && arrayIncludes(views, 'year');
 };
-var getFormatByViews = function (views, utils) {
+var getFormatByViews = function getFormatByViews(views, utils) {
   if (isYearOnlyView(views)) {
-    return utils.yearFormat;
+    return utils.formats.year;
   }
 
   if (isYearAndMonthViews(views)) {
-    return utils.yearMonthFormat;
+    return utils.formats.monthAndYear;
   }
 
-  return utils.dateFormat;
+  return utils.formats.monthAndDate;
 };
 
 var useStyles$2 = makeStyles({
@@ -272,7 +294,7 @@ var useStyles$2 = makeStyles({
 }, {
   name: 'MuiPickersDatePickerRoot'
 });
-var DatePickerToolbar = function (_a) {
+var DatePickerToolbar = function DatePickerToolbar(_a) {
   var _b, _c;
 
   var date = _a.date,
@@ -288,33 +310,42 @@ var DatePickerToolbar = function (_a) {
   var isYearAndMonth = useMemo(function () {
     return isYearAndMonthViews(views);
   }, [views]);
-  return createElement(PickerToolbar, {
-    isLandscape: isLandscape,
-    className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
-  }, createElement(ToolbarButton$1, {
-    variant: isYearOnly ? 'h3' : 'subtitle1',
-    onClick: function () {
-      return setOpenView('year');
-    },
-    selected: openView === 'year',
-    label: utils.getYearText(date)
-  }), !isYearOnly && !isYearAndMonth && createElement(ToolbarButton$1, {
-    variant: "h4",
-    selected: openView === 'date',
-    onClick: function () {
-      return setOpenView('date');
+  return (
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: isLandscape,
+      className: clsx((_b = {}, _b[classes.toolbar] = !isYearOnly, _b[classes.toolbarLandscape] = isLandscape, _b))
     },
-    align: isLandscape ? 'left' : 'center',
-    label: utils.getDatePickerHeaderText(date),
-    className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
-  }), isYearAndMonth && createElement(ToolbarButton$1, {
-    variant: "h4",
-    onClick: function () {
-      return setOpenView('month');
-    },
-    selected: openView === 'month',
-    label: utils.getMonthText(date)
-  }));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: isYearOnly ? 'h3' : 'subtitle1',
+      onClick: function onClick() {
+        return setOpenView('year');
+      },
+      selected: openView === 'year',
+      label: utils.formatByString(date, utils.formats.year)
+    }), !isYearOnly && !isYearAndMonth &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      selected: openView === 'date',
+      onClick: function onClick() {
+        return setOpenView('date');
+      },
+      align: isLandscape ? 'left' : 'center',
+      label: utils.formatByString(date, utils.formats.normalDateWithWeekday),
+      className: clsx((_c = {}, _c[classes.dateLandscape] = isLandscape, _c))
+    }), isYearAndMonth &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      onClick: function onClick() {
+        return setOpenView('month');
+      },
+      selected: openView === 'month',
+      label: utils.formatByString(date, utils.formats.month)
+    }))
+  );
 };
 
 var date = oneOfType([object, string, number, instanceOf(Date)]);
@@ -327,13 +358,13 @@ var timePickerDefaultProps = {
 };
 var datePickerDefaultProps = {
   minDate: new Date('1900-01-01'),
-  maxDate: new Date('2100-01-01'),
+  maxDate: new Date('2200-01-01'),
   invalidDateMessage: 'Invalid Date Format',
   minDateMessage: 'Date should not be before minimal date',
   maxDateMessage: 'Date should not be after maximal date',
   allowKeyboardControl: true
 };
-var dateTimePickerDefaultProps = __assign({}, timePickerDefaultProps, datePickerDefaultProps, {
+var dateTimePickerDefaultProps = __assign(__assign(__assign({}, timePickerDefaultProps), datePickerDefaultProps), {
   showTabs: true
 });
 
@@ -372,7 +403,7 @@ var useStyles$3 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersDay'
 });
-var Day = function (_a) {
+var Day = function Day(_a) {
   var _b;
 
   var children = _a.children,
@@ -384,13 +415,18 @@ var Day = function (_a) {
 
   var classes = useStyles$3();
   var className = clsx(classes.day, (_b = {}, _b[classes.hidden] = hidden, _b[classes.current] = current, _b[classes.daySelected] = selected, _b[classes.dayDisabled] = disabled, _b));
-  return createElement(IconButton, __assign({
-    className: className,
-    tabIndex: hidden || disabled ? -1 : 0
-  }, other), createElement(Typography, {
-    variant: "body2",
-    color: "inherit"
-  }, children));
+  return (
+    /*#__PURE__*/
+    createElement(IconButton, __assign({
+      className: className,
+      tabIndex: hidden || disabled ? -1 : 0
+    }, other),
+    /*#__PURE__*/
+    createElement(Typography, {
+      variant: "body2",
+      color: "inherit"
+    }, children))
+  );
 };
 Day.displayName = 'Day';
 process.env.NODE_ENV !== "production" ? Day.propTypes = {
@@ -406,7 +442,7 @@ Day.defaultProps = {
   selected: false
 };
 
-var DayWrapper = function (_a) {
+var DayWrapper = function DayWrapper(_a) {
   var children = _a.children,
       value = _a.value,
       disabled = _a.disabled,
@@ -417,11 +453,14 @@ var DayWrapper = function (_a) {
   var handleClick = useCallback(function () {
     return onSelect(value);
   }, [onSelect, value]);
-  return createElement("div", __assign({
-    role: "presentation",
-    onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
-    onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
-  }, other), children);
+  return (
+    /*#__PURE__*/
+    createElement("div", __assign({
+      role: "presentation",
+      onClick: dayInCurrentMonth && !disabled ? handleClick : undefined,
+      onKeyPress: dayInCurrentMonth && !disabled ? handleClick : undefined
+    }, other), children)
+  );
 };
 
 var animationDuration = 350;
@@ -471,7 +510,7 @@ var useStyles$4 = makeStyles(function (theme) {
   name: 'MuiPickersSlideTransition'
 });
 
-var SlideTransition = function (_a) {
+var SlideTransition = function SlideTransition(_a) {
   var children = _a.children,
       transKey = _a.transKey,
       slideDirection = _a.slideDirection,
@@ -486,39 +525,61 @@ var SlideTransition = function (_a) {
     // @ts-ignore
     exitActive: classes['slideExitActiveLeft-' + slideDirection]
   };
-  return createElement(TransitionGroup, {
-    className: clsx(classes.transitionContainer, className),
-    childFactory: function (element) {
-      return cloneElement(element, {
-        classNames: transitionClasses
-      });
-    }
-  }, createElement(CSSTransition, {
-    mountOnEnter: true,
-    unmountOnExit: true,
-    key: transKey + slideDirection,
-    timeout: animationDuration,
-    classNames: transitionClasses,
-    children: children
-  }));
-};
-
-var ArrowLeftIcon = function (props) {
-  return React__default.createElement(SvgIcon, __assign({}, props), React__default.createElement("path", {
-    d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
-  }), React__default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0V0z"
-  }));
-};
-
-var ArrowRightIcon = function (props) {
-  return React__default.createElement(SvgIcon, __assign({}, props), React__default.createElement("path", {
-    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-  }), React__default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0V0z"
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(TransitionGroup, {
+      className: clsx(classes.transitionContainer, className),
+      childFactory: function childFactory(element) {
+        return (
+          /*#__PURE__*/
+          cloneElement(element, {
+            classNames: transitionClasses
+          })
+        );
+      }
+    },
+    /*#__PURE__*/
+    createElement(CSSTransition, {
+      mountOnEnter: true,
+      unmountOnExit: true,
+      key: transKey + slideDirection,
+      timeout: animationDuration,
+      classNames: transitionClasses,
+      children: children
+    }))
+  );
+};
+
+var ArrowLeftIcon = function ArrowLeftIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0V0z"
+    }))
+  );
+};
+
+var ArrowRightIcon = function ArrowRightIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0V0z"
+    }))
+  );
 };
 
 var useStyles$5 = makeStyles(function (theme) {
@@ -555,7 +616,7 @@ var useStyles$5 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersCalendarHeader'
 });
-var CalendarHeader = function (_a) {
+var CalendarHeader = function CalendarHeader(_a) {
   var currentMonth = _a.currentMonth,
       onMonthChange = _a.onMonthChange,
       leftArrowIcon = _a.leftArrowIcon,
@@ -570,40 +631,58 @@ var CalendarHeader = function (_a) {
   var theme = useTheme();
   var rtl = theme.direction === 'rtl';
 
-  var selectNextMonth = function () {
+  var selectNextMonth = function selectNextMonth() {
     return onMonthChange(utils.getNextMonth(currentMonth), 'left');
   };
 
-  var selectPreviousMonth = function () {
+  var selectPreviousMonth = function selectPreviousMonth() {
     return onMonthChange(utils.getPreviousMonth(currentMonth), 'right');
   };
 
-  return createElement("div", null, createElement("div", {
-    className: classes.switchHeader
-  }, createElement(IconButton, __assign({}, leftArrowButtonProps, {
-    disabled: disablePrevMonth,
-    onClick: selectPreviousMonth,
-    className: classes.iconButton
-  }), rtl ? rightArrowIcon : leftArrowIcon), createElement(SlideTransition, {
-    slideDirection: slideDirection,
-    transKey: currentMonth.toString(),
-    className: classes.transitionContainer
-  }, createElement(Typography, {
-    align: "center",
-    variant: "body1"
-  }, utils.getCalendarHeaderText(currentMonth))), createElement(IconButton, __assign({}, rightArrowButtonProps, {
-    disabled: disableNextMonth,
-    onClick: selectNextMonth,
-    className: classes.iconButton
-  }), rtl ? leftArrowIcon : rightArrowIcon)), createElement("div", {
-    className: classes.daysHeader
-  }, utils.getWeekdays().map(function (day, index) {
-    return createElement(Typography, {
-      key: index,
-      variant: "caption",
-      className: classes.dayLabel
-    }, day);
-  })));
+  return (
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.switchHeader
+    },
+    /*#__PURE__*/
+    createElement(IconButton, __assign({}, leftArrowButtonProps, {
+      disabled: disablePrevMonth,
+      onClick: selectPreviousMonth,
+      className: classes.iconButton
+    }), rtl ? rightArrowIcon : leftArrowIcon),
+    /*#__PURE__*/
+    createElement(SlideTransition, {
+      slideDirection: slideDirection,
+      transKey: currentMonth.toString(),
+      className: classes.transitionContainer
+    },
+    /*#__PURE__*/
+    createElement(Typography, {
+      align: "center",
+      variant: "body1"
+    }, utils.formatByString(currentMonth, utils.formats.monthAndYear))),
+    /*#__PURE__*/
+    createElement(IconButton, __assign({}, rightArrowButtonProps, {
+      disabled: disableNextMonth,
+      onClick: selectNextMonth,
+      className: classes.iconButton
+    }), rtl ? leftArrowIcon : rightArrowIcon)),
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.daysHeader
+    }, utils.getWeekdays().map(function (day, index) {
+      return (
+        /*#__PURE__*/
+        createElement(Typography, {
+          key: index,
+          variant: "caption",
+          className: classes.dayLabel
+        }, day)
+      );
+    })))
+  );
 };
 CalendarHeader.displayName = 'CalendarHeader';
 process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
@@ -613,8 +692,12 @@ process.env.NODE_ENV !== "production" ? CalendarHeader.propTypes = {
   disableNextMonth: bool
 } : void 0;
 CalendarHeader.defaultProps = {
-  leftArrowIcon: createElement(ArrowLeftIcon, null),
-  rightArrowIcon: createElement(ArrowRightIcon, null),
+  leftArrowIcon:
+  /*#__PURE__*/
+  createElement(ArrowLeftIcon, null),
+  rightArrowIcon:
+  /*#__PURE__*/
+  createElement(ArrowRightIcon, null),
   disablePrevMonth: false,
   disableNextMonth: false
 };
@@ -636,7 +719,7 @@ function useKeyDown(active, keyHandlers) {
   });
   useEffect(function () {
     if (active) {
-      var handleKeyDown_1 = function (event) {
+      var handleKeyDown_1 = function handleKeyDown_1(event) {
         runKeyHandler(event, keyHandlers);
       };
 
@@ -648,13 +731,16 @@ function useKeyDown(active, keyHandlers) {
   }, [active, keyHandlers]);
 }
 
-var withUtils = function () {
+var withUtils = function withUtils() {
   return function (Component) {
-    var WithUtils = function (props) {
+    var WithUtils = function WithUtils(props) {
       var utils = useUtils();
-      return createElement(Component, __assign({
-        utils: utils
-      }, props));
+      return (
+        /*#__PURE__*/
+        createElement(Component, __assign({
+          utils: utils
+        }, props))
+      );
     };
 
     WithUtils.displayName = "WithUtils(" + (Component.displayName || Component.name) + ")";
@@ -662,7 +748,7 @@ var withUtils = function () {
   };
 };
 
-var KeyDownListener = function (_a) {
+var KeyDownListener = function KeyDownListener(_a) {
   var onKeyDown = _a.onKeyDown;
   useEffect(function () {
     window.addEventListener('keydown', onKeyDown);
@@ -731,7 +817,8 @@ function (_super) {
           disableFuture = _a.disableFuture,
           disablePast = _a.disablePast;
       var now = utils.date();
-      return Boolean(disableFuture && utils.isAfterDay(day, now) || disablePast && utils.isBeforeDay(day, now) || minDate && utils.isBeforeDay(day, utils.date(minDate)) || maxDate && utils.isAfterDay(day, utils.date(maxDate)));
+      var moment = utils.moment;
+      return Boolean(disableFuture && utils.isAfterDay(day, now) || disablePast && moment(day).isBefore(now, 'second') || minDate && utils.isBeforeDay(day, utils.date(minDate)) || maxDate && utils.isAfterDay(day, utils.date(maxDate)));
     };
 
     _this.shouldDisablePrevMonth = function () {
@@ -789,16 +876,16 @@ function (_super) {
           date = _a.date,
           utils = _a.utils;
       runKeyHandler(event, {
-        ArrowUp: function () {
+        ArrowUp: function ArrowUp() {
           return _this.moveToDay(utils.addDays(date, -7));
         },
-        ArrowDown: function () {
+        ArrowDown: function ArrowDown() {
           return _this.moveToDay(utils.addDays(date, 7));
         },
-        ArrowLeft: function () {
+        ArrowLeft: function ArrowLeft() {
           return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1));
         },
-        ArrowRight: function () {
+        ArrowRight: function ArrowRight() {
           return _this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1));
         }
       });
@@ -810,10 +897,13 @@ function (_super) {
           classes = _a.classes;
       var weeks = utils.getWeekArray(_this.state.currentMonth);
       return weeks.map(function (week) {
-        return createElement("div", {
-          key: "week-" + week[0].toString(),
-          className: classes.week
-        }, _this.renderDays(week));
+        return (
+          /*#__PURE__*/
+          createElement("div", {
+            key: "week-" + week[0].toString(),
+            className: classes.week
+          }, _this.renderDays(week))
+        );
       });
     };
 
@@ -829,24 +919,29 @@ function (_super) {
         var disabled = _this.shouldDisableDate(day);
 
         var isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
-        var dayComponent = createElement(Day, {
+        var dayComponent =
+        /*#__PURE__*/
+        createElement(Day, {
           disabled: disabled,
           current: utils.isSameDay(day, now),
           hidden: !isDayInCurrentMonth,
           selected: utils.isSameDay(selectedDate, day)
-        }, utils.getDayText(day));
+        }, utils.formatByString(day, utils.formats.dayOfMonth));
 
         if (renderDay) {
           dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);
         }
 
-        return createElement(DayWrapper, {
-          value: day,
-          key: day.toString(),
-          disabled: disabled,
-          dayInCurrentMonth: isDayInCurrentMonth,
-          onSelect: _this.handleDaySelect
-        }, dayComponent);
+        return (
+          /*#__PURE__*/
+          createElement(DayWrapper, {
+            value: day,
+            key: day.toString(),
+            disabled: disabled,
+            dayInCurrentMonth: isDayInCurrentMonth,
+            onSelect: _this.handleDaySelect
+          }, dayComponent)
+        );
       });
     };
 
@@ -907,26 +1002,43 @@ function (_super) {
         rightArrowButtonProps = _b.rightArrowButtonProps,
         rightArrowIcon = _b.rightArrowIcon,
         loadingIndicator = _b.loadingIndicator;
-    var loadingElement = loadingIndicator ? loadingIndicator : createElement(CircularProgress, null);
-    return createElement(Fragment, null, allowKeyboardControl && createElement(KeyDownListener, {
-      onKeyDown: this.handleKeyDown
-    }), createElement(CalendarHeader, {
-      currentMonth: currentMonth,
-      slideDirection: slideDirection,
-      onMonthChange: this.handleChangeMonth,
-      leftArrowIcon: leftArrowIcon,
-      leftArrowButtonProps: leftArrowButtonProps,
-      rightArrowIcon: rightArrowIcon,
-      rightArrowButtonProps: rightArrowButtonProps,
-      disablePrevMonth: this.shouldDisablePrevMonth(),
-      disableNextMonth: this.shouldDisableNextMonth()
-    }), createElement(SlideTransition, {
-      slideDirection: slideDirection,
-      transKey: currentMonth.toString(),
-      className: classes.transitionContainer
-    }, createElement(Fragment, null, this.state.loadingQueue > 0 && createElement("div", {
-      className: classes.progressContainer
-    }, loadingElement) || createElement("div", null, this.renderWeeks()))));
+    var loadingElement = loadingIndicator ? loadingIndicator :
+    /*#__PURE__*/
+    createElement(CircularProgress, null);
+    return (
+      /*#__PURE__*/
+      createElement(Fragment, null, allowKeyboardControl &&
+      /*#__PURE__*/
+      createElement(KeyDownListener, {
+        onKeyDown: this.handleKeyDown
+      }),
+      /*#__PURE__*/
+      createElement(CalendarHeader, {
+        currentMonth: currentMonth,
+        slideDirection: slideDirection,
+        onMonthChange: this.handleChangeMonth,
+        leftArrowIcon: leftArrowIcon,
+        leftArrowButtonProps: leftArrowButtonProps,
+        rightArrowIcon: rightArrowIcon,
+        rightArrowButtonProps: rightArrowButtonProps,
+        disablePrevMonth: this.shouldDisablePrevMonth(),
+        disableNextMonth: this.shouldDisableNextMonth()
+      }),
+      /*#__PURE__*/
+      createElement(SlideTransition, {
+        slideDirection: slideDirection,
+        transKey: currentMonth.toString(),
+        className: classes.transitionContainer
+      },
+      /*#__PURE__*/
+      createElement(Fragment, null, this.state.loadingQueue > 0 &&
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.progressContainer
+      }, loadingElement) ||
+      /*#__PURE__*/
+      createElement("div", null, this.renderWeeks()))))
+    );
   };
 
   process.env.NODE_ENV !== "production" ? Calendar.propTypes = {
@@ -936,14 +1048,14 @@ function (_super) {
   } : void 0;
   Calendar.defaultProps = {
     minDate: new Date('1900-01-01'),
-    maxDate: new Date('2100-01-01'),
+    maxDate: new Date('2200-01-01'),
     disablePast: false,
     disableFuture: false,
     allowKeyboardControl: true
   };
   return Calendar;
 }(Component);
-var styles$1 = function (theme) {
+var styles$1 = function styles(theme) {
   return {
     transitionContainer: {
       minHeight: 36 * 6,
@@ -1017,7 +1129,7 @@ var useStyles$6 = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersYear'
 });
-var Year = function (_a) {
+var Year = function Year(_a) {
   var _b;
 
   var onSelect = _a.onSelect,
@@ -1032,24 +1144,31 @@ var Year = function (_a) {
   var handleClick = useCallback(function () {
     return onSelect(value);
   }, [onSelect, value]);
-  return createElement(Typography, __assign({
-    role: "button",
-    component: "div",
-    tabIndex: disabled ? -1 : 0,
-    onClick: handleClick,
-    onKeyPress: handleClick,
-    color: selected ? 'primary' : undefined,
-    variant: selected ? 'h5' : 'subtitle1',
-    children: children,
-    ref: forwardedRef,
-    className: clsx(classes.root, (_b = {}, _b[classes.yearSelected] = selected, _b[classes.yearDisabled] = disabled, _b))
-  }, other));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __assign({
+      role: "button",
+      component: "div",
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleClick,
+      onKeyPress: handleClick,
+      color: selected ? 'primary' : undefined,
+      variant: selected ? 'h5' : 'subtitle1',
+      children: children,
+      ref: forwardedRef,
+      className: clsx(classes.root, (_b = {}, _b[classes.yearSelected] = selected, _b[classes.yearDisabled] = disabled, _b))
+    }, other))
+  );
 };
 Year.displayName = 'Year';
-var Year$1 = forwardRef(function (props, ref) {
-  return createElement(Year, __assign({}, props, {
-    forwardedRef: ref
-  }));
+var Year$1 = /*#__PURE__*/
+forwardRef(function (props, ref) {
+  return (
+    /*#__PURE__*/
+    createElement(Year, __assign({}, props, {
+      forwardedRef: ref
+    }))
+  );
 });
 
 var DIALOG_WIDTH = 310;
@@ -1069,16 +1188,19 @@ var useStyles$7 = makeStyles$1(function (theme) {
 }, {
   name: 'MuiPickersStaticWrapper'
 });
-var StaticWrapper = function (_a) {
+var StaticWrapper = function StaticWrapper(_a) {
   var children = _a.children;
   var classes = useStyles$7();
-  return createElement("div", {
-    className: classes.staticWrapperRoot,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.staticWrapperRoot,
+      children: children
+    })
+  );
 };
 
-var ModalDialog = function (_a) {
+var ModalDialog = function ModalDialog(_a) {
   var _b, _c;
 
   var children = _a.children,
@@ -1097,32 +1219,47 @@ var ModalDialog = function (_a) {
       wider = _a.wider,
       other = __rest(_a, ["children", "classes", "onAccept", "onDismiss", "onClear", "onSetToday", "okLabel", "cancelLabel", "clearLabel", "todayLabel", "clearable", "showTodayButton", "showTabs", "wider"]);
 
-  return createElement(Dialog, __assign({
-    role: "dialog",
-    onClose: onDismiss,
-    classes: {
-      paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
-    }
-  }, other), createElement(DialogContent, {
-    children: children,
-    className: classes.dialog
-  }), createElement(DialogActions, {
-    classes: {
-      root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
-    }
-  }, clearable && createElement(Button, {
-    color: "primary",
-    onClick: onClear
-  }, clearLabel), !clearable && showTodayButton && createElement(Button, {
-    color: "primary",
-    onClick: onSetToday
-  }, todayLabel), cancelLabel && createElement(Button, {
-    color: "primary",
-    onClick: onDismiss
-  }, cancelLabel), okLabel && createElement(Button, {
-    color: "primary",
-    onClick: onAccept
-  }, okLabel)));
+  return (
+    /*#__PURE__*/
+    createElement(Dialog, __assign({
+      role: "dialog",
+      onClose: onDismiss,
+      classes: {
+        paper: clsx(classes.dialogRoot, (_b = {}, _b[classes.dialogRootWider] = wider, _b))
+      }
+    }, other),
+    /*#__PURE__*/
+    createElement(DialogContent, {
+      children: children,
+      className: classes.dialog
+    }),
+    /*#__PURE__*/
+    createElement(DialogActions, {
+      classes: {
+        root: clsx((_c = {}, _c[classes.withAdditionalAction] = clearable || showTodayButton, _c))
+      }
+    }, clearable &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onClear
+    }, clearLabel), !clearable && showTodayButton &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onSetToday
+    }, todayLabel), cancelLabel &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onDismiss
+    }, cancelLabel), okLabel &&
+    /*#__PURE__*/
+    createElement(Button, {
+      color: "primary",
+      onClick: onAccept
+    }, okLabel)))
+  );
 };
 ModalDialog.displayName = 'ModalDialog';
 var styles$2 = createStyles({
@@ -1149,7 +1286,7 @@ var ModalDialog$1 = withStyles(styles$2, {
   name: 'MuiPickersModal'
 })(ModalDialog);
 
-var ModalWrapper = function (_a) {
+var ModalWrapper = function ModalWrapper(_a) {
   var open = _a.open,
       children = _a.children,
       okLabel = _a.okLabel,
@@ -1172,22 +1309,29 @@ var ModalWrapper = function (_a) {
   useKeyDown(open, {
     Enter: onAccept
   });
-  return createElement(Fragment, null, createElement(InputComponent, __assign({}, other, DateInputProps)), createElement(ModalDialog$1, __assign({
-    wider: wider,
-    showTabs: showTabs,
-    open: open,
-    onClear: onClear,
-    onAccept: onAccept,
-    onDismiss: onDismiss,
-    onSetToday: onSetToday,
-    clearLabel: clearLabel,
-    todayLabel: todayLabel,
-    okLabel: okLabel,
-    cancelLabel: cancelLabel,
-    clearable: clearable,
-    showTodayButton: showTodayButton,
-    children: children
-  }, DialogProps)));
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(InputComponent, __assign({}, other, DateInputProps)),
+    /*#__PURE__*/
+    createElement(ModalDialog$1, __assign({
+      wider: wider,
+      showTabs: showTabs,
+      open: open,
+      onClear: onClear,
+      onAccept: onAccept,
+      onDismiss: onDismiss,
+      onSetToday: onSetToday,
+      clearLabel: clearLabel,
+      todayLabel: todayLabel,
+      okLabel: okLabel,
+      cancelLabel: cancelLabel,
+      clearable: clearable,
+      showTodayButton: showTodayButton,
+      children: children
+    }, DialogProps)))
+  );
 };
 process.env.NODE_ENV !== "production" ? ModalWrapper.propTypes = {
   okLabel: node,
@@ -1218,7 +1362,7 @@ var useStyles$8 = makeStyles({
 }, {
   name: 'MuiPickersInlineWrapper'
 });
-var InlineWrapper = function (_a) {
+var InlineWrapper = function InlineWrapper(_a) {
   var _b;
 
   var open = _a.open,
@@ -1239,25 +1383,32 @@ var InlineWrapper = function (_a) {
   useKeyDown(open, {
     Enter: onAccept
   });
-  return createElement(Fragment, null, createElement(InputComponent, __assign({}, other, DateInputProps, {
-    inputRef: ref
-  })), createElement(Popover, __assign({
-    open: open,
-    onClose: onDismiss,
-    anchorEl: ref.current,
-    classes: {
-      paper: clsx(classes.popoverPaper, (_b = {}, _b[classes.popoverPaperWider] = wider, _b))
-    },
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'center'
-    },
-    transformOrigin: {
-      vertical: 'top',
-      horizontal: 'center'
-    },
-    children: children
-  }, PopoverProps)));
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(InputComponent, __assign({}, other, DateInputProps, {
+      inputRef: ref
+    })),
+    /*#__PURE__*/
+    createElement(Popover, __assign({
+      open: open,
+      onClose: onDismiss,
+      anchorEl: ref.current,
+      classes: {
+        paper: clsx(classes.popoverPaper, (_b = {}, _b[classes.popoverPaperWider] = wider, _b))
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      children: children
+    }, PopoverProps)))
+  );
 };
 process.env.NODE_ENV !== "production" ? InlineWrapper.propTypes = {
   onOpen: func,
@@ -1277,15 +1428,22 @@ function getWrapperFromVariant(variant) {
       return ModalWrapper;
   }
 }
-var VariantContext = createContext(null);
-var Wrapper = function (_a) {
+var VariantContext =
+/*#__PURE__*/
+createContext(null);
+var Wrapper = function Wrapper(_a) {
   var variant = _a.variant,
       props = __rest(_a, ["variant"]);
 
   var Component = getWrapperFromVariant(variant);
-  return createElement(VariantContext.Provider, {
-    value: variant || 'dialog'
-  }, createElement(Component, __assign({}, props)));
+  return (
+    /*#__PURE__*/
+    createElement(VariantContext.Provider, {
+      value: variant || 'dialog'
+    },
+    /*#__PURE__*/
+    createElement(Component, __assign({}, props)))
+  );
 };
 
 var useStyles$9 = makeStyles({
@@ -1296,7 +1454,7 @@ var useStyles$9 = makeStyles({
 }, {
   name: 'MuiPickersYearSelection'
 });
-var YearSelection = function (_a) {
+var YearSelection = function YearSelection(_a) {
   var date = _a.date,
       onChange = _a.onChange,
       onYearChange = _a.onYearChange,
@@ -1328,20 +1486,26 @@ var YearSelection = function (_a) {
 
     onChange(newDate, true);
   }, [date, onChange, onYearChange, utils]);
-  return createElement("div", {
-    className: classes.container
-  }, utils.getYearRange(minDate, maxDate).map(function (year) {
-    var yearNumber = utils.getYear(year);
-    var selected = yearNumber === currentYear;
-    return createElement(Year$1, {
-      key: utils.getYearText(year),
-      selected: selected,
-      value: yearNumber,
-      onSelect: onYearSelect,
-      ref: selected ? selectedYearRef : undefined,
-      disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
-    }, utils.getYearText(year));
-  }));
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.container
+    }, utils.getYearRange(minDate, maxDate).map(function (year) {
+      var yearNumber = utils.getYear(year);
+      var selected = yearNumber === currentYear;
+      return (
+        /*#__PURE__*/
+        createElement(Year$1, {
+          key: utils.formatByString(year, utils.formats.year),
+          selected: selected,
+          value: yearNumber,
+          onSelect: onYearSelect,
+          ref: selected ? selectedYearRef : undefined,
+          disabled: Boolean(disablePast && utils.isBeforeYear(year, utils.date()) || disableFuture && utils.isAfterYear(year, utils.date()))
+        }, utils.formatByString(year, utils.formats.year))
+      );
+    }))
+  );
 };
 
 var ClockType;
@@ -1394,12 +1558,17 @@ function (_super) {
     var _c = this.props,
         classes = _c.classes,
         hasSelected = _c.hasSelected;
-    return createElement("div", {
-      style: this.getAngleStyle(),
-      className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
-    }, createElement("div", {
-      className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
-    }));
+    return (
+      /*#__PURE__*/
+      createElement("div", {
+        style: this.getAngleStyle(),
+        className: clsx(classes.pointer, (_a = {}, _a[classes.animateTransform] = this.state.toAnimateTransform, _a))
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        className: clsx(classes.thumb, (_b = {}, _b[classes.noPoint] = hasSelected, _b))
+      }))
+    );
   };
 
   ClockPointer.getDerivedStateFromProps = function (nextProps, state) {
@@ -1418,7 +1587,7 @@ function (_super) {
 
   return ClockPointer;
 }(Component);
-var styles$3 = function (theme) {
+var styles$3 = function styles(theme) {
   return createStyles({
     pointer: {
       width: 2,
@@ -1462,11 +1631,11 @@ var basePoint = {
 var cx = basePoint.x - center.x;
 var cy = basePoint.y - center.y;
 
-var rad2deg = function (rad) {
+var rad2deg = function rad2deg(rad) {
   return rad * 57.29577951308232;
 };
 
-var getAngleValue = function (step, offsetX, offsetY) {
+var getAngleValue = function getAngleValue(step, offsetX, offsetY) {
   var x = offsetX - center.x;
   var y = offsetY - center.y;
   var atan = Math.atan2(cx, cy) - Math.atan2(x, y);
@@ -1482,7 +1651,7 @@ var getAngleValue = function (step, offsetX, offsetY) {
   };
 };
 
-var getHours = function (offsetX, offsetY, ampm) {
+var getHours = function getHours(offsetX, offsetY, ampm) {
   var _a = getAngleValue(30, offsetX, offsetY),
       value = _a.value,
       distance = _a.distance;
@@ -1500,7 +1669,7 @@ var getHours = function (offsetX, offsetY, ampm) {
 
   return value;
 };
-var getMinutes = function (offsetX, offsetY, step) {
+var getMinutes = function getMinutes(offsetX, offsetY, step) {
   if (step === void 0) {
     step = 1;
   }
@@ -1510,10 +1679,10 @@ var getMinutes = function (offsetX, offsetY, step) {
   value = value * step % 60;
   return value;
 };
-var getMeridiem = function (date, utils) {
+var getMeridiem = function getMeridiem(date, utils) {
   return utils.getHours(date) >= 12 ? 'pm' : 'am';
 };
-var convertToMeridiem = function (time, meridiem, ampm, utils) {
+var convertToMeridiem = function convertToMeridiem(time, meridiem, ampm, utils) {
   if (ampm) {
     var currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';
 
@@ -1610,32 +1779,41 @@ function (_super) {
         type = _a.type,
         ampm = _a.ampm;
     var isPointerInner = !ampm && type === ClockType$1.HOURS && (value < 1 || value > 12);
-    return createElement("div", {
-      className: classes.container
-    }, createElement("div", {
-      className: classes.clock
-    }, createElement("div", {
-      role: "menu",
-      tabIndex: -1,
-      className: classes.squareMask,
-      onTouchMove: this.handleTouchMove,
-      onTouchEnd: this.handleTouchEnd,
-      onMouseUp: this.handleMouseUp,
-      onMouseMove: this.handleMove
-    }), createElement("div", {
-      className: classes.pin
-    }), createElement(ClockPointer$1, {
-      type: type,
-      value: value,
-      isInner: isPointerInner,
-      hasSelected: this.hasSelected()
-    }), children));
+    return (
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.container
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.clock
+      },
+      /*#__PURE__*/
+      createElement("div", {
+        role: "menu",
+        tabIndex: -1,
+        className: classes.squareMask,
+        onTouchMove: this.handleTouchMove,
+        onTouchEnd: this.handleTouchEnd,
+        onMouseUp: this.handleMouseUp,
+        onMouseMove: this.handleMove
+      }),
+      /*#__PURE__*/
+      createElement("div", {
+        className: classes.pin
+      }),
+      /*#__PURE__*/
+      createElement(ClockPointer$1, {
+        type: type,
+        value: value,
+        isInner: isPointerInner,
+        hasSelected: this.hasSelected()
+      }), children))
+    );
   };
 
   process.env.NODE_ENV !== "production" ? Clock.propTypes = {
-    type: oneOf(Object.keys(ClockType$1).map(function (key) {
-      return ClockType$1[key];
-    })).isRequired,
+    type: oneOf(Object.values(ClockType$1)).isRequired,
     value: number.isRequired,
     onChange: func.isRequired,
     children: arrayOf(node).isRequired,
@@ -1649,7 +1827,7 @@ function (_super) {
   };
   return Clock;
 }(Component);
-var styles$4 = function (theme) {
+var styles$4 = function styles(theme) {
   return createStyles({
     container: {
       display: 'flex',
@@ -1742,7 +1920,7 @@ var useStyles$a = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersClockNumber'
 });
-var ClockNumber = function (_a) {
+var ClockNumber = function ClockNumber(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -1757,16 +1935,19 @@ var ClockNumber = function (_a) {
       transform: "translate(" + position[0] + "px, " + position[1] + "px"
     };
   }, [index]);
-  return createElement(Typography, {
-    component: "span",
-    className: className,
-    variant: isInner ? 'body2' : 'body1',
-    style: transformStyle,
-    children: label
-  });
-};
-
-var getHourNumbers = function (_a) {
+  return (
+    /*#__PURE__*/
+    createElement(Typography, {
+      component: "span",
+      className: className,
+      variant: isInner ? 'body2' : 'body1',
+      style: transformStyle,
+      children: label
+    })
+  );
+};
+
+var getHourNumbers = function getHourNumbers(_a) {
   var ampm = _a.ampm,
       utils = _a.utils,
       date = _a.date;
@@ -1775,7 +1956,7 @@ var getHourNumbers = function (_a) {
   var startHour = ampm ? 1 : 0;
   var endHour = ampm ? 12 : 23;
 
-  var isSelected = function (hour) {
+  var isSelected = function isSelected(hour) {
     if (ampm) {
       if (hour === 12) {
         return currentHours === 12 || currentHours === 0;
@@ -1800,73 +1981,99 @@ var getHourNumbers = function (_a) {
       selected: isSelected(hour),
       isInner: !ampm && (hour === 0 || hour > 12)
     };
-    hourNumbers.push(createElement(ClockNumber, __assign({
+    hourNumbers.push(
+    /*#__PURE__*/
+    createElement(ClockNumber, __assign({
       key: hour
     }, props)));
   }
 
   return hourNumbers;
 };
-var getMinutesNumbers = function (_a) {
+var getMinutesNumbers = function getMinutesNumbers(_a) {
   var value = _a.value,
       utils = _a.utils;
   var f = utils.formatNumber;
-  return [createElement(ClockNumber, {
+  return [
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('00'),
     selected: value === 0,
     index: 12,
     key: 12
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('05'),
     selected: value === 5,
     index: 1,
     key: 1
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('10'),
     selected: value === 10,
     index: 2,
     key: 2
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('15'),
     selected: value === 15,
     index: 3,
     key: 3
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('20'),
     selected: value === 20,
     index: 4,
     key: 4
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('25'),
     selected: value === 25,
     index: 5,
     key: 5
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('30'),
     selected: value === 30,
     index: 6,
     key: 6
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('35'),
     selected: value === 35,
     index: 7,
     key: 7
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('40'),
     selected: value === 40,
     index: 8,
     key: 8
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('45'),
     selected: value === 45,
     index: 9,
     key: 9
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('50'),
     selected: value === 50,
     index: 10,
     key: 10
-  }), createElement(ClockNumber, {
+  }),
+  /*#__PURE__*/
+  createElement(ClockNumber, {
     label: f('55'),
     selected: value === 55,
     index: 11,
@@ -1874,7 +2081,7 @@ var getMinutesNumbers = function (_a) {
   })];
 };
 
-var TimePickerView = function (_a) {
+var TimePickerView = function TimePickerView(_a) {
   var type = _a.type,
       onHourChange = _a.onHourChange,
       onMinutesChange = _a.onMinutesChange,
@@ -1893,7 +2100,7 @@ var TimePickerView = function (_a) {
             utils: utils,
             ampm: Boolean(ampm)
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var currentMeridiem = getMeridiem(date, utils);
             var updatedTimeWithMeridiem = convertToMeridiem(utils.setHours(date, value), currentMeridiem, Boolean(ampm), utils);
             onHourChange(updatedTimeWithMeridiem, isFinish);
@@ -1908,7 +2115,7 @@ var TimePickerView = function (_a) {
             value: minutesValue,
             utils: utils
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var updatedTime = utils.setMinutes(date, value);
             onMinutesChange(updatedTime, isFinish);
           }
@@ -1922,7 +2129,7 @@ var TimePickerView = function (_a) {
             value: secondsValue,
             utils: utils
           }),
-          onChange: function (value, isFinish) {
+          onChange: function onChange(value, isFinish) {
             var updatedTime = utils.setSeconds(date, value);
             onSecondsChange(updatedTime, isFinish);
           }
@@ -1932,11 +2139,14 @@ var TimePickerView = function (_a) {
         throw new Error('You must provide the type for TimePickerView');
     }
   }, [ampm, date, onHourChange, onMinutesChange, onSecondsChange, type, utils]);
-  return createElement(Clock$1, __assign({
-    type: type,
-    ampm: ampm,
-    minutesStep: minutesStep
-  }, viewProps));
+  return (
+    /*#__PURE__*/
+    createElement(Clock$1, __assign({
+      type: type,
+      ampm: ampm,
+      minutesStep: minutesStep
+    }, viewProps))
+  );
 };
 TimePickerView.displayName = 'TimePickerView';
 process.env.NODE_ENV !== "production" ? TimePickerView.propTypes = {
@@ -1946,15 +2156,14 @@ process.env.NODE_ENV !== "production" ? TimePickerView.propTypes = {
   onSecondsChange: func.isRequired,
   ampm: bool,
   minutesStep: number,
-  type: oneOf(Object.keys(ClockType$1).map(function (key) {
-    return ClockType$1[key];
-  })).isRequired
+  type: oneOf(Object.values(ClockType$1)).isRequired
 } : void 0;
 TimePickerView.defaultProps = {
   ampm: true,
   minutesStep: 1
 };
-var ClockView = memo(TimePickerView);
+var ClockView = /*#__PURE__*/
+memo(TimePickerView);
 
 var useStyles$b = makeStyles(function (theme) {
   return {
@@ -1986,7 +2195,7 @@ var useStyles$b = makeStyles(function (theme) {
 }, {
   name: 'MuiPickersMonth'
 });
-var Month = function (_a) {
+var Month = function Month(_a) {
   var _b;
 
   var selected = _a.selected,
@@ -2000,17 +2209,20 @@ var Month = function (_a) {
   var handleSelection = useCallback(function () {
     onSelect(value);
   }, [onSelect, value]);
-  return createElement(Typography, __assign({
-    role: "button",
-    component: "div",
-    className: clsx(classes.root, (_b = {}, _b[classes.monthSelected] = selected, _b[classes.monthDisabled] = disabled, _b)),
-    tabIndex: disabled ? -1 : 0,
-    onClick: handleSelection,
-    onKeyPress: handleSelection,
-    color: selected ? 'primary' : undefined,
-    variant: selected ? 'h5' : 'subtitle1',
-    children: children
-  }, other));
+  return (
+    /*#__PURE__*/
+    createElement(Typography, __assign({
+      role: "button",
+      component: "div",
+      className: clsx(classes.root, (_b = {}, _b[classes.monthSelected] = selected, _b[classes.monthDisabled] = disabled, _b)),
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleSelection,
+      onKeyPress: handleSelection,
+      color: selected ? 'primary' : undefined,
+      variant: selected ? 'h5' : 'subtitle1',
+      children: children
+    }, other))
+  );
 };
 Month.displayName = 'Month';
 
@@ -2024,7 +2236,7 @@ var useStyles$c = makeStyles({
 }, {
   name: 'MuiPickersMonthSelection'
 });
-var MonthSelection = function (_a) {
+var MonthSelection = function MonthSelection(_a) {
   var disablePast = _a.disablePast,
       disableFuture = _a.disableFuture,
       minDate = _a.minDate,
@@ -2036,7 +2248,7 @@ var MonthSelection = function (_a) {
   var classes = useStyles$c();
   var currentMonth = utils.getMonth(date);
 
-  var shouldDisableMonth = function (month) {
+  var shouldDisableMonth = function shouldDisableMonth(month) {
     var now = utils.date();
     var utilMinDate = utils.date(minDate);
     var utilMaxDate = utils.date(maxDate);
@@ -2055,23 +2267,29 @@ var MonthSelection = function (_a) {
       onMonthChange(newDate);
     }
   }, [date, onChange, onMonthChange, utils]);
-  return createElement("div", {
-    className: classes.container
-  }, utils.getMonthArray(date).map(function (month) {
-    var monthNumber = utils.getMonth(month);
-    var monthText = utils.format(month, 'MMM');
-    return createElement(Month, {
-      key: monthText,
-      value: monthNumber,
-      selected: monthNumber === currentMonth,
-      onSelect: onMonthSelect,
-      disabled: shouldDisableMonth(month)
-    }, monthText);
-  }));
-};
-
-var getOrientation = function () {
-  return typeof window !== 'undefined' && window.screen && window.orientation && Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: classes.container
+    }, utils.getMonthArray(date).map(function (month) {
+      var monthNumber = utils.getMonth(month);
+      var monthText = utils.formatByString(month, utils.formats.monthShort);
+      return (
+        /*#__PURE__*/
+        createElement(Month, {
+          key: monthText,
+          value: monthNumber,
+          selected: monthNumber === currentMonth,
+          onSelect: onMonthSelect,
+          disabled: shouldDisableMonth(month)
+        }, monthText)
+      );
+    }))
+  );
+};
+
+var getOrientation = function getOrientation() {
+  return typeof window !== 'undefined' && window.screen && window.screen.orientation && Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';
 };
 
 function useIsLandscape(customOrientation) {
@@ -2133,7 +2351,7 @@ var useButtonsStyles = makeStyles({
 var useDialogActionsStyles = makeStyles({
   withAdditionalAction: {}
 });
-var Picker = function (props) {
+var Picker = function Picker(props) {
   var _a, _b, _c;
 
   var date = props.date,
@@ -2168,7 +2386,9 @@ var Picker = function (props) {
       showTodayButton = props.showTodayButton,
       todayLabel = props.todayLabel,
       onSetShift = props.onSetShift,
-      showShiftButtons = props.showShiftButtons;
+      showShiftButtons = props.showShiftButtons,
+      setShiftFunction = props.setShiftFunction,
+      shiftButtonValues = props.shiftButtonValues;
   var utils = useUtils();
   var classes = useStyles$d();
   var buttonClasses = useButtonsStyles();
@@ -2186,81 +2406,108 @@ var Picker = function (props) {
   var maxDate = useMemo(function () {
     return utils.date(unparsedMaxDate);
   }, [unparsedMaxDate, utils]);
-  var shiftButtonValues = [1, 2, 3, 7];
-  var shiftButtons = onSetShift && showShiftButtons ? shiftButtonValues.map(function (shiftValue) {
-    return createElement(Button$1, {
-      color: "primary",
-      onClick: function () {
-        return onSetShift(shiftValue);
-      },
-      key: shiftValue
-    }, shiftValue > 0 ? '+' : '', shiftValue);
-  }) : null;
-  return createElement("div", {
-    className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
-  }, !disableToolbar && createElement(ToolbarComponent, __assign({
-    date: date,
-    onChange: onChange,
-    setOpenView: setOpenView,
-    openView: openView,
-    hideTabs: hideTabs,
-    dateRangeIcon: dateRangeIcon,
-    timeIcon: timeIcon,
-    isLandscape: isLandscape
-  }, props)), createElement("div", {
-    className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
-  }, openView === 'year' && createElement(YearSelection, {
-    date: date,
-    onChange: handleChangeAndOpenNext,
-    minDate: minDate,
-    maxDate: maxDate,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    onYearChange: onYearChange,
-    animateYearScrolling: animateYearScrolling
-  }), openView === 'month' && createElement(MonthSelection, {
-    date: date,
-    onChange: handleChangeAndOpenNext,
-    minDate: minDate,
-    maxDate: maxDate,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    onMonthChange: onMonthChange
-  }), openView === 'date' && createElement(Calendar$1, {
-    date: date,
-    onChange: handleChangeAndOpenNext,
-    onMonthChange: onMonthChange,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    minDate: minDate,
-    maxDate: maxDate,
-    leftArrowIcon: leftArrowIcon,
-    leftArrowButtonProps: leftArrowButtonProps,
-    rightArrowIcon: rightArrowIcon,
-    rightArrowButtonProps: rightArrowButtonProps,
-    renderDay: renderDay,
-    shouldDisableDate: shouldDisableDate,
-    allowKeyboardControl: allowKeyboardControl,
-    loadingIndicator: loadingIndicator
-  }), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') && createElement(TimePickerView, {
-    date: date,
-    ampm: ampm,
-    type: openView,
-    minutesStep: minutesStep,
-    onHourChange: handleChangeAndOpenNext,
-    onMinutesChange: handleChangeAndOpenNext,
-    onSecondsChange: handleChangeAndOpenNext
-  })), showActionsBar && createElement(DialogActions$1, {
-    classes: {
-      root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
+  var shiftButtons = new Array();
+
+  if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
+    var _loop_1 = function _loop_1(key) {
+      shiftButtons.push(
+      /*#__PURE__*/
+      createElement(Button$1, {
+        color: "primary",
+        onClick: function onClick() {
+          return onSetShift(setShiftFunction(parseInt(key)));
+        },
+        key: shiftButtonValues[key]
+      }, parseInt(key) > 0 ? '+' : '', shiftButtonValues[key]));
+    };
+
+    for (var key in shiftButtonValues) {
+      _loop_1(key);
     }
-  }, showTodayButton && createElement(Button$1, {
-    color: "primary",
-    onClick: onSetToday,
-    key: "today"
-  }, todayLabel), showShiftButtons && shiftButtons));
+  }
+
+  return (
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.container, (_a = {}, _a[classes.containerLandscape] = isLandscape, _a))
+    }, !disableToolbar &&
+    /*#__PURE__*/
+    createElement(ToolbarComponent, __assign({
+      setOpenView: setOpenView,
+      openView: openView,
+      hideTabs: hideTabs,
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      isLandscape: isLandscape
+    }, props)),
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b))
+    }, openView === 'year' &&
+    /*#__PURE__*/
+    createElement(YearSelection, {
+      date: date,
+      onChange: handleChangeAndOpenNext,
+      minDate: minDate,
+      maxDate: maxDate,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      onYearChange: onYearChange,
+      animateYearScrolling: animateYearScrolling
+    }), openView === 'month' &&
+    /*#__PURE__*/
+    createElement(MonthSelection, {
+      date: date,
+      onChange: handleChangeAndOpenNext,
+      minDate: minDate,
+      maxDate: maxDate,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      onMonthChange: onMonthChange
+    }), openView === 'date' &&
+    /*#__PURE__*/
+    createElement(Calendar$1, {
+      date: date,
+      onChange: handleChangeAndOpenNext,
+      onMonthChange: onMonthChange,
+      disablePast: disablePast,
+      disableFuture: disableFuture,
+      minDate: minDate,
+      maxDate: maxDate,
+      leftArrowIcon: leftArrowIcon,
+      leftArrowButtonProps: leftArrowButtonProps,
+      rightArrowIcon: rightArrowIcon,
+      rightArrowButtonProps: rightArrowButtonProps,
+      renderDay: renderDay,
+      shouldDisableDate: shouldDisableDate,
+      allowKeyboardControl: allowKeyboardControl,
+      loadingIndicator: loadingIndicator
+    }), (openView === 'hours' || openView === 'minutes' || openView === 'seconds') &&
+    /*#__PURE__*/
+    createElement(TimePickerView, {
+      date: date,
+      ampm: ampm,
+      type: openView,
+      minutesStep: minutesStep,
+      onHourChange: handleChangeAndOpenNext,
+      onMinutesChange: handleChangeAndOpenNext,
+      onSecondsChange: handleChangeAndOpenNext
+    })), showActionsBar &&
+    /*#__PURE__*/
+    createElement(DialogActions$1, {
+      classes: {
+        root: clsx((_c = {}, _c[dialogActionsClasses.withAdditionalAction] = showTodayButton, _c))
+      }
+    }, showTodayButton &&
+    /*#__PURE__*/
+    createElement(Button$1, {
+      color: "primary",
+      onClick: onSetToday,
+      key: "today"
+    }, todayLabel), showShiftButtons && setShiftFunction && shiftButtons))
+  );
 };
-Picker.defaultProps = __assign({}, datePickerDefaultProps, {
+Picker.defaultProps = __assign(__assign({}, datePickerDefaultProps), {
   views: Object.keys(viewsMap)
 });
 
@@ -2288,7 +2535,7 @@ function useOpenState(_a) {
   };
 }
 
-var getDisplayDate = function (value, format, utils, isEmpty, _a) {
+var getDisplayDate = function getDisplayDate(value, format, utils, isEmpty, _a) {
   var invalidLabel = _a.invalidLabel,
       emptyLabel = _a.emptyLabel,
       labelFunc = _a.labelFunc;
@@ -2302,10 +2549,10 @@ var getDisplayDate = function (value, format, utils, isEmpty, _a) {
     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) {
+var getComparisonMaxDate = function getComparisonMaxDate(utils, strictCompareDates, date) {
   if (strictCompareDates) {
     return date;
   }
@@ -2313,7 +2560,7 @@ var getComparisonMaxDate = function (utils, strictCompareDates, date) {
   return utils.endOfDay(date);
 };
 
-var getComparisonMinDate = function (utils, strictCompareDates, date) {
+var getComparisonMinDate = function getComparisonMinDate(utils, strictCompareDates, date) {
   if (strictCompareDates) {
     return date;
   }
@@ -2321,7 +2568,7 @@ var getComparisonMinDate = function (utils, strictCompareDates, date) {
   return utils.startOfDay(date);
 };
 
-var validate = function (value, utils, _a // DateTimePicker doesn't support
+var validate = function validate(value, utils, _a // DateTimePicker doesn't support
 ) {
   var maxDate = _a.maxDate,
       minDate = _a.minDate,
@@ -2373,22 +2620,73 @@ function pick12hOr24hFormat(userFormat, ampm, formats) {
 function makeMaskFromFormat(format, numberMaskChar) {
   return format.replace(/[a-z]/gi, numberMaskChar);
 }
-var maskedDateFormatter = function (mask, numberMaskChar, refuse) {
-  return function (value) {
-    if (value === '') {
+var maskedDateFormatter = function maskedDateFormatter(mask, numberMaskChar) {
+  return function (value, oldValue, currentCaretPosition) {
+    var refuse = /[^\d\w_]+/gi;
+
+    if (!value || value === '') {
       return value;
     }
 
-    var result = '';
-    var parsed = value.replace(refuse, '');
+    if (!oldValue) {
+      oldValue = '';
+    }
+
+    if (value == oldValue) {
+      return value;
+    }
+
+    if (value.length < oldValue.length && currentCaretPosition != null) {
+      value = value.slice(0, currentCaretPosition) + '_' + value.slice(currentCaretPosition, oldValue.length);
+    }
+
+    var refusedOldValue = oldValue.replace(refuse, '');
+    var refusedNewValue = value.replace(refuse, '');
+    var refusedMaskSymbols = mask.replace(refuse, '');
+    var minLength = refusedOldValue.length > refusedNewValue.length ? refusedNewValue.length : refusedOldValue.length;
+    var startPos = 0;
+    var endPosShift = 0;
+
+    while (startPos < minLength) {
+      if (refusedNewValue[startPos] == refusedOldValue[startPos]) {
+        startPos++;
+      } else {
+        break;
+      }
+    }
+
+    while (endPosShift < minLength && startPos < refusedNewValue.length - endPosShift && startPos < refusedOldValue.length - endPosShift) {
+      if (refusedNewValue[refusedNewValue.length - endPosShift - 1] == refusedOldValue[refusedOldValue.length - endPosShift - 1]) {
+        endPosShift++;
+      } else {
+        break;
+      }
+    }
+
+    var endStartPos = refusedNewValue.length - endPosShift;
+    endStartPos = endStartPos < startPos ? startPos : endStartPos;
+    var firstPart = refusedNewValue.slice(0, startPos);
+    var addedPart = refusedNewValue.slice(startPos, endStartPos);
+    var endPart = refusedNewValue.slice(endStartPos, refusedNewValue.length);
+    var maxSymbolsInEnd = refusedMaskSymbols.length - firstPart.length - addedPart.length;
+
+    while (maxSymbolsInEnd > endPart.length) {
+      addedPart += numberMaskChar;
+      maxSymbolsInEnd--;
+    }
+
+    var entireRefusedString = firstPart + addedPart + endPart.slice(endPart.length - maxSymbolsInEnd, endPart.length); // Do nothing ?...
+
+    entireRefusedString = entireRefusedString.slice(0, refusedMaskSymbols.length);
     var i = 0;
     var n = 0;
+    var result = '';
 
     while (i < mask.length) {
       var maskChar = mask[i];
 
-      if (maskChar === numberMaskChar && n < parsed.length) {
-        var parsedChar = parsed[n];
+      if (maskChar === numberMaskChar && n < entireRefusedString.length) {
+        var parsedChar = entireRefusedString[n];
         result += parsedChar;
         n += 1;
       } else {
@@ -2402,7 +2700,7 @@ var maskedDateFormatter = function (mask, numberMaskChar, refuse) {
   };
 };
 
-var useValueToDate = function (utils, _a) {
+var useValueToDate = function useValueToDate(utils, _a) {
   var value = _a.value,
       initialFocusedDate = _a.initialFocusedDate;
   var nowRef = useRef(utils.date());
@@ -2424,7 +2722,7 @@ function usePickerState(props, options) {
   var autoOk = props.autoOk,
       disabled = props.disabled,
       onAccept = props.onAccept,
-      onChange = props.onChange,
+      _onChange = props.onChange,
       onError = props.onError,
       value = props.value,
       variant = props.variant;
@@ -2450,26 +2748,27 @@ function usePickerState(props, options) {
   }, [date, isOpen, pickerDate, utils]);
   var acceptDate = useCallback(function (acceptedDate) {
     setIsOpen(false);
-    onChange(acceptedDate);
+
+    _onChange(acceptedDate);
 
     if (onAccept) {
       onAccept(acceptedDate);
     }
-  }, [onAccept, onChange, setIsOpen]);
+  }, [onAccept, _onChange, setIsOpen]);
   var wrapperProps = useMemo(function () {
     return {
       format: format,
       open: isOpen,
-      onClear: function () {
+      onClear: function onClear() {
         return acceptDate(null);
       },
-      onAccept: function () {
+      onAccept: function onAccept() {
         return acceptDate(pickerDate);
       },
-      onSetToday: function () {
+      onSetToday: function onSetToday() {
         return setPickerDate(utils.date());
       },
-      onDismiss: function () {
+      onDismiss: function onDismiss() {
         setIsOpen(false);
       }
     };
@@ -2477,7 +2776,7 @@ function usePickerState(props, options) {
   var pickerProps = useMemo(function () {
     return {
       date: pickerDate,
-      onChange: function (newDate, isFinish) {
+      onChange: function onChange(newDate, isFinish) {
         if (isFinish === void 0) {
           isFinish = true;
         }
@@ -2485,31 +2784,30 @@ function usePickerState(props, options) {
         setPickerDate(newDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (isFinish && autoOk) {
           acceptDate(newDate);
         }
       },
-      onSetToday: function () {
+      onSetToday: function onSetToday() {
         var newDate = utils.date();
         setPickerDate(newDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (autoOk) {
           acceptDate(newDate);
         }
       },
-      onSetShift: function (days) {
-        var newDate = utils.date();
-        newDate = utils.addDays(newDate, days);
+      onSetShift: function onSetShift(shiftDate) {
+        var newDate = utils.date(shiftDate);
 
         if (variant === 'inline' || variant === 'static') {
-          onChange(newDate);
+          _onChange(newDate);
         }
 
         if (autoOk) {
@@ -2517,7 +2815,7 @@ function usePickerState(props, options) {
         }
       }
     };
-  }, [acceptDate, autoOk, onChange, pickerDate, variant]);
+  }, [acceptDate, autoOk, _onChange, pickerDate, variant]);
   var validationError = validate(value, utils, props);
   useEffect(function () {
     if (validationError && onError) {
@@ -2529,7 +2827,7 @@ function usePickerState(props, options) {
     return {
       inputValue: inputValue,
       validationError: validationError,
-      onClick: function () {
+      onClick: function onClick() {
         return !disabled && setIsOpen(true);
       }
     };
@@ -2543,7 +2841,7 @@ function usePickerState(props, options) {
   return pickerState;
 }
 
-var PureDateInput = function (_a) {
+var PureDateInput = function PureDateInput(_a) {
   var inputValue = _a.inputValue,
       inputVariant = _a.inputVariant,
       validationError = _a.validationError,
@@ -2553,19 +2851,22 @@ var PureDateInput = function (_a) {
       other = __rest(_a, ["inputValue", "inputVariant", "validationError", "InputProps", "TextFieldComponent"]);
 
   var PureDateInputProps = useMemo(function () {
-    return __assign({}, InputProps, {
+    return __assign(__assign({}, InputProps), {
       readOnly: true
     });
   }, [InputProps]);
-  return createElement(TextFieldComponent, __assign({
-    error: Boolean(validationError),
-    helperText: validationError
-  }, other, {
-    // do not overridable
-    value: inputValue,
-    variant: inputVariant,
-    InputProps: PureDateInputProps
-  }));
+  return (
+    /*#__PURE__*/
+    createElement(TextFieldComponent, __assign({
+      error: Boolean(validationError),
+      helperText: validationError
+    }, other, {
+      // do not overridable
+      value: inputValue,
+      variant: inputVariant,
+      InputProps: PureDateInputProps
+    }))
+  );
 };
 PureDateInput.displayName = 'PureDateInput';
 
@@ -2622,9 +2923,15 @@ function makePurePicker(_a) {
         showTodayButton = props.showTodayButton,
         todayLabel = props.todayLabel,
         showShiftButtons = props.showShiftButtons,
-        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 = 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(props, options),
@@ -2632,121 +2939,347 @@ function makePurePicker(_a) {
         inputProps = _b.inputProps,
         wrapperProps = _b.wrapperProps;
 
-    return createElement(Wrapper, __assign({
-      variant: variant,
-      InputComponent: PureDateInput,
-      DateInputProps: inputProps,
-      showTodayButton: showTodayButton,
-      todayLabel: todayLabel
-    }, wrapperProps, injectedProps, other), createElement(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
-    })));
+    return (
+      /*#__PURE__*/
+      createElement(Wrapper, __assign({
+        variant: variant,
+        InputComponent: PureDateInput,
+        DateInputProps: inputProps
+      }, wrapperProps, injectedProps, dialogVariantProps, other),
+      /*#__PURE__*/
+      createElement(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;
 }
 
-var KeyboardIcon = function (props) {
-  return React__default.createElement(SvgIcon, __assign({}, props), React__default.createElement("path", {
-    d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
-  }), React__default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  }));
+var KeyboardIcon = function KeyboardIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }))
+  );
+};
+
+var Rifm = function Rifm(props) {
+  var _a = useReducer(function (c) {
+    return c + 1;
+  }, 0),
+      refresh = _a[1];
+
+  var valueRef = useRef(null);
+  var replace = props.replace,
+      maskChar = props.maskChar;
+
+  var _b = useState({
+    value: ''
+  }),
+      previousValue = _b[0],
+      setPreviousValue = _b[1];
+
+  var userValue = replace ? replace(props.format(props.value, previousValue.value)) : props.format(props.value, previousValue.value);
+  var currentPreviousValue = previousValue.value; // state of delete button see comments below about inputType support
+
+  var isDeleleteButtonDownRef = useRef(false);
+
+  var onChange = function onChange(evt) {
+    var eventValue = evt.target.value;
+    var selectionStart = evt.target.selectionStart;
+    valueRef.current = [eventValue, evt.target, eventValue.length > userValue.length, isDeleleteButtonDownRef.current, selectionStart, userValue === props.format(eventValue, currentPreviousValue, selectionStart)]; // The main trick is to update underlying input with non formatted value (= eventValue)
+    // that allows us to calculate right cursor position after formatting (see getCursorPosition)
+    // then we format new value and call props.onChange with masked/formatted value
+    // and finally we are able to set cursor position into right place
+
+    refresh(null);
+  }; // React prints warn on server in non production mode about useLayoutEffect usage
+  // in both cases it's noop
+
+
+  if (typeof window !== 'undefined') {
+    useLayoutEffect(function () {
+      if (valueRef.current == null) return;
+      var _a = valueRef.current,
+          eventValue = _a[0],
+          input = _a[1],
+          isSizeIncreaseOperation = _a[2],
+          isDeleleteButtonDown = _a[3],
+          selectionStart = _a[4],
+          // No operation means that value itself hasn't been changed, BTW cursor, selection etc can be changed
+      isNoOperation = _a[5];
+      valueRef.current = null; // this usually occurs on deleting special symbols like ' here 123'123.00
+      // in case of isDeleleteButtonDown cursor should move differently vs backspace
+
+      var deleteWasNoOp = isDeleleteButtonDown && isNoOperation; // Create string from only accepted symbols
+
+      var clean = function clean(str) {
+        return (str.match(props.accept || /\d|\w/g) || []).join('');
+      };
+
+      var valueBeforeSelectionStart = clean(eventValue.substr(0, input.selectionStart)); // trying to find cursor position in formatted value having knowledge about valueBeforeSelectionStart
+      // This works because we assume that format doesn't change the order of accepted symbols.
+      // Imagine we have formatter which adds ' symbol between numbers, and by default we refuse all non numeric symbols
+      // for example we had input = 1'2|'4 (| means cursor position) then user entered '3' symbol
+      // inputValue = 1'23'|4 so valueBeforeSelectionStart = 123 and formatted value = 1'2'3'4
+      // calling getCursorPosition("1'2'3'4") will give us position after 3, 1'2'3|'4
+      // so for formatting just this function to determine cursor position after formatting is enough
+      // with masking we need to do some additional checks see `mask` below
+
+      var getCursorPosition = function getCursorPosition(val) {
+        var start = 0;
+        var cleanPos = 0;
+
+        for (var i = 0; i !== valueBeforeSelectionStart.length; ++i) {
+          var newPos = val.indexOf(valueBeforeSelectionStart[i], start) + 1;
+          var newCleanPos = clean(val).indexOf(valueBeforeSelectionStart[i], cleanPos) + 1; // this skips position change if accepted symbols order was broken
+          // For example fixes edge case with fixed point numbers:
+          // You have '0|.00', then press 1, it becomes 01|.00 and after format 1.00, this breaks our assumption
+          // that order of accepted symbols is not changed after format,
+          // so here we don't update start position if other accepted symbols was inbetween current and new position
+
+          if (newCleanPos - cleanPos > 1) {
+            newPos = start;
+            newCleanPos = cleanPos;
+          }
+
+          cleanPos = Math.max(newCleanPos, cleanPos);
+          start = Math.max(start, newPos);
+        }
+
+        return start;
+      }; //let start = getCursorPosition(eventValue);
+      //   // Masking part, for masks if size of mask is above some value
+      //   // we need to replace symbols instead of do nothing as like in format
+      //   if (props.mask === true && isSizeIncreaseOperation && !isNoOperation) {
+      //     const c = clean(eventValue.substr(start))[0];
+      //     start = eventValue.indexOf(c, start);
+      //     eventValue = `${eventValue.substr(0, start)}${eventValue.substr(
+      //       start + 1
+      //     )}`;
+      //   }
+
+
+      var formattedValue = props.format(eventValue, currentPreviousValue, selectionStart);
+      var replacedValue = replace ? replace(formattedValue) : formattedValue;
+      var start = getCursorPosition(formattedValue);
+      var inputCharPosition = start - 1;
+
+      if (inputCharPosition > -1) {
+        if (props.letterPosition && props.letterPosition > -1 && replacedValue[inputCharPosition].match(/[a-zA-Z]/) && (inputCharPosition < props.letterPosition || inputCharPosition > props.letterPosition + 1)) {
+          replacedValue = currentPreviousValue;
+        } else if (props.letterPosition && props.letterPosition > -1 && replacedValue[inputCharPosition].match(/\d/) && inputCharPosition >= props.letterPosition && inputCharPosition <= props.letterPosition + 1) {
+          replacedValue = currentPreviousValue;
+        }
+      }
+
+      if (userValue === replacedValue) {
+        // if nothing changed for formatted value, just refresh so userValue will be used at render
+        refresh(null);
+      } else {
+        props.onChange(replacedValue);
+      }
+
+      return function () {
+        // Visually improves working with masked values,
+        // like cursor jumping over refused symbols
+        // as an example date mask: was "5|1-24-3" then user pressed "6"
+        // it becomes "56-|12-43" with this code, and "56|-12-43" without
+        if (props.mask != null && (isSizeIncreaseOperation || isDeleleteButtonDown && !deleteWasNoOp)) {
+          while (formattedValue[start] && clean(formattedValue[start]) === '' && formattedValue[start] != maskChar) {
+            start += 1;
+          }
+        } //input.selectionStart = input.selectionEnd = start + (deleteWasNoOp ? 1 : 0);
+
+      };
+    });
+  }
+
+  useEffect(function () {
+    // until https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType will be supported
+    // by all major browsers (now supported by: +chrome, +safari, ?edge, !firefox)
+    // there is no way I found to distinguish in onChange
+    // backspace or delete was called in some situations
+    // firefox track https://bugzilla.mozilla.org/show_bug.cgi?id=1447239
+    var handleKeyDown = function handleKeyDown(evt) {
+      if (evt.code === 'Delete') {
+        isDeleleteButtonDownRef.current = true;
+      }
+    };
+
+    var handleKeyUp = function handleKeyUp(evt) {
+      if (evt.code === 'Delete') {
+        isDeleleteButtonDownRef.current = false;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, []);
+  var value = valueRef.current != null ? valueRef.current[0] : userValue; //   value = props.format(value, currentPreviousValue);
+
+  previousValue.value = value;
+  return props.children({
+    value: value,
+    onChange: onChange
+  });
 };
 
-var KeyboardDateInput = function (_a) {
+var KeyboardDateInput = function KeyboardDateInput(_a) {
   var inputValue = _a.inputValue,
+      _b = _a.showErrorOnBlur,
+      showErrorOnBlur = _b === void 0 ? false : _b,
       inputVariant = _a.inputVariant,
       validationError = _a.validationError,
       KeyboardButtonProps = _a.KeyboardButtonProps,
       InputAdornmentProps = _a.InputAdornmentProps,
       onClick = _a.onClick,
       onChange = _a.onChange,
+      _onBlur = _a.onBlur,
+      _onFocus = _a.onFocus,
       InputProps = _a.InputProps,
       mask = _a.mask,
-      _b = _a.maskChar,
-      maskChar = _b === void 0 ? '_' : _b,
-      _c = _a.refuse,
-      refuse = _c === void 0 ? /[^\d]+/gi : _c,
+      _c = _a.maskChar,
+      maskChar = _c === void 0 ? '_' : _c,
+      _d = _a.refuse,
       format = _a.format,
       keyboardIcon = _a.keyboardIcon,
       disabled = _a.disabled,
       rifmFormatter = _a.rifmFormatter,
-      _d = _a.TextFieldComponent,
-      TextFieldComponent = _d === void 0 ? TextField : _d,
-      other = __rest(_a, ["inputValue", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "onClick", "onChange", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
+      _e = _a.TextFieldComponent,
+      TextFieldComponent = _e === void 0 ? TextField : _e,
+      other = __rest(_a, ["inputValue", "showErrorOnBlur", "inputVariant", "validationError", "KeyboardButtonProps", "InputAdornmentProps", "onClick", "onChange", "onBlur", "onFocus", "InputProps", "mask", "maskChar", "refuse", "format", "keyboardIcon", "disabled", "rifmFormatter", "TextFieldComponent"]);
 
-  var inputMask = mask || makeMaskFromFormat(format, maskChar); // prettier-ignore
+  var inputMask = mask || makeMaskFromFormat(format, maskChar);
+  var letterPosition = format.indexOf('a'); // prettier-ignore
 
-  var formatter = useCallback(maskedDateFormatter(inputMask, maskChar, refuse), [mask, maskChar]);
+  var formatter = useCallback(maskedDateFormatter(inputMask, maskChar), [mask, maskChar]);
   var position = InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';
 
-  var handleChange = function (text) {
+  var handleChange = function handleChange(text) {
     var finalString = text === '' || text === inputMask ? null : text;
     onChange(finalString);
   };
 
-  return createElement(Rifm, {
-    value: inputValue,
-    onChange: handleChange,
-    refuse: refuse,
-    format: rifmFormatter || formatter
-  }, function (_a) {
-    var _b;
-
-    var onChange = _a.onChange,
-        value = _a.value;
-    return createElement(TextFieldComponent, __assign({
-      disabled: disabled,
-      error: Boolean(validationError),
-      helperText: validationError
-    }, other, {
-      value: value,
-      onChange: onChange,
-      variant: inputVariant,
-      InputProps: __assign({}, InputProps, (_b = {}, _b[position + "Adornment"] = createElement(InputAdornment, __assign({
-        position: position
-      }, InputAdornmentProps), createElement(IconButton$1, __assign({
-        disabled: disabled
-      }, KeyboardButtonProps, {
-        onClick: onClick
-      }), keyboardIcon)), _b))
-    }));
-  });
+  var replace = function replace(text) {
+    return text;
+  };
+
+  var _f = useState(showErrorOnBlur ? true : false),
+      showErrorFlag = _f[0],
+      handleBlur = _f[1];
+
+  return (
+    /*#__PURE__*/
+    createElement(Rifm, {
+      value: inputValue,
+      onChange: handleChange,
+      format: rifmFormatter || formatter,
+      replace: replace,
+      mask: true,
+      maskChar: maskChar,
+      letterPosition: letterPosition
+    }, function (_a) {
+      var _b;
+
+      var onChange = _a.onChange,
+          value = _a.value;
+      return (
+        /*#__PURE__*/
+        createElement(TextFieldComponent, __assign({
+          disabled: disabled,
+          error: Boolean(validationError) && !showErrorFlag,
+          helperText: !showErrorFlag && validationError
+        }, other, {
+          value: value,
+          onChange: onChange,
+          // onInput={changeInputStringValue}
+          // onKeyUp={handleKeyUp}
+          // onMouseUp={handleClick}
+          onBlur: function onBlur() {
+            if (_onBlur) {
+              _onBlur();
+            }
+
+            if (showErrorOnBlur) {
+              handleBlur(false);
+            }
+          },
+          onFocus: function onFocus(ev) {
+            if (_onFocus) {
+              _onFocus(ev);
+            }
+
+            if (showErrorOnBlur) {
+              handleBlur(true);
+            }
+          },
+          variant: inputVariant,
+          InputProps: __assign(__assign({}, InputProps), (_b = {}, _b[position + "Adornment"] =
+          /*#__PURE__*/
+          createElement(InputAdornment, __assign({
+            position: position
+          }, InputAdornmentProps),
+          /*#__PURE__*/
+          createElement(IconButton$1, __assign({
+            disabled: disabled
+          }, KeyboardButtonProps, {
+            onClick: onClick
+          }), keyboardIcon)), _b))
+        }))
+      );
+    })
+  );
 };
 
 KeyboardDateInput.defaultProps = {
-  keyboardIcon: createElement(KeyboardIcon, null)
+  keyboardIcon:
+  /*#__PURE__*/
+  createElement(KeyboardIcon, null)
 };
 
 function parseInputString(value, utils, format) {
@@ -2761,7 +3294,7 @@ function useKeyboardPickerState(props, options) {
   var _a = props.format,
       format = _a === void 0 ? options.getDefaultFormat() : _a,
       inputValue = props.inputValue,
-      onChange = props.onChange,
+      _onChange = props.onChange,
       value = props.value;
   var utils = useUtils();
   var displayDate = getDisplayDate(value, format, utils, value === null, props);
@@ -2777,10 +3310,10 @@ function useKeyboardPickerState(props, options) {
     }
   }, [displayDate, setInnerInputValue, utils, value]);
   var handleKeyboardChange = useCallback(function (date) {
-    onChange(date, date === null ? null : utils.format(date, format));
-  }, [format, onChange, utils]);
+    _onChange(date, date === null ? null : utils.formatByString(date, format));
+  }, [format, _onChange, utils]);
 
-  var _c = usePickerState(__assign({}, props, {
+  var _c = usePickerState(__assign(__assign({}, props), {
     value: dateValue,
     onChange: handleKeyboardChange
   }), options),
@@ -2789,16 +3322,17 @@ function useKeyboardPickerState(props, options) {
       pickerProps = _c.pickerProps;
 
   var inputProps = useMemo(function () {
-    return __assign({}, innerInputProps, {
+    return __assign(__assign({}, innerInputProps), {
       format: wrapperProps.format,
       inputValue: inputValue || innerInputValue,
-      onChange: function (value) {
+      onChange: function onChange(value) {
         setInnerInputValue(value || '');
         var date = value === null ? null : utils.parse(value, wrapperProps.format);
-        onChange(date, value);
+
+        _onChange(date, value);
       }
     });
-  }, [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]);
+  }, [innerInputProps, innerInputValue, inputValue, _onChange, utils, wrapperProps.format]);
   return {
     inputProps: inputProps,
     wrapperProps: wrapperProps,
@@ -2861,7 +3395,9 @@ function makeKeyboardPicker(_a) {
         _a = props.ToolbarComponent,
         ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a,
         showShiftButtons = props.showShiftButtons,
-        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", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "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", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
 
     var injectedProps = getCustomProps ? getCustomProps(props) : {};
     var options = useOptions(props);
@@ -2871,48 +3407,55 @@ function makeKeyboardPicker(_a) {
         inputProps = _b.inputProps,
         wrapperProps = _b.wrapperProps;
 
-    return createElement(Wrapper, __assign({
-      variant: variant,
-      InputComponent: KeyboardDateInput,
-      DateInputProps: inputProps
-    }, injectedProps, wrapperProps, other), createElement(Picker, __assign({}, pickerProps, {
-      ToolbarComponent: ToolbarComponent,
-      disableToolbar: disableToolbar,
-      hideTabs: hideTabs,
-      orientation: orientation,
-      showActionsBar: showActionsBar,
-      showTodayButton: showTodayButton,
-      todayLabel: todayLabel,
-      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,
-      showShiftButtons: showShiftButtons
-    })));
+    return (
+      /*#__PURE__*/
+      createElement(Wrapper, __assign({
+        variant: variant,
+        InputComponent: KeyboardDateInput,
+        DateInputProps: inputProps
+      }, injectedProps, wrapperProps, other),
+      /*#__PURE__*/
+      createElement(Picker, __assign({}, pickerProps, {
+        ToolbarComponent: ToolbarComponent,
+        disableToolbar: disableToolbar,
+        hideTabs: hideTabs,
+        orientation: orientation,
+        showActionsBar: showActionsBar,
+        showTodayButton: showTodayButton,
+        todayLabel: todayLabel,
+        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,
+        showShiftButtons: showShiftButtons,
+        setShiftFunction: setShiftFunction,
+        shiftButtonValues: shiftButtonValues
+      })))
+    );
   }
 
   return WrappedKeyboardPicker;
 }
 
-var defaultProps = __assign({}, datePickerDefaultProps, {
+var defaultProps = __assign(__assign({}, datePickerDefaultProps), {
   openTo: 'date',
   views: ['year', 'date'],
   showActionsBar: false,
@@ -2922,7 +3465,7 @@ var defaultProps = __assign({}, datePickerDefaultProps, {
 function useOptions(props) {
   var utils = useUtils();
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return getFormatByViews(props.views, utils);
     }
   };
@@ -2996,7 +3539,7 @@ function useMeridiemMode(date, ampm, onChange) {
   };
 }
 
-var TimePickerToolbar = function (_a) {
+var TimePickerToolbar = function TimePickerToolbar(_a) {
   var _b, _c, _d;
 
   var date = _a.date,
@@ -3015,66 +3558,87 @@ var TimePickerToolbar = function (_a) {
       handleMeridiemChange = _e.handleMeridiemChange;
 
   var clockTypographyVariant = isLandscape ? 'h3' : 'h2';
-  return createElement(PickerToolbar, {
-    isLandscape: isLandscape,
-    className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
-  }, createElement("div", {
-    className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
-  }, arrayIncludes(views, 'hours') && createElement(ToolbarButton$1, {
-    variant: clockTypographyVariant,
-    onClick: function () {
-      return setOpenView(ClockType$1.HOURS);
-    },
-    selected: openView === ClockType$1.HOURS,
-    label: utils.getHourText(date, Boolean(ampm))
-  }), arrayIncludes(views, ['hours', 'minutes']) && createElement(ToolbarText, {
-    label: ":",
-    variant: clockTypographyVariant,
-    selected: false,
-    className: classes.separator
-  }), arrayIncludes(views, 'minutes') && createElement(ToolbarButton$1, {
-    variant: clockTypographyVariant,
-    onClick: function () {
-      return setOpenView(ClockType$1.MINUTES);
+  return (
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: isLandscape,
+      className: clsx((_b = {}, _b[classes.toolbarLandscape] = isLandscape, _b[classes.toolbarAmpmLeftPadding] = ampm && !isLandscape, _b))
     },
-    selected: openView === ClockType$1.MINUTES,
-    label: utils.getMinuteText(date)
-  }), arrayIncludes(views, ['minutes', 'seconds']) && createElement(ToolbarText, {
-    variant: "h2",
-    label: ":",
-    selected: false,
-    className: classes.separator
-  }), arrayIncludes(views, 'seconds') && createElement(ToolbarButton$1, {
-    variant: "h2",
-    onClick: function () {
-      return setOpenView(ClockType$1.SECONDS);
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.hourMinuteLabel, (_c = {}, _c[classes.hourMinuteLabelLandscape] = isLandscape, _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl', _c))
+    }, arrayIncludes(views, 'hours') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: clockTypographyVariant,
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.HOURS);
+      },
+      selected: openView === ClockType$1.HOURS,
+      label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h)
+    }), arrayIncludes(views, ['hours', 'minutes']) &&
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      label: ":",
+      variant: clockTypographyVariant,
+      selected: false,
+      className: classes.separator
+    }), arrayIncludes(views, 'minutes') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: clockTypographyVariant,
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.MINUTES);
+      },
+      selected: openView === ClockType$1.MINUTES,
+      label: utils.formatByString(date, utils.formats.minutes)
+    }), arrayIncludes(views, ['minutes', 'seconds']) &&
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      variant: "h2",
+      label: ":",
+      selected: false,
+      className: classes.separator
+    }), arrayIncludes(views, 'seconds') &&
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h2",
+      onClick: function onClick() {
+        return setOpenView(ClockType$1.SECONDS);
+      },
+      selected: openView === ClockType$1.SECONDS,
+      label: utils.formatByString(date, utils.formats.seconds)
+    })), ampm &&
+    /*#__PURE__*/
+    createElement("div", {
+      className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
     },
-    selected: openView === ClockType$1.SECONDS,
-    label: utils.getSecondText(date)
-  })), ampm && createElement("div", {
-    className: clsx(classes.ampmSelection, (_d = {}, _d[classes.ampmLandscape] = isLandscape, _d[classes.ampmSelectionWithSeconds] = arrayIncludes(views, 'seconds'), _d))
-  }, createElement(ToolbarButton$1, {
-    disableRipple: true,
-    variant: "subtitle1",
-    selected: meridiemMode === 'am',
-    typographyClassName: classes.ampmLabel,
-    label: utils.getMeridiemText('am'),
-    onClick: function () {
-      return handleMeridiemChange('am');
-    }
-  }), createElement(ToolbarButton$1, {
-    disableRipple: true,
-    variant: "subtitle1",
-    selected: meridiemMode === 'pm',
-    typographyClassName: classes.ampmLabel,
-    label: utils.getMeridiemText('pm'),
-    onClick: function () {
-      return handleMeridiemChange('pm');
-    }
-  })));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      disableRipple: true,
+      variant: "subtitle1",
+      selected: meridiemMode === 'am',
+      typographyClassName: classes.ampmLabel,
+      label: utils.getMeridiemText('am'),
+      onClick: function onClick() {
+        return handleMeridiemChange('am');
+      }
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      disableRipple: true,
+      variant: "subtitle1",
+      selected: meridiemMode === 'pm',
+      typographyClassName: classes.ampmLabel,
+      label: utils.getMeridiemText('pm'),
+      onClick: function onClick() {
+        return handleMeridiemChange('pm');
+      }
+    })))
+  );
 };
 
-var defaultProps$1 = __assign({}, timePickerDefaultProps, {
+var defaultProps$1 = __assign(__assign({}, timePickerDefaultProps), {
   openTo: 'hours',
   views: ['hours', 'minutes']
 });
@@ -3082,10 +3646,10 @@ var defaultProps$1 = __assign({}, timePickerDefaultProps, {
 function useOptions$1(props) {
   var utils = useUtils();
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return pick12hOr24hFormat(props.format, props.ampm, {
-        '12h': utils.time12hFormat,
-        '24h': utils.time24hFormat
+        '12h': utils.formats.hours12h,
+        '24h': utils.formats.hours24h
       });
     }
   };
@@ -3098,7 +3662,7 @@ var TimePicker = makePurePicker({
 var KeyboardTimePicker = makeKeyboardPicker({
   useOptions: useOptions$1,
   DefaultToolbarComponent: TimePickerToolbar,
-  getCustomProps: function (props) {
+  getCustomProps: function getCustomProps(props) {
     return {
       refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
     };
@@ -3107,27 +3671,43 @@ var KeyboardTimePicker = makeKeyboardPicker({
 TimePicker.defaultProps = defaultProps$1;
 KeyboardTimePicker.defaultProps = defaultProps$1;
 
-var TimeIcon = function (props) {
-  return React__default.createElement(SvgIcon, __assign({}, props), React__default.createElement("path", {
-    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-  }), React__default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  }), React__default.createElement("path", {
-    d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
-  }));
-};
-
-var DateRangeIcon = function (props) {
-  return React__default.createElement(SvgIcon, __assign({}, props), React__default.createElement("path", {
-    d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
-  }), React__default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  }));
-};
-
-var viewToTabIndex = function (openView) {
+var TimeIcon = function TimeIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+    }))
+  );
+};
+
+var DateRangeIcon = function DateRangeIcon(props) {
+  return (
+    /*#__PURE__*/
+    React__default.createElement(SvgIcon, __assign({}, props),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
+    }),
+    /*#__PURE__*/
+    React__default.createElement("path", {
+      fill: "none",
+      d: "M0 0h24v24H0z"
+    }))
+  );
+};
+
+var viewToTabIndex = function viewToTabIndex(openView) {
   if (openView === 'date' || openView === 'year') {
     return 'date';
   }
@@ -3135,7 +3715,7 @@ var viewToTabIndex = function (openView) {
   return 'time';
 };
 
-var tabIndexToView = function (tab) {
+var tabIndexToView = function tabIndexToView(tab) {
   if (tab === 'date') {
     return 'date';
   }
@@ -3145,7 +3725,7 @@ var tabIndexToView = function (tab) {
 
 var useStyles$f = makeStyles(function (theme) {
   // prettier-ignore
-  var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background.default;
+  var tabsBackground = theme.palette.type === 'light' ? theme.palette.primary.main : theme.palette.background["default"];
   return {
     tabs: {
       color: theme.palette.getContrastText(tabsBackground),
@@ -3155,7 +3735,7 @@ var useStyles$f = makeStyles(function (theme) {
 }, {
   name: 'MuiPickerDTTabs'
 });
-var DateTimePickerTabs = function (_a) {
+var DateTimePickerTabs = function DateTimePickerTabs(_a) {
   var view = _a.view,
       onChange = _a.onChange,
       dateRangeIcon = _a.dateRangeIcon,
@@ -3164,29 +3744,46 @@ var DateTimePickerTabs = function (_a) {
   var theme = useTheme();
   var indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';
 
-  var handleChange = function (e, value) {
+  var handleChange = function handleChange(e, value) {
     if (value !== viewToTabIndex(view)) {
       onChange(tabIndexToView(value));
     }
   };
 
-  return createElement(Paper, null, createElement(Tabs, {
-    variant: "fullWidth",
-    value: viewToTabIndex(view),
-    onChange: handleChange,
-    className: classes.tabs,
-    indicatorColor: indicatorColor
-  }, createElement(Tab, {
-    value: "date",
-    icon: createElement(Fragment, null, dateRangeIcon)
-  }), createElement(Tab, {
-    value: "time",
-    icon: createElement(Fragment, null, timeIcon)
-  })));
+  return (
+    /*#__PURE__*/
+    createElement(Paper, null,
+    /*#__PURE__*/
+    createElement(Tabs, {
+      variant: "fullWidth",
+      value: viewToTabIndex(view),
+      onChange: handleChange,
+      className: classes.tabs,
+      indicatorColor: indicatorColor
+    },
+    /*#__PURE__*/
+    createElement(Tab, {
+      value: "date",
+      icon:
+      /*#__PURE__*/
+      createElement(Fragment, null, dateRangeIcon)
+    }),
+    /*#__PURE__*/
+    createElement(Tab, {
+      value: "time",
+      icon:
+      /*#__PURE__*/
+      createElement(Fragment, null, timeIcon)
+    })))
+  );
 };
 DateTimePickerTabs.defaultProps = {
-  dateRangeIcon: createElement(DateRangeIcon, null),
-  timeIcon: createElement(TimeIcon, null)
+  dateRangeIcon:
+  /*#__PURE__*/
+  createElement(DateRangeIcon, null),
+  timeIcon:
+  /*#__PURE__*/
+  createElement(TimeIcon, null)
 };
 
 var useStyles$g = makeStyles(function (_) {
@@ -3204,7 +3801,7 @@ var useStyles$g = makeStyles(function (_) {
 }, {
   name: 'MuiPickerDTToolbar'
 });
-var DateTimePickerToolbar = function (_a) {
+var DateTimePickerToolbar = function DateTimePickerToolbar(_a) {
   var date = _a.date,
       openView = _a.openView,
       setOpenView = _a.setOpenView,
@@ -3223,87 +3820,120 @@ var DateTimePickerToolbar = function (_a) {
 
   var theme = useTheme();
   var rtl = theme.direction === 'rtl';
-  return createElement(Fragment, null, createElement(PickerToolbar, {
-    isLandscape: false,
-    className: classes.toolbar
-  }, createElement(Grid, {
-    container: true,
-    justify: "center",
-    wrap: "nowrap"
-  }, createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 5,
-    justify: "flex-start",
-    direction: "column"
-  }, createElement("div", null, createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    onClick: function () {
-      return setOpenView('year');
+  return (
+    /*#__PURE__*/
+    createElement(Fragment, null,
+    /*#__PURE__*/
+    createElement(PickerToolbar, {
+      isLandscape: false,
+      className: classes.toolbar
     },
-    selected: openView === 'year',
-    label: utils.getYearText(date)
-  })), createElement("div", null, createElement(ToolbarButton$1, {
-    variant: "h4",
-    onClick: function () {
-      return setOpenView('date');
+    /*#__PURE__*/
+    createElement(Grid, {
+      container: true,
+      justify: "center",
+      wrap: "nowrap"
     },
-    selected: openView === 'date',
-    label: utils.getDateTimePickerHeaderText(date)
-  }))), createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 6,
-    justify: "center",
-    alignItems: "flex-end",
-    direction: rtl ? 'row-reverse' : 'row'
-  }, createElement(ToolbarButton$1, {
-    variant: "h3",
-    onClick: function () {
-      return setOpenView('hours');
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 5,
+      justify: "flex-start",
+      direction: "column"
     },
-    selected: openView === 'hours',
-    label: utils.getHourText(date, ampm)
-  }), createElement(ToolbarText, {
-    variant: "h3",
-    label: ":",
-    className: classes.separator
-  }), createElement(ToolbarButton$1, {
-    variant: "h3",
-    onClick: function () {
-      return setOpenView('minutes');
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      onClick: function onClick() {
+        return setOpenView('year');
+      },
+      selected: openView === 'year',
+      label: utils.formatByString(date, utils.formats.year)
+    })),
+    /*#__PURE__*/
+    createElement("div", null,
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h4",
+      onClick: function onClick() {
+        return setOpenView('date');
+      },
+      selected: openView === 'date',
+      label: utils.formatByString(date, utils.formats.shortDate)
+    }))),
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 6,
+      justify: "center",
+      alignItems: "flex-end",
+      direction: rtl ? 'row-reverse' : 'row'
     },
-    selected: openView === 'minutes',
-    label: utils.getMinuteText(date)
-  })), ampm && createElement(Grid, {
-    item: true,
-    container: true,
-    xs: 1,
-    direction: "column",
-    justify: "flex-end"
-  }, createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    selected: meridiemMode === 'am',
-    label: utils.getMeridiemText('am'),
-    onClick: function () {
-      return handleMeridiemChange('am');
-    }
-  }), createElement(ToolbarButton$1, {
-    variant: "subtitle1",
-    selected: meridiemMode === 'pm',
-    label: utils.getMeridiemText('pm'),
-    onClick: function () {
-      return handleMeridiemChange('pm');
-    }
-  })))), showTabs && createElement(DateTimePickerTabs, {
-    dateRangeIcon: dateRangeIcon,
-    timeIcon: timeIcon,
-    view: openView,
-    onChange: setOpenView
-  }));
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h3",
+      onClick: function onClick() {
+        return setOpenView('hours');
+      },
+      selected: openView === 'hours',
+      label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h)
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarText, {
+      variant: "h3",
+      label: ":",
+      className: classes.separator
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "h3",
+      onClick: function onClick() {
+        return setOpenView('minutes');
+      },
+      selected: openView === 'minutes',
+      label: utils.formatByString(date, utils.formats.minutes)
+    })), ampm &&
+    /*#__PURE__*/
+    createElement(Grid, {
+      item: true,
+      container: true,
+      xs: 1,
+      direction: "column",
+      justify: "flex-end"
+    },
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      selected: meridiemMode === 'am',
+      label: utils.getMeridiemText('am'),
+      onClick: function onClick() {
+        return handleMeridiemChange('am');
+      }
+    }),
+    /*#__PURE__*/
+    createElement(ToolbarButton$1, {
+      variant: "subtitle1",
+      selected: meridiemMode === 'pm',
+      label: utils.getMeridiemText('pm'),
+      onClick: function onClick() {
+        return handleMeridiemChange('pm');
+      }
+    })))), showTabs &&
+    /*#__PURE__*/
+    createElement(DateTimePickerTabs, {
+      dateRangeIcon: dateRangeIcon,
+      timeIcon: timeIcon,
+      view: openView,
+      onChange: setOpenView
+    }))
+  );
 };
 
-var defaultProps$2 = __assign({}, dateTimePickerDefaultProps, {
+var defaultProps$2 = __assign(__assign({}, dateTimePickerDefaultProps), {
   showActionsBar: false,
   todayLabel: 'TODAY',
   wider: true,
@@ -3320,10 +3950,10 @@ function useOptions$2(props) {
   }
 
   return {
-    getDefaultFormat: function () {
+    getDefaultFormat: function getDefaultFormat() {
       return pick12hOr24hFormat(props.format, props.ampm, {
-        '12h': utils.dateTime12hFormat,
-        '24h': utils.dateTime24hFormat
+        '12h': utils.formats.fullDateTime12h,
+        '24h': utils.formats.fullDateTime24h
       });
     }
   };
@@ -3336,7 +3966,7 @@ var DateTimePicker = makePurePicker({
 var KeyboardDateTimePicker = makeKeyboardPicker({
   useOptions: useOptions$2,
   DefaultToolbarComponent: DateTimePickerToolbar,
-  getCustomProps: function (props) {
+  getCustomProps: function getCustomProps(props) {
     return {
       refuse: props.ampm ? /[^\dap]+/gi : /[^\d]+/gi
     };