DateInput2

packages/__docs__/components.js

@@ -55,7 +55,7 @@ export { Expandable } from '@instructure/ui-expandable'
 export { Focusable } from '@instructure/ui-focusable'
 export { Img } from '@instructure/ui-img'
 export { NumberInput } from '@instructure/ui-number-input'
-export { DateInput } from '@instructure/ui-date-input'
+export { DateInput, DateInput2 } from '@instructure/ui-date-input'
 export { DateTimeInput } from '@instructure/ui-date-time-input'
 export { Pill } from '@instructure/ui-pill'
 export { TextInput } from '@instructure/ui-text-input'
@@ -69,10 +69,7 @@ export {
 } from '@instructure/ui-form-field'
 export { Table } from '@instructure/ui-table'
 export { TruncateText } from '@instructure/ui-truncate-text'
-export {
-  ApplyLocale,
-  TextDirectionContext
-} from '@instructure/ui-i18n'
+export { ApplyLocale, TextDirectionContext } from '@instructure/ui-i18n'
 export { MetricGroup, Metric } from '@instructure/ui-metric'
 export { Modal } from '@instructure/ui-modal'
 export { Transition } from '@instructure/ui-motion'

packages/ui-date-input/package.json

@@ -28,6 +28,7 @@
     "@instructure/ui-scripts": "9.2.0",
     "@instructure/ui-test-utils": "9.2.0",
     "@testing-library/jest-dom": "^6.4.6",
+    "@instructure/ui-buttons": "9.2.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "vitest": "^2.0.2"
@@ -48,6 +49,7 @@
     "@instructure/ui-testable": "9.2.0",
     "@instructure/ui-text-input": "9.2.0",
     "@instructure/ui-utils": "9.2.0",
+    "moment-timezone": "^0.5.45",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

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

@@ -2,38 +2,9 @@
 describes: DateInput
 ---
 
-The `DateInput` component provides a visual interface for inputting date data.
-
-### Default config
-
-For ease of use in most situations, the `DateInput` component provides a default
-configuration. The default configuration can be overridden by providing props
-to the `DateInput` component.
-
-```javascript
----
-type: example
----
-class Example extends React.Component {
-  state = { value: '' }
+> **Important:** You can now use are updated version [`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.
 
-  render () {
-    return (
-      <DateInput
-        renderLabel="Choose a date"
-        assistiveText="Type a date or use arrow keys to navigate date picker."
-        width="20rem"
-        isInline
-        value={this.state.value}
-        onChange={(e, value)=> this.setState({value:value.value})}
-        invalidDateErrorMessage="Invalid date"
-      />
-    )
-  }
-}
-
-render(<Example />)
-```
+The `DateInput` component provides a visual interface for inputting date data.
 
 ### Composing a DateInput in your Application
 

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

@@ -59,8 +59,6 @@ import type { FormMessage } from '@instructure/ui-form-field'
 ---
 category: components
 ---
-The `DateInput` component provides a visual interface for inputting date data.
-See <https://instructure.design/#DateInput/>
 **/
 @withStyle(generateStyle, null)
 @testable()

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

@@ -250,6 +250,24 @@ type DateInputOwnProps = {
    * property or a context property.
    **/
   timezone?: string
+
+  /**
+   * If set, years can be picked from a dropdown.
+   * It accepts an object.
+   * screenReaderLabel: string // e.g.: i18n("pick a year")
+   *
+   * onRequestYearChange?:(e: React.MouseEvent,requestedYear: number): void // if set, on year change, only this will be called and no internal change will take place
+   *
+   * startYear: number // e.g.: 2001, sets the start year of the selectable list
+   *
+   * endYear: number // e.g.: 2030, sets the end year of the selectable list
+   */
+  withYearPicker?: {
+    screenReaderLabel: string
+    onRequestYearChange?: (e: any, requestedYear: number) => void
+    startYear: number
+    endYear: number
+  }
 }
 
 type PropKeys = keyof DateInputOwnProps
@@ -308,7 +326,8 @@ const propTypes: PropValidators<PropKeys> = {
     PropTypes.string
   ]),
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  withYearPicker: PropTypes.object
 }
 
 const allowedProps: AllowedPropKeys = [

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

@@ -0,0 +1,114 @@
+---
+describes: DateInput
+---
+
+This component is an updated version of [`DateInput`](/#DateInput) that's easier to configure for developers, has a better UX, better accessibility features and a year picker. We recommend using this instead of `DateInput` which will be deprecated in the future.
+
+### Minimal config
+
+- ```js
+  class Example extends React.Component {
+    state = { value: '' }
+
+    render() {
+      return (
+        <DateInput2
+          renderLabel="Choose a date"
+          screenReaderLabels={{
+            calendarIcon: 'Calendar',
+            nextMonthButton: 'Next month',
+            prevMonthButton: 'Previous month'
+          }}
+          value={this.state.value}
+          width="20rem"
+          onChange={(e, value) => this.setState({ value })}
+          invalidDateErrorMessage="Invalid date"
+        />
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState('')
+    return (
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        value={value}
+        width="20rem"
+        onChange={(e, value) => setValue(value)}
+        invalidDateErrorMessage="Invalid date"
+      />
+    )
+  }
+
+  render(<Example />)
+  ```
+
+### With year picker
+
+- ```js
+  class Example extends React.Component {
+    state = { value: '' }
+
+    render() {
+      return (
+        <DateInput2
+          renderLabel="Choose a date"
+          screenReaderLabels={{
+            calendarIcon: 'Calendar',
+            nextMonthButton: 'Next month',
+            prevMonthButton: 'Previous month'
+          }}
+          width="20rem"
+          value={this.state.value}
+          onChange={(e, value) => this.setState({ value })}
+          invalidDateErrorMessage="Invalid date"
+          withYearPicker={{
+            screenReaderLabel: 'Year picker',
+            startYear: 1999,
+            endYear: 2024
+          }}
+        />
+      )
+    }
+  }
+
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState('')
+
+    return (
+      <DateInput2
+        renderLabel="Choose a date"
+        screenReaderLabels={{
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        }}
+        width="20rem"
+        value={value}
+        onChange={(e, value) => setValue(value)}
+        invalidDateErrorMessage="Invalid date"
+        withYearPicker={{
+          screenReaderLabel: 'Year picker',
+          startYear: 1999,
+          endYear: 2024
+        }}
+      />
+    )
+  }
+
+  render(<Example />)
+  ```