feat(ui-date-input): add feature to disable dates and access the input's ref

Author: balzss

packages/ui-date-input/src/DateInput/README.md

@@ -2,7 +2,7 @@
 describes: DateInput
 ---
 
-> _Note:_ you can now try the updated (but still experimental) [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using that instead of `DateInput` which will be deprecated in the future.
+> _Note:_ we recommend to update to the new [`DateInput2`](/#DateInput2) which is easier to configure for developers, has a better UX, better accessibility features and a year picker. `DateInput` will be deprecated in the future.
 
 The `DateInput` component provides a visual interface for inputting date data.
 

packages/ui-date-input/src/DateInput2/README.md

@@ -305,3 +305,38 @@ render(<Example />)
 ### Date format hint
 
 If the `placeholder` property is undefined it will display a hint for the date format (like `DD/MM/YYYY`). Usually it is recommended to leave it as it is for a better user experience.
+
+### Disabling dates
+
+You can use the `disabledDates` prop to disable specific dates. It accepts either an array of ISO8601 date strings or a function. Keep in mind that this will only disable the dates in the calendar and does not prevent the user the enter them into the input field. To validate those values please use the `onRequestValidateDate` prop.
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const [inputValue, setInputValue] = useState('2/5/2025')
+  const [dateString, setDateString] = useState('')
+  return (
+    <DateInput2
+      renderLabel="Choose a date"
+      disabledDates={['2025-02-11', '2025-02-12', '2025-02-13']}
+      screenReaderLabels={{
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      }}
+      value={inputValue}
+      locale="en-us"
+      width="20rem"
+      onChange={(e, inputValue, dateString) => {
+        setInputValue(inputValue)
+        setDateString(dateString)
+      }}
+      invalidDateErrorMessage="Invalid date"
+    />
+  )
+}
+
+render(<Example />)
+```

packages/ui-date-input/src/DateInput2/index.tsx

@@ -131,8 +131,6 @@ function parseLocaleDate(
 ---
 category: components
 ---
-
-@module experimental
 **/
 const DateInput2 = ({
   renderLabel,
@@ -152,8 +150,10 @@ const DateInput2 = ({
   placeholder,
   dateFormat,
   onRequestValidateDate,
+  disabledDates,
   renderCalendarIcon,
   margin,
+  inputRef,
   ...rest
 }: DateInput2Props) => {
   const localeContext = useContext(ApplyLocaleContext)
@@ -275,9 +275,11 @@ const DateInput2 = ({
   }
 
   const selectedDate = parseDate(value)[1]
+
   return (
     <TextInput
       {...passthroughProps(rest)}
+      inputRef={inputRef}
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -318,6 +320,7 @@ const DateInput2 = ({
             withYearPicker={withYearPicker}
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
+            disabledDates={disabledDates}
             visibleMonth={selectedDate}
             locale={getLocale()}
             timezone={getTimezone()}

packages/ui-date-input/src/DateInput2/props.ts

@@ -175,6 +175,17 @@ type DateInput2OwnProps = {
    * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
    */
   margin?: Spacing
+  /*
+   * Specify which date(s) will be shown as disabled in the calendar.
+   * You can either supply an array of ISO8601 timeDate strings or
+   * a function that will be called for each date shown in the calendar.
+   */
+  disabledDates?: string[] | ((isoDateToCheck: string) => boolean)
+
+  /**
+   * A function that provides a reference to the inner input element
+   */
+  inputRef?: (inputElement: HTMLInputElement | null) => void
 }
 
 type PropKeys = keyof DateInput2OwnProps
@@ -207,7 +218,9 @@ const propTypes: PropValidators<PropKeys> = {
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   onRequestValidateDate: PropTypes.func,
   renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  margin: PropTypes.string
+  margin: PropTypes.string,
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  inputRef: PropTypes.func
 }
 
 export type { DateInput2Props }