@instructure/ui-date-input 10.2.3-snapshot-10 → 10.2.3-snapshot-11

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-10) (2024-10-01)
+## [10.2.3-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-11) (2024-10-02)
 
-**Note:** Version bump only for package @instructure/ui-date-input
+
+### Features
+
+* **ui-calendar,ui-date-input:** update DateInput2 api, add placeholder hint ([ee9dfab](https://github.com/instructure/instructure-ui/commit/ee9dfab8cb5cff76d829bd24163d2052a7da46a9))
 
 
 

package/es/DateInput2/index.js

@@ -26,7 +26,6 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
 
 /** @jsx jsx */
 import { useState, useEffect, useContext } from 'react';
-import moment from 'moment-timezone';
 import { Calendar } from '@instructure/ui-calendar';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
@@ -36,24 +35,89 @@ import { passthroughProps } from '@instructure/ui-react-utils';
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
 import { jsx } from '@instructure/emotion';
 import { propTypes } from './props';
-function isValidDate(dateString) {
-  return !isNaN(new Date(dateString).getTime());
-}
-function isValidMomentDate(dateString, locale, timezone) {
-  return moment.tz(dateString, [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+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.: hungarian dates are formatted as `2024. 09. 19.`)
+  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 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));
+  if (date.getMonth() !== month - 1 || date.getDate() !== day) {
+    // Check if the Date object adjusts the values. If it does, the input is invalid.
+    return null;
+  }
+
+  // Format date string in the provided timezone. The locale here is irrelevant, we only care about how to time is adjusted for the 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 utcTime = new Date(date.getTime() - timeDiff);
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return utcTime;
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -61,69 +125,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(() => {
-    validateInput(true);
-  }, [value]);
-  useEffect(() => {
-    setInputMessages(messages || []);
-  }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-  };
-  const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
-  };
-  const validateInput = (onlyRemoveError = false) => {
-    // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
-    // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
-      setSelectedDate(value || '');
-      setInputMessages(messages || []);
-      return true;
-    }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages(messages => [{
-        type: 'error',
-        text: invalidDateErrorMessage
-      }, ...messages]);
-    }
-    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 = () => {
@@ -135,29 +153,111 @@ 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(() => {
+    // don't set input messages if there is an error set already
+    if (!inputMessages) {
+      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 getDateFromatHint = () => {
+    const exampleDate = new Date('2024-09-01');
+    const formattedDate = formatDate(exampleDate);
+
+    // Create a regular expression to find the exact match of the number
+    const regex = n => {
+      return new RegExp(`(?<!\\d)0*${n}(?!\\d)`, 'g');
+    };
+
+    // Replace the matched number with the same number of dashes
+    const year = `${exampleDate.getFullYear()}`;
+    const month = `${exampleDate.getMonth() + 1}`;
+    const day = `${exampleDate.getDate()}`;
+    return formattedDate.replace(regex(year), match => 'Y'.repeat(match.length)).replace(regex(month), match => 'M'.repeat(match.length)).replace(regex(day), match => 'D'.repeat(match.length));
+  };
+  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 && value) {
-      const formattedDate = new Date(value).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,
     isRequired: isRequired,
     value: value,
-    placeholder: placeholder,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -167,7 +267,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -182,8 +281,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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.DateInput2 = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _IconCalendarMonthLine = require("@instructure/ui-icons/lib/IconCalendarMonthLine.js");
@@ -45,24 +44,89 @@ var _IconCalendarMonthLin, _IconArrowOpenEndSoli, _IconArrowOpenStartSo;
  * SOFTWARE.
  */
 /** @jsx jsx */
-function isValidDate(dateString) {
-  return !isNaN(new Date(dateString).getTime());
-}
-function isValidMomentDate(dateString, locale, timezone) {
-  return _momentTimezone.default.tz(dateString, [_momentTimezone.default.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'], locale, true, timezone).isValid();
+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.: hungarian dates are formatted as `2024. 09. 19.`)
+  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 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));
+  if (date.getMonth() !== month - 1 || date.getDate() !== day) {
+    // Check if the Date object adjusts the values. If it does, the input is invalid.
+    return null;
+  }
+
+  // Format date string in the provided timezone. The locale here is irrelevant, we only care about how to time is adjusted for the 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 utcTime = new Date(date.getTime() - timeDiff);
+  // Return the UTC Date corresponding to the time in the specified timezone
+  return utcTime;
 }
 
 /**
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -70,69 +134,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)(() => {
-    validateInput(true);
-  }, [value]);
-  (0, _react.useEffect)(() => {
-    setInputMessages(messages || []);
-  }, [messages]);
-  const handleInputChange = (e, value) => {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
-  };
-  const handleDateSelected = (dateString, _momentDate, e) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    });
-    handleInputChange(e, formattedDate);
-    setShowPopover(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(formattedDate, true);
-  };
-  const validateInput = (onlyRemoveError = false) => {
-    // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
-    // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (isValidDate(value || '') && isValidMomentDate(value || '', getLocale(), getTimezone()) || value === '') {
-      setSelectedDate(value || '');
-      setInputMessages(messages || []);
-      return true;
-    }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages(messages => [{
-        type: 'error',
-        text: invalidDateErrorMessage
-      }, ...messages]);
-    }
-    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 = () => {
@@ -144,29 +162,111 @@ 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)(() => {
+    // don't set input messages if there is an error set already
+    if (!inputMessages) {
+      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 getDateFromatHint = () => {
+    const exampleDate = new Date('2024-09-01');
+    const formattedDate = formatDate(exampleDate);
+
+    // Create a regular expression to find the exact match of the number
+    const regex = n => {
+      return new RegExp(`(?<!\\d)0*${n}(?!\\d)`, 'g');
+    };
+
+    // Replace the matched number with the same number of dashes
+    const year = `${exampleDate.getFullYear()}`;
+    const month = `${exampleDate.getMonth() + 1}`;
+    const day = `${exampleDate.getDate()}`;
+    return formattedDate.replace(regex(year), match => 'Y'.repeat(match.length)).replace(regex(month), match => 'M'.repeat(match.length)).replace(regex(day), match => 'D'.repeat(match.length));
+  };
+  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 && value) {
-      const formattedDate = new Date(value).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,
     isRequired: isRequired,
     value: value,
-    placeholder: placeholder,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -176,7 +276,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -191,8 +290,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",