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

package/src/DateInput2/index.tsx

@@ -44,23 +44,88 @@ import type { DateInput2Props } from './props'
 import type { FormMessage } from '@instructure/ui-form-field'
 import type { Moment } from '@instructure/ui-i18n'
 
-function parseDate(dateString: string): string {
-  const date = new Date(dateString)
-  // return empty string if not a valid date
-  return isNaN(date.getTime()) ? '' : date.toISOString()
+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.
+
+  // 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: 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 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: {
+    [key: string]: number
+  } = 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,85 +133,24 @@ const DateInput2 = ({
   onChange,
   onBlur,
   withYearPicker,
-  onRequestValidateDate,
   invalidDateErrorMessage,
   locale,
   timezone,
   placeholder,
+  dateFormat,
+  onRequestValidateDate,
+  // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
-  const [selectedDate, setSelectedDate] = useState<string>('')
-  const [inputMessages, setInputMessages] = useState<FormMessage[]>(
-    messages || []
-  )
-  const [showPopover, setShowPopover] = useState<boolean>(false)
   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: SyntheticEvent, value: string) => {
-    onChange?.(e, value)
-    // blur event formats the input which should trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(value))
-    }
-  }
-
-  const handleDateSelected = (
-    dateString: string,
-    _momentDate: Moment,
-    e: SyntheticEvent
-  ) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    })
-    handleInputChange(e, formattedDate)
-    setSelectedDate(dateString)
-    setShowPopover(false)
-    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 (!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()
   }
 
@@ -160,27 +164,88 @@ const DateInput2 = ({
     return Intl.DateTimeFormat().resolvedOptions().timeZone
   }
 
+  const [inputMessages, setInputMessages] = useState<FormMessage[]>(
+    messages || []
+  )
+  const [showPopover, setShowPopover] = useState<boolean>(false)
+
+  useEffect(() => {
+    setInputMessages(messages || [])
+  }, [messages])
+
+  useEffect(() => {
+    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 handleInputChange = (e: SyntheticEvent, newValue: string) => {
+    const [, utcIsoDate] = parseDate(newValue)
+    onChange?.(e, newValue, utcIsoDate)
+  }
+
+  const handleDateSelected = (
+    dateString: string,
+    _momentDate: Moment,
+    e: SyntheticEvent
+  ) => {
+    setShowPopover(false)
+    const newValue = formatDate(new Date(dateString))
+    onChange?.(
+      e,
+      newValue,
+      dateString
+    )
+    onRequestValidateDate?.(e, newValue, dateString)
+  }
+
   const handleBlur = (e: SyntheticEvent) => {
-    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 [localeDate, utcIsoDate] = parseDate(value)
+    if (localeDate) {
+      if (localeDate !== value) {
+        onChange?.(e, localeDate, utcIsoDate)
+      }
+    } else if (value && invalidDateErrorMessage) {
+      setInputMessages([
+        {type: 'error', text: invalidDateErrorMessage}
+      ])
     }
-    onRequestValidateDate?.(value, isInputValid)
-    onBlur?.(e)
+    onRequestValidateDate?.(e, value || '', utcIsoDate)
+    onBlur?.(e, value || '', utcIsoDate)
   }
 
+  const selectedDate = parseDate(value)[1]
   return (
     <TextInput
       {...passthroughProps(rest)}
+      // margin={'large'} TODO add this prop to TextInput
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -188,7 +253,6 @@ const DateInput2 = ({
       value={value}
       placeholder={placeholder}
       width={width}
-      size={size}
       display={isInline ? 'inline-block' : 'block'}
       messages={inputMessages}
       interaction={interaction}
@@ -200,7 +264,6 @@ const DateInput2 = ({
               withBorder={false}
               screenReaderLabel={screenReaderLabels.calendarIcon}
               shape="circle"
-              size={size}
               interaction={interaction}
             >
               <IconCalendarMonthLine />
@@ -219,8 +282,8 @@ const DateInput2 = ({
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
             visibleMonth={selectedDate}
-            locale={locale}
-            timezone={timezone}
+            locale={getLocale()}
+            timezone={getTimezone()}
             role="listbox"
             renderNextMonthButton={
               <IconButton

package/src/DateInput2/props.ts

@@ -28,7 +28,11 @@ import type { SyntheticEvent, InputHTMLAttributes } from 'react'
 import { controllable } from '@instructure/ui-prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { OtherHTMLAttributes, Renderable, PropValidators } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  Renderable,
+  PropValidators
+} from '@instructure/shared-types'
 
 type DateInput2OwnProps = {
   /**
@@ -41,13 +45,9 @@ type DateInput2OwnProps = {
     nextMonthButton: string
   }
   /**
-   * Specifies the input value.
+   * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.
    */
-  value?: string // TODO: controllable(PropTypes.string)
-  /**
-   * Specifies the input size.
-   */
-  size?: 'small' | 'medium' | 'large'
+  value?: string
   /**
    * Html placeholder text to display when the input has no value. This should
    * be hint text, not a label replacement.
@@ -56,11 +56,15 @@ type DateInput2OwnProps = {
   /**
    * Callback fired when the input changes.
    */
-  onChange?: (event: React.SyntheticEvent, value: string) => void
+  onChange?: (
+    event: React.SyntheticEvent,
+    value: 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
@@ -90,24 +94,6 @@ type DateInput2OwnProps = {
    * }`
    */
   messages?: FormMessage[]
-  /**
-   * Callback fired requesting the calendar be shown.
-   */
-  onRequestShowCalendar?: (event: SyntheticEvent) => void
-  /**
-   * Callback fired requesting the calendar be hidden.
-   */
-  onRequestHideCalendar?: (event: SyntheticEvent) => void
-  /**
-   * Callback fired when the input is blurred. 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?: (
-    value?: 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.
@@ -157,6 +143,19 @@ type DateInput2OwnProps = {
     startYear: number
     endYear: number
   }
+  /**
+  * 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
+    formatter: (date: Date) => string
+  } | string
+
+  /**
+   * Callback executed when the input fires a blur event or a date is selected from the picker.
+   */
+  onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void
+  // margin?: Spacing // TODO enable this prop
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -171,7 +170,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,
@@ -180,16 +178,18 @@ const propTypes: PropValidators<PropKeys> = {
   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 type { DateInput2Props }