@instructure/ui-date-input 9.5.2 → 9.6.1-pr-snapshot-1726659472372

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.6.1-pr-snapshot-1726659472372](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.6.1-pr-snapshot-1726659472372) (2024-09-18)
+
+
+### Features
+
+* **ui-date-input:** improve DateInput2 api, extend docs ([27bc27f](https://github.com/instructure/instructure-ui/commit/27bc27f8a5e18cf3cabee8b5ea18f75629728ab6))
+
+
+
+
+
+# [9.6.0](https://github.com/instructure/instructure-ui/compare/v9.5.2...v9.6.0) (2024-08-14)
+
+
+### Features
+
+* **ui-calendar,ui-date-input:** improve DateInput2 onChange callback, add date formatting option, extend docs ([4e2c23c](https://github.com/instructure/instructure-ui/commit/4e2c23c3288885e49030f1f471d61b2fed29b54c))
+
+
+
+
+
 ## [9.5.2](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2) (2024-08-05)
 
 

package/es/DateInput2/index.js

@@ -35,23 +35,85 @@ import { passthroughProps } from '@instructure/ui-react-utils';
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
 import { jsx } from '@instructure/emotion';
 import { propTypes } from './props';
-function parseDate(dateString) {
-  const date = new Date(dateString);
-  // return empty string if not a valid date
-  return isNaN(date.getTime()) ? '' : date.toISOString();
+function parseLocaleDate(dateString = '', locale, timeZone) {
+  // This function may seem complicated but it basically does one thing:
+  //   Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
+  //   to the locale. So if the locale is `en-us` the dateString is expected to be in the format of M/D/YYYY.
+  //   The dateString is also assumed to be in the given timeZone, so "1/1/2020" in "America/Los_Angeles" timezone is
+  //   expected to be "2020-01-01T08:00:00.000Z" in UTC time.
+  //   This function tries to parse the dateString taking these variables into account and return a javascript Date object
+  //   that is adjusted to be in UTC.
+
+  // Split string on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/.
+  // The '+' allows splitting on consecutive delimiters.
+  // `.filter(Boolean)` is needed because some locales have a delimeter at the end (e.g.: "hu-hu")
+  const splitDate = dateString.split(/[,.\s/.-]+/).filter(Boolean);
+
+  // create a locale formatted new date to later extract the order and delimeter information
+  const localeDate = new Intl.DateTimeFormat(locale).formatToParts(new Date());
+  let index = 0;
+  let day, month, year;
+  localeDate.forEach(part => {
+    if (part.type === 'month') {
+      month = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'day') {
+      day = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'year') {
+      year = parseInt(splitDate[index], 10);
+      index++;
+    }
+  });
+
+  // sensible year limitations
+  if (!year || !month || !day || year < 1000 || year > 9999) return null;
+
+  // create utc date from year, month (zero indexed) and day
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  // Format date string in the provided timezone
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).formatToParts(date);
+
+  // Extract the date and time parts from the formatted string
+  const dateStringInTimezone = parts.reduce((acc, part) => {
+    return part.type === 'literal' ? acc : {
+      ...acc,
+      [part.type]: part.value
+    };
+  }, {});
+
+  // Create a date string in the format 'YYYY-MM-DDTHH:mm:ss'
+  const dateInTimezone = `${dateStringInTimezone.year}-${dateStringInTimezone.month}-${dateStringInTimezone.day}T${dateStringInTimezone.hour}:${dateStringInTimezone.minute}:${dateStringInTimezone.second}`;
+
+  // Calculate time difference for timezone offset
+  const timeDiff = new Date(dateInTimezone + 'Z').getTime() - date.getTime();
+  const newTime = new Date(date.getTime() - timeDiff);
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return newTime;
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -59,76 +121,23 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
+  dateFormat,
+  onRequestValidateDate,
+  // margin, TODO enable this prop
   ...rest
 }) => {
-  const _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedDate = _useState2[0],
-    setSelectedDate = _useState2[1];
-  const _useState3 = useState(messages || []),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inputMessages = _useState4[0],
-    setInputMessages = _useState4[1];
-  const _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showPopover = _useState6[0],
-    setShowPopover = _useState6[1];
   const localeContext = useContext(ApplyLocaleContext);
-  useEffect(() => {
-    // when `value` is changed, validation runs again and removes the error message if validation passes
-    // but it's NOT adding error message if validation fails for better UX
-    validateInput(true);
-  }, [value]);
-  useEffect(() => {
-    setInputMessages(messages || []);
-  }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-    // blur event formats the input which should trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(value));
-    }
-  };
-  const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setSelectedDate(dateString);
-    setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(dateString, true);
-  };
-
-  // onlyRemoveError is used to remove the error msg immediately when the user inputs a valid date (and don't wait for blur event)
-  const validateInput = (onlyRemoveError = false) => {
-    // don't validate empty input
-    if (!value || parseDate(value) || selectedDate) {
-      setInputMessages(messages || []);
-      return true;
-    }
-    // only show error if there is no user provided validation callback
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
-      setInputMessages([{
-        type: 'error',
-        text: invalidDateErrorMessage
-      }]);
-    }
-    return false;
-  };
   const getLocale = () => {
     if (locale) {
       return locale;
     } else if (localeContext.locale) {
       return localeContext.locale;
     }
+    // default to the system's locale
     return Locale.browserLocale();
   };
   const getTimezone = () => {
@@ -140,21 +149,86 @@ const DateInput2 = ({
     // default to the system's timezone
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
+  const _useState = useState(messages || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputMessages = _useState2[0],
+    setInputMessages = _useState2[1];
+  const _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showPopover = _useState4[0],
+    setShowPopover = _useState4[1];
+  useEffect(() => {
+    setInputMessages(messages || []);
+  }, [messages]);
+  useEffect(() => {
+    const _parseDate = parseDate(value),
+      _parseDate2 = _slicedToArray(_parseDate, 2),
+      utcIsoDate = _parseDate2[1];
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || []);
+    }
+  }, [value]);
+  const parseDate = (dateString = '') => {
+    let date = null;
+    if (dateFormat) {
+      if (typeof dateFormat === 'string') {
+        // use dateFormat instead of the user locale
+        date = parseLocaleDate(dateString, dateFormat, getTimezone());
+      } else if (dateFormat.parser) {
+        date = dateFormat.parser(dateString);
+      }
+    } else {
+      // no dateFormat prop passed, use locale for formatting
+      date = parseLocaleDate(dateString, getLocale(), getTimezone());
+    }
+    return date ? [formatDate(date), date.toISOString()] : ['', ''];
+  };
+  const formatDate = date => {
+    // use formatter function if provided
+    if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
+      return dateFormat.formatter(date);
+    }
+    // if dateFormat set to a locale, use that, otherwise default to the user's locale
+    return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
+      timeZone: getTimezone(),
+      calendar: 'gregory',
+      numberingSystem: 'latn'
+    });
+  };
+  const handleInputChange = (e, newValue) => {
+    const _parseDate3 = parseDate(newValue),
+      _parseDate4 = _slicedToArray(_parseDate3, 2),
+      utcIsoDate = _parseDate4[1];
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
+  };
+  const handleDateSelected = (dateString, _momentDate, e) => {
+    setShowPopover(false);
+    const newValue = formatDate(new Date(dateString));
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
+  };
   const handleBlur = e => {
-    const isInputValid = validateInput(false);
-    if (isInputValid && selectedDate) {
-      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      });
-      handleInputChange(e, formattedDate);
+    const _parseDate5 = parseDate(value),
+      _parseDate6 = _slicedToArray(_parseDate5, 2),
+      localeDate = _parseDate6[0],
+      utcIsoDate = _parseDate6[1];
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
+      }
+    } else if (value && invalidDateErrorMessage) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage
+      }]);
     }
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
+  const selectedDate = parseDate(value)[1];
   return jsx(TextInput, Object.assign({}, passthroughProps(rest), {
+    // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -162,7 +236,6 @@ const DateInput2 = ({
     value: value,
     placeholder: placeholder,
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -172,7 +245,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -187,8 +259,8 @@ const DateInput2 = ({
       onDateSelected: handleDateSelected,
       selectedDate: selectedDate,
       visibleMonth: selectedDate,
-      locale: locale,
-      timezone: timezone,
+      locale: getLocale(),
+      timezone: getTimezone(),
       role: "listbox",
       renderNextMonthButton: jsx(IconButton, {
         size: "small",

package/es/DateInput2/props.js

@@ -29,7 +29,6 @@ const propTypes = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   screenReaderLabels: PropTypes.object.isRequired,
   value: controllable(PropTypes.string),
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
@@ -38,12 +37,11 @@ const propTypes = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  onRequestShowCalendar: PropTypes.func,
-  onRequestHideCalendar: PropTypes.func,
-  onRequestValidateDate: PropTypes.func,
   invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
-  withYearPicker: PropTypes.object
+  withYearPicker: PropTypes.object,
+  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onRequestValidateDate: PropTypes.func
 };
 export { propTypes };

package/lib/DateInput2/index.js

@@ -44,23 +44,85 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 /** @jsx jsx */
-function parseDate(dateString) {
-  const date = new Date(dateString);
-  // return empty string if not a valid date
-  return isNaN(date.getTime()) ? '' : date.toISOString();
+function parseLocaleDate(dateString = '', locale, timeZone) {
+  // This function may seem complicated but it basically does one thing:
+  //   Given a dateString, a locale and a timeZone. The dateString is assumed to be formatted according
+  //   to the locale. So if the locale is `en-us` the dateString is expected to be in the format of M/D/YYYY.
+  //   The dateString is also assumed to be in the given timeZone, so "1/1/2020" in "America/Los_Angeles" timezone is
+  //   expected to be "2020-01-01T08:00:00.000Z" in UTC time.
+  //   This function tries to parse the dateString taking these variables into account and return a javascript Date object
+  //   that is adjusted to be in UTC.
+
+  // Split string on '.', whitespace, '/', ',' or '-' using regex: /[.\s/.-]+/.
+  // The '+' allows splitting on consecutive delimiters.
+  // `.filter(Boolean)` is needed because some locales have a delimeter at the end (e.g.: "hu-hu")
+  const splitDate = dateString.split(/[,.\s/.-]+/).filter(Boolean);
+
+  // create a locale formatted new date to later extract the order and delimeter information
+  const localeDate = new Intl.DateTimeFormat(locale).formatToParts(new Date());
+  let index = 0;
+  let day, month, year;
+  localeDate.forEach(part => {
+    if (part.type === 'month') {
+      month = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'day') {
+      day = parseInt(splitDate[index], 10);
+      index++;
+    } else if (part.type === 'year') {
+      year = parseInt(splitDate[index], 10);
+      index++;
+    }
+  });
+
+  // sensible year limitations
+  if (!year || !month || !day || year < 1000 || year > 9999) return null;
+
+  // create utc date from year, month (zero indexed) and day
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  // Format date string in the provided timezone
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }).formatToParts(date);
+
+  // Extract the date and time parts from the formatted string
+  const dateStringInTimezone = parts.reduce((acc, part) => {
+    return part.type === 'literal' ? acc : {
+      ...acc,
+      [part.type]: part.value
+    };
+  }, {});
+
+  // Create a date string in the format 'YYYY-MM-DDTHH:mm:ss'
+  const dateInTimezone = `${dateStringInTimezone.year}-${dateStringInTimezone.month}-${dateStringInTimezone.day}T${dateStringInTimezone.hour}:${dateStringInTimezone.minute}:${dateStringInTimezone.second}`;
+
+  // Calculate time difference for timezone offset
+  const timeDiff = new Date(dateInTimezone + 'Z').getTime() - date.getTime();
+  const newTime = new Date(date.getTime() - timeDiff);
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return newTime;
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -68,76 +130,23 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
+  dateFormat,
+  onRequestValidateDate,
+  // margin, TODO enable this prop
   ...rest
 }) => {
-  const _useState = (0, _react.useState)(''),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedDate = _useState2[0],
-    setSelectedDate = _useState2[1];
-  const _useState3 = (0, _react.useState)(messages || []),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    inputMessages = _useState4[0],
-    setInputMessages = _useState4[1];
-  const _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    showPopover = _useState6[0],
-    setShowPopover = _useState6[1];
   const localeContext = (0, _react.useContext)(_ApplyLocaleContext.ApplyLocaleContext);
-  (0, _react.useEffect)(() => {
-    // when `value` is changed, validation runs again and removes the error message if validation passes
-    // but it's NOT adding error message if validation fails for better UX
-    validateInput(true);
-  }, [value]);
-  (0, _react.useEffect)(() => {
-    setInputMessages(messages || []);
-  }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-    // blur event formats the input which should trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(value));
-    }
-  };
-  const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setSelectedDate(dateString);
-    setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(dateString, true);
-  };
-
-  // onlyRemoveError is used to remove the error msg immediately when the user inputs a valid date (and don't wait for blur event)
-  const validateInput = (onlyRemoveError = false) => {
-    // don't validate empty input
-    if (!value || parseDate(value) || selectedDate) {
-      setInputMessages(messages || []);
-      return true;
-    }
-    // only show error if there is no user provided validation callback
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
-      setInputMessages([{
-        type: 'error',
-        text: invalidDateErrorMessage
-      }]);
-    }
-    return false;
-  };
   const getLocale = () => {
     if (locale) {
       return locale;
     } else if (localeContext.locale) {
       return localeContext.locale;
     }
+    // default to the system's locale
     return _Locale.Locale.browserLocale();
   };
   const getTimezone = () => {
@@ -149,21 +158,86 @@ const DateInput2 = ({
     // default to the system's timezone
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
+  const _useState = (0, _react.useState)(messages || []),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputMessages = _useState2[0],
+    setInputMessages = _useState2[1];
+  const _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showPopover = _useState4[0],
+    setShowPopover = _useState4[1];
+  (0, _react.useEffect)(() => {
+    setInputMessages(messages || []);
+  }, [messages]);
+  (0, _react.useEffect)(() => {
+    const _parseDate = parseDate(value),
+      _parseDate2 = (0, _slicedToArray2.default)(_parseDate, 2),
+      utcIsoDate = _parseDate2[1];
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || []);
+    }
+  }, [value]);
+  const parseDate = (dateString = '') => {
+    let date = null;
+    if (dateFormat) {
+      if (typeof dateFormat === 'string') {
+        // use dateFormat instead of the user locale
+        date = parseLocaleDate(dateString, dateFormat, getTimezone());
+      } else if (dateFormat.parser) {
+        date = dateFormat.parser(dateString);
+      }
+    } else {
+      // no dateFormat prop passed, use locale for formatting
+      date = parseLocaleDate(dateString, getLocale(), getTimezone());
+    }
+    return date ? [formatDate(date), date.toISOString()] : ['', ''];
+  };
+  const formatDate = date => {
+    // use formatter function if provided
+    if (typeof dateFormat !== 'string' && dateFormat !== null && dateFormat !== void 0 && dateFormat.formatter) {
+      return dateFormat.formatter(date);
+    }
+    // if dateFormat set to a locale, use that, otherwise default to the user's locale
+    return date.toLocaleDateString(typeof dateFormat === 'string' ? dateFormat : getLocale(), {
+      timeZone: getTimezone(),
+      calendar: 'gregory',
+      numberingSystem: 'latn'
+    });
+  };
+  const handleInputChange = (e, newValue) => {
+    const _parseDate3 = parseDate(newValue),
+      _parseDate4 = (0, _slicedToArray2.default)(_parseDate3, 2),
+      utcIsoDate = _parseDate4[1];
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, utcIsoDate);
+  };
+  const handleDateSelected = (dateString, _momentDate, e) => {
+    setShowPopover(false);
+    const newValue = formatDate(new Date(dateString));
+    onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue, dateString);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, newValue, dateString);
+  };
   const handleBlur = e => {
-    const isInputValid = validateInput(false);
-    if (isInputValid && selectedDate) {
-      const formattedDate = new Date(selectedDate).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      });
-      handleInputChange(e, formattedDate);
+    const _parseDate5 = parseDate(value),
+      _parseDate6 = (0, _slicedToArray2.default)(_parseDate5, 2),
+      localeDate = _parseDate6[0],
+      utcIsoDate = _parseDate6[1];
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(e, localeDate, utcIsoDate);
+      }
+    } else if (value && invalidDateErrorMessage) {
+      setInputMessages([{
+        type: 'error',
+        text: invalidDateErrorMessage
+      }]);
     }
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, isInputValid);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(e, value || '', utcIsoDate);
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, value || '', utcIsoDate);
   };
