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

package/src/DateInput2/index.tsx

@@ -44,9 +44,34 @@ 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 {
+/*
+ * 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 ''
+  }
+
+  // Create a Date object from the input date string
   const date = new Date(dateString)
-  return isNaN(date.getTime()) ? '' : date.toISOString()
+
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return ''
+  }
+
+  // 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(
@@ -66,6 +91,8 @@ function defaultDateFormatter(
 ---
 category: components
 ---
+
+@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -89,37 +116,48 @@ const DateInput2 = ({
   // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
-  const [selectedDate, setSelectedDate] = useState<string>('')
+  const localeContext = useContext(ApplyLocaleContext)
+
+  const getLocale = () => {
+    if (locale) {
+      return locale
+    } else if (localeContext.locale) {
+      return localeContext.locale
+    }
+    // default to the system's locale
+    return Locale.browserLocale()
+  }
+
+  const getTimezone = () => {
+    if (timezone) {
+      return timezone
+    } else if (localeContext.timezone) {
+      return localeContext.timezone
+    }
+    // default to the system's timezone
+    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)
-  const localeContext = useContext(ApplyLocaleContext)
-
-  useEffect(() => {
-    // when `value` is changed, validation removes the error message if passes
-    // but it's NOT adding error message if validation fails for better UX
-    validateInput(true)
-  }, [value])
 
   useEffect(() => {
     setInputMessages(messages || [])
   }, [messages])
 
   useEffect(() => {
-    setSelectedDate(parseDate(value || ''))
-  }, [])
+    validateInput(true)
+  }, [inputValue])
 
-  const handleInputChange = (
-    e: SyntheticEvent,
-    newValue: string,
-    parsedDate: string = ''
-  ) => {
-    // blur event formats the input which shouldn't trigger parsing
-    if (e.type !== 'blur') {
-      setSelectedDate(parseDate(newValue))
-    }
-    onChange?.(e, newValue, parsedDate)
+  const handleInputChange = (e: SyntheticEvent, newValue: string) => {
+    setInputValue(newValue)
+    const parsedInput = timezoneDateToUtc(newValue, getTimezone())
+    onChange?.(e, parsedInput, newValue)
   }
 
   const handleDateSelected = (
@@ -128,17 +166,16 @@ const DateInput2 = ({
     e: SyntheticEvent
   ) => {
     const formattedDate = formatDate(dateString, getLocale(), getTimezone())
-    const parsedDate = parseDate(dateString)
-    setSelectedDate(parsedDate)
-    handleInputChange(e, formattedDate, parsedDate)
+    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 (!value || parseDate(value) || selectedDate) {
+    if (!inputValue || timezoneDateToUtc(inputValue, getTimezone()) || value) {
       setInputMessages(messages || [])
       return true
     }
@@ -159,32 +196,16 @@ const DateInput2 = ({
     return false
   }
 
-  const getLocale = () => {
-    if (locale) {
-      return locale
-    } else if (localeContext.locale) {
-      return localeContext.locale
-    }
-    return Locale.browserLocale()
-  }
-
-  const getTimezone = () => {
-    if (timezone) {
-      return timezone
-    } else if (localeContext.timezone) {
-      return localeContext.timezone
-    }
-    // default to the system's timezone
-    return Intl.DateTimeFormat().resolvedOptions().timeZone
-  }
-
   const handleBlur = (e: SyntheticEvent) => {
-    const isInputValid = validateInput(false)
-    if (isInputValid && selectedDate) {
-      const formattedDate = formatDate(selectedDate, getLocale(), getTimezone())
-      handleInputChange(e, formattedDate, selectedDate)
+    if (value) {
+      const formattedDate = formatDate(value, getLocale(), getTimezone())
+      if (formattedDate !== inputValue) {
+        setInputValue(formattedDate)
+        onChange?.(e, value, formattedDate)
+      }
     }
-    onRequestValidateDate?.(value, isInputValid)
+    validateInput(false)
+    onRequestValidateDate?.(value, !!value)
     onBlur?.(e)
   }
 
@@ -196,7 +217,7 @@ const DateInput2 = ({
       onChange={handleInputChange}
       onBlur={handleBlur}
       isRequired={isRequired}
-      value={value}
+      value={inputValue}
       placeholder={placeholder}
       width={width}
       size={size}
@@ -228,8 +249,8 @@ const DateInput2 = ({
           <Calendar
             withYearPicker={withYearPicker}
             onDateSelected={handleDateSelected}
-            selectedDate={selectedDate}
-            visibleMonth={selectedDate}
+            selectedDate={value}
+            visibleMonth={value}
             locale={getLocale()}
             timezone={getTimezone()}
             role="listbox"

package/src/DateInput2/props.ts

@@ -45,9 +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)
+  value?: string
   /**
    * Specifies the input size.
    */
@@ -62,8 +62,8 @@ type DateInput2OwnProps = {
    */
   onChange?: (
     event: React.SyntheticEvent,
-    inputValue: string,
-    dateString: string
+    isoDateString: string,
+    formattedValue: string
   ) => void
   /**
    * Callback executed when the input fires a blur event.
@@ -99,21 +99,12 @@ 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.
+   * 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?: (
-    value?: string,
+    isoDateString?: string,
     internalValidationPassed?: boolean
   ) => void | FormMessage[]
   /**
@@ -200,8 +191,6 @@ 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,