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

package/src/DateInput2/index.tsx

@@ -44,47 +44,79 @@ import type { DateInput2Props } from './props'
 import type { FormMessage } from '@instructure/ui-form-field'
 import type { Moment } from '@instructure/ui-i18n'
 
-/*
- * 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: string, timezone: string): string {
-  // Don't try to parse short dateString, they are incomplete
-  if (dateString.length < 10) {
-    return ''
-  }
+function parseLocaleDate(dateString: string = '', locale: string, timeZone: string): Date | null {
+  // 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.
 
-  // Create a Date object from the input date string
-  const date = new Date(dateString)
+  // 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)
 
-  // Check if the date is valid
-  if (isNaN(date.getTime())) {
-    return ''
+  // 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: number | undefined, month: number | undefined, year: number | undefined
+  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
   }
 
-  // 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)
+  // 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)
 
-  return newDate.toISOString()
-}
+  // Extract the date and time parts from the formatted string
+  const dateStringInTimezone: {
+    [key: string]: number
+  } = parts.reduce((acc, part) => {
+    return part.type === 'literal' ? acc : {
+      ...acc,
+      [part.type]: part.value,
+    }
+  }, {})
 
-function defaultDateFormatter(
-  dateString: string,
-  locale: string,
-  timezone: string
-) {
-  return new Date(dateString).toLocaleDateString(locale, {
-    month: 'long',
-    year: 'numeric',
-    day: 'numeric',
-    timeZone: timezone
-  })
+  // 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
 }
 
 /**
@@ -99,7 +131,6 @@ const DateInput2 = ({
   screenReaderLabels,
   isRequired = false,
   interaction = 'enabled',
-  size = 'medium',
   isInline = false,
   value,
   messages,
@@ -107,12 +138,12 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
-  formatDate = defaultDateFormatter,
+  dateFormat,
+  onRequestValidateDate,
   // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
@@ -138,26 +169,73 @@ const DateInput2 = ({
     return Intl.DateTimeFormat().resolvedOptions().timeZone
   }
 
-  const [inputValue, setInputValue] = useState<string>(
-    value ? formatDate(value, getLocale(), getTimezone()) : ''
-  )
   const [inputMessages, setInputMessages] = useState<FormMessage[]>(
     messages || []
   )
   const [showPopover, setShowPopover] = useState<boolean>(false)
 
   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 [, utcIsoDate] = parseDate(value)
+    // clear error messages if date becomes valid
+    if (utcIsoDate || !value) {
+      setInputMessages(messages || [])
+    }
+  }, [value])
+
+  const parseDate = (dateString: string = ''): [string, string] => {
+    let date: Date | null = 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: Date): string => {
+    // use formatter function if provided
+    if (typeof dateFormat !== 'string' && 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: string) => {
+      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: SyntheticEvent, newValue: string) => {
-    setInputValue(newValue)
-    const parsedInput = timezoneDateToUtc(newValue, getTimezone())
-    onChange?.(e, parsedInput, newValue)
+    const [, utcIsoDate] = parseDate(newValue)
+    onChange?.(e, newValue, utcIsoDate)
   }
 
   const handleDateSelected = (
@@ -165,50 +243,32 @@ const DateInput2 = ({
     _momentDate: Moment,
     e: SyntheticEvent
   ) => {
-    const formattedDate = formatDate(dateString, getLocale(), getTimezone())
-    setInputValue(formattedDate)
     setShowPopover(false)
-    onChange?.(e, dateString, formattedDate)
-    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): boolean => {
-    // 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
-    ) {
-      setInputMessages([
-        {
-          type: 'error',
-          text: invalidDateErrorMessage
-        }
-      ])
-    }
-
-    return false
+    const newValue = formatDate(new Date(dateString))
+    onChange?.(
+      e,
+      newValue,
+      dateString
+    )
+    onRequestValidateDate?.(e, newValue, dateString)
   }
 
   const handleBlur = (e: SyntheticEvent) => {
-    if (value) {
-      const formattedDate = formatDate(value, getLocale(), getTimezone())
-      if (formattedDate !== inputValue) {
-        setInputValue(formattedDate)
-        onChange?.(e, value, formattedDate)
+    const [localeDate, utcIsoDate] = parseDate(value)
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange?.(e, localeDate, utcIsoDate)
       }
+    } else if (value && invalidDateErrorMessage) {
+      setInputMessages([
+        {type: 'error', text: invalidDateErrorMessage}
+      ])
     }
-    validateInput(false)
-    onRequestValidateDate?.(value, !!value)
-    onBlur?.(e)
+    onRequestValidateDate?.(e, value || '', utcIsoDate)
+    onBlur?.(e, value || '', utcIsoDate)
   }
 
+  const selectedDate = parseDate(value)[1]
   return (
     <TextInput
       {...passthroughProps(rest)}
@@ -217,10 +277,9 @@ const DateInput2 = ({
       onChange={handleInputChange}
       onBlur={handleBlur}
       isRequired={isRequired}
-      value={inputValue}
-      placeholder={placeholder}
+      value={value}
+      placeholder={placeholder ?? getDateFromatHint()}
       width={width}
-      size={size}
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
@@ -232,7 +291,6 @@ const DateInput2 = ({
               withBorder={false}
               screenReaderLabel={screenReaderLabels.calendarIcon}
               shape="circle"
-              size={size}
               interaction={interaction}
             >
               <IconCalendarMonthLine />
@@ -249,8 +307,8 @@ const DateInput2 = ({
           <Calendar
             withYearPicker={withYearPicker}
             onDateSelected={handleDateSelected}
-            selectedDate={value}
-            visibleMonth={value}
+            selectedDate={selectedDate}
+            visibleMonth={selectedDate}
             locale={getLocale()}
             timezone={getTimezone()}
             role="listbox"

package/src/DateInput2/props.ts

@@ -45,16 +45,11 @@ type DateInput2OwnProps = {
     nextMonthButton: string
   }
   /**
-   * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.
+   * Specifies the input value.
    */
   value?: string
   /**
-   * Specifies the input size.
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Html placeholder text to display when the input has no value. This should
-   * be hint text, not a label replacement.
+   * Placeholder text for the input field. If it's left undefined it will display a hint for the date format (like `DD/MM/YYYY`).
    */
   placeholder?: string
   /**
@@ -62,13 +57,13 @@ type DateInput2OwnProps = {
    */
   onChange?: (
     event: React.SyntheticEvent,
-    isoDateString: string,
-    formattedValue: string
+    inputValue: string,
+    utcDateString: string
   ) => void
   /**
    * Callback executed when the input fires a blur event.
    */