+  const selectedDate = parseDate(value)[1];
   return (0, _emotion.jsx)(_TextInput.TextInput, Object.assign({}, (0, _passthroughProps.passthroughProps)(rest), {
+    // margin={'large'} TODO add this prop to TextInput
     renderLabel: renderLabel,
     onChange: handleInputChange,
     onBlur: handleBlur,
@@ -171,7 +245,6 @@ const DateInput2 = ({
     value: value,
     placeholder: placeholder,
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -181,7 +254,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -196,8 +268,8 @@ const DateInput2 = ({
       onDateSelected: handleDateSelected,
       selectedDate: selectedDate,
       visibleMonth: selectedDate,
-      locale: locale,
-      timezone: timezone,
+      locale: getLocale(),
+      timezone: getTimezone(),
       role: "listbox",
       renderNextMonthButton: (0, _emotion.jsx)(_IconButton.IconButton, {
         size: "small",

package/lib/DateInput2/props.js

@@ -36,7 +36,6 @@ const propTypes = exports.propTypes = {
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
   screenReaderLabels: _propTypes.default.object.isRequired,
   value: (0, _controllable.controllable)(_propTypes.default.string),
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   placeholder: _propTypes.default.string,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -45,11 +44,10 @@ const propTypes = exports.propTypes = {
   isInline: _propTypes.default.bool,
   width: _propTypes.default.string,
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-  onRequestShowCalendar: _propTypes.default.func,
-  onRequestHideCalendar: _propTypes.default.func,
-  onRequestValidateDate: _propTypes.default.func,
   invalidDateErrorMessage: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
   locale: _propTypes.default.string,
   timezone: _propTypes.default.string,
-  withYearPicker: _propTypes.default.object
+  withYearPicker: _propTypes.default.object,
+  dateFormat: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
+  onRequestValidateDate: _propTypes.default.func
 };