@instructure/ui-date-input 9.6.1-snapshot-2 → 9.7.2

package/CHANGELOG.md

@@ -3,12 +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-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.6.1-snapshot-2) (2024-09-06)
+## [9.7.2](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.2) (2024-10-10)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
+## [9.7.1](https://github.com/instructure/instructure-ui/compare/v9.7.0...v9.7.1) (2024-10-10)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
+# [9.7.0](https://github.com/instructure/instructure-ui/compare/v9.6.0...v9.7.0) (2024-09-23)
 
 
 ### Features
 
-* **ui-date-input:** improve DateInput2 api, extend docs ([42c83a2](https://github.com/instructure/instructure-ui/commit/42c83a240434dd52233c482292caa556babb5c3a))
+* **ui-date-input:** improve DateInput2 api, extend docs ([f369604](https://github.com/instructure/instructure-ui/commit/f3696040d59f9baf9b9a27070e6fbc3d458e4495))
 
 
 

package/es/DateInput2/index.js

@@ -35,45 +35,75 @@ import { passthroughProps } from '@instructure/ui-react-utils';
 import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
 import { jsx } from '@instructure/emotion';
 import { propTypes } from './props';
-/*
- * Tries parsing a date in a given timezone, if it's not possible, returns an empty string
- * If parsing is successful an ISO formatted datetime string is returned in UTC timezone
- */
-function timezoneDateToUtc(dateString, timezone) {
-  // Don't try to parse short dateString, they are incomplete
-  if (dateString.length < 10) {
-    return '';
-  }
+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++;
+    }
+  });
 
-  // Create a Date object from the input date string
-  const date = new Date(dateString);
+  // sensible limitations
+  if (!year || !month || !day || year < 1000 || year > 9999) return null;
 
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return '';
+  // 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;
   }
 
-  // snippet from https://stackoverflow.com/a/57842203
-  // but it might need to be improved:
-  // "This produces incorrect datetimes for several hours surrounding daylight saving times if the
-  // computer running the code is in a zone that doesn't obey the same daylight saving shifts as the target zone."
-  const utcDate = new Date(date.toLocaleString('en-US', {
-    timeZone: 'UTC'
-  }));
-  const tzDate = new Date(date.toLocaleString('en-US', {
-    timeZone: timezone
-  }));
-  const offset = utcDate.getTime() - tzDate.getTime();
-  const newDate = new Date(date.getTime() + offset);
-  return newDate.toISOString();
-}
-function defaultDateFormatter(dateString, locale, timezone) {
-  return new Date(dateString).toLocaleDateString(locale, {
-    month: 'long',
+  // 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',
-    day: 'numeric',
-    timeZone: timezone
-  });
+    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;
 }
 
 /**
@@ -88,7 +118,6 @@ const DateInput2 = ({
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -96,12 +125,12 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
-  formatDate = defaultDateFormatter,
+  dateFormat,
+  onRequestValidateDate,
   // margin, TODO enable this prop
   ...rest
 }) => {
@@ -124,75 +153,111 @@ const DateInput2 = ({
     // default to the system's timezone
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
   };
-  const _useState = useState(value ? formatDate(value, getLocale(), getTimezone()) : ''),
+  const _useState = useState(messages || []),
     _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
-  const _useState3 = useState(messages || []),
+    inputMessages = _useState2[0],
+    setInputMessages = _useState2[1];
+  const _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    inputMessages = _useState4[0],
-    setInputMessages = _useState4[1];
-  const _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showPopover = _useState6[0],
-    setShowPopover = _useState6[1];
+    showPopover = _useState4[0],
+    setShowPopover = _useState4[1];
   useEffect(() => {
-    setInputMessages(messages || []);
+    // don't set input messages if there is an error set already
+    if (!inputMessages) {
+      setInputMessages(messages || []);
+    }
   }, [messages]);
   useEffect(() => {
-    validateInput(true);
-  }, [inputValue]);
+    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) => {
-    setInputValue(newValue);
-    const parsedInput = timezoneDateToUtc(newValue, getTimezone());
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, parsedInput, 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) => {
-    const formattedDate = formatDate(dateString, getLocale(), getTimezone());
-    setInputValue(formattedDate);
     setShowPopover(false);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, dateString, formattedDate);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(dateString, true);
+    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);
   };
-
-  // 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 (!inputValue || timezoneDateToUtc(inputValue, getTimezone()) || value) {
-      setInputMessages(messages || []);
-      return true;
-    }
-    // only show error if there is no user provided validation callback
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string' && !onRequestValidateDate) {
+  const handleBlur = e => {
+    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
       }]);
     }
-    return false;
-  };
-  const handleBlur = e => {
-    if (value) {
-      const formattedDate = formatDate(value, getLocale(), getTimezone());
-      if (formattedDate !== inputValue) {
-        setInputValue(formattedDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange(e, value, formattedDate);
-      }
-    }
-    validateInput(false);
-    onRequestValidateDate === null || onRequestValidateDate === void 0 ? void 0 : onRequestValidateDate(value, !!value);
-    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: inputValue,
-    placeholder: placeholder,
+    value: value,
+    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : getDateFromatHint(),
     width: width,
-    size: size,
     display: isInline ? 'inline-block' : 'block',
     messages: inputMessages,
     interaction: interaction,
@@ -202,7 +267,6 @@ const DateInput2 = ({
         withBorder: false,
         screenReaderLabel: screenReaderLabels.calendarIcon,
         shape: "circle",
-        size: size,
         interaction: interaction
       }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
       isShowingContent: showPopover,
@@ -215,8 +279,8 @@ const DateInput2 = ({
     }, jsx(Calendar, {
       withYearPicker: withYearPicker,
       onDateSelected: handleDateSelected,
-      selectedDate: value,
-      visibleMonth: value,
+      selectedDate: selectedDate,
+      visibleMonth: selectedDate,
       locale: getLocale(),
       timezone: getTimezone(),
       role: "listbox",

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,11 +37,11 @@ const propTypes = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  onRequestValidateDate: PropTypes.func,
   invalidDateErrorMessage: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
   withYearPicker: PropTypes.object,
-  formatDate: PropTypes.func
+  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  onRequestValidateDate: PropTypes.func
 };
 export { propTypes };