-  onBlur?: (event: React.SyntheticEvent) => void
+  onBlur?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void
   /**
    * Specifies if interaction with the input is enabled, disabled, or readonly.
    * When "disabled", the input changes visibly to indicate that it cannot
@@ -98,15 +93,6 @@ type DateInput2OwnProps = {
    * }`
    */
   messages?: FormMessage[]
-  /**
-   * Callback fired when the input is blurred or a date is selected from the calendar.
-   * Feedback should be provided to the user when this function is called if the selected date or input
-   * value is invalid. The component has an internal check whether the date can be parsed to a valid date.
-   */
-  onRequestValidateDate?: (
-    isoDateString?: string,
-    internalValidationPassed?: boolean
-  ) => void | FormMessage[]
   /**
    * The message shown to the user when the date is invalid. If this prop is not set, validation is bypassed.
    * If it's set to an empty string, validation happens and the input border changes to red if validation hasn't passed.
@@ -134,7 +120,7 @@ type DateInput2OwnProps = {
    * This property can also be set via a context property and if both are set
    * then the component property takes precedence over the context property.
    *
-   * The web browser's timezone will be used if no value is set via a component
+   * The system timezone will be used if no value is set via a component
    * property or a context property.
    **/
   timezone?: string
@@ -156,18 +142,19 @@ type DateInput2OwnProps = {
     startYear: number
     endYear: number
   }
-
   /**
-   * Formatting function for how the date should be displayed inside the input field. It will be applied if the user clicks on a date in the date picker of after blur event from the input field.
-   */
-  formatDate?: (isoDate: string, locale: string, timezone: string) => string
+  * By default the date format is determined by the locale but can be changed via this prop to an alternate locale (passing it in as a string) or a custom parser and formatter (both as functions)
+  */
+  dateFormat?: {
+    parser: (input: string) => Date | null
+    formatter: (date: Date) => string
+  } | string
 
   /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   * Callback executed when the input fires a blur event or a date is selected from the picker.
    */
-  // margin?: Spacing TODO enable this prop
+  onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void
+  // margin?: Spacing // TODO enable this prop
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -182,7 +169,6 @@ const propTypes: PropValidators<PropKeys> = {
   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,
@@ -191,7 +177,6 @@ const propTypes: PropValidators<PropKeys> = {
   isInline: PropTypes.bool,
   width: PropTypes.string,
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  onRequestValidateDate: PropTypes.func,
   invalidDateErrorMessage: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.string
@@ -199,7 +184,11 @@ const propTypes: PropValidators<PropKeys> = {
   locale: PropTypes.string,
   timezone: PropTypes.string,
   withYearPicker: PropTypes.object,
-  formatDate: PropTypes.func
+  dateFormat: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  onRequestValidateDate: PropTypes.func,
 }
 
 export type { DateInput2Props }