feat(ui-select,ui-date-time-input): rework DateTimeInput and replace DateInput v1 with DateInput v2 in DateTimeInput by ToMESSKa · Pull Request #2518 · instructure/instructure-ui

ToMESSKa · 2026-04-16T09:51:33Z

BREAKING CHANGE:

prevMonthLabel prop removed (use screenReaderLabels.prevMonthButton instead)
nextMonthLabel prop removed (use screenReaderLabels.nextMonthButton instead)
renderWeekdayLabels prop removed| dateFormat type changed: string → string | { parser: (input: string) => Date | null, formatter: (date: Date) => string }
screenReaderLabels is a new required prop
dateFormat default changed: Moment's 'LL' (long month name) → locale's default date format

INSTUI-4991

ISSUE:

DateTimeInput needs to be migrated to the new theming system and use DateInput v2 under the hood

TEST PLAN:

check if the component works the same as before in v1
check if the components and the examples work in v2 (especially the dark theme)
check if all necessary the imports are renamed to latest in v2 and v1 files use the right imports
check if the test files are removed from the v1
check if the right imports are used in exports/b.ts and exports/a.ts
check if the package.json uses the correct versioning
check if the renamed or removed tokes are documented in the upgrade guide (if there's any)
check if the index.ts files use withStyle instead of withStyleLegacy in v2
check if the v2 component uses all the tokens (if there is any)
check if all the old icons were replace with the new ones in the index, test and README files (if there's any)
check if commit message contains the breaking change comment
check if the NewComponentTypes are used in WithStyleProps in props.ts
check if the components behaves the same after DateTimeInput v2 was implemented under the hood

github-actions · 2026-04-16T09:56:14Z

PR Preview Action v1.8.1
🚀 View preview at https://instructure.design/pr-preview/pr-2518/
Built to branch `gh-pages` at 2026-04-24 08:52 UTC. Preview will be ready when the GitHub Pages deployment is complete.

ToMESSKa · 2026-04-16T09:58:36Z

-    const { isOptionContentAppliedToInput, size = 'medium' } = this.props
-    const iconSize = selectSizeToIconSize[size]
-    const checkIcon =


Unfortunately in my Select rework, some draft code was left in about implementing a check icon on selected items (since then we aggreed not to implement that), so I reverted these here.

ToMESSKa · 2026-04-16T13:33:00Z

+    cy.wrap(onChange)
+      .should('have.been.called')
+      .then((spy) => {
+        const selectedDateId: string = spy.lastCall.args[1]


In DateInput v2 no id is set on day buttons, so I get the ISO date from the onChange spy.

ToMESSKa · 2026-04-16T13:34:56Z

+    cy.get('input[id^="TextInput_"]').as('dateInput')
    cy.get('body').should('contain', errorMsg)
-    cy.get('@dateInput').clear().type(`05/18/2017{enter}`)
+    cy.get('@dateInput').clear().type(`05/18/2017`).blur()


DateInput v1 had an Enter key handler. In v2 there's no such handler, so the .blur() is used.

git-nandor · 2026-04-20T14:48:52Z

+| Removed prop          | Replacement                      |
+| --------------------- | -------------------------------- |
+| `renderWeekdayLabels` | Built in — no replacement needed |
+


It might be better to use V12ChangelogTable here.

@git-nandor V12ChangelogTable is only useful for theme variable changes, but not prop and API changes, so I think I'll leave it as it is

git-nandor · 2026-04-20T14:52:19Z

+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage="Invalid date!"
+          calendarIcon="Open calendar" prevMonthLabel="Previous month" nextMonthLabel="Next month"


The example code would look better on the documentation page if these were broken into new lines.

@git-nandor Thanks, I fixed these

git-nandor · 2026-04-20T15:07:22Z

The commit message doesn't include the breaking prop changes.
Could you please ask Matyi or Balázs about this?

Overall, it looks good to me! I only have a few minor observations, which I've left in the comments.

I found some slight differences between v11.6 and v11.7, but these seem to be specific to the v2 sub-components that DateTimeInput now uses:

The calendar no longer opens when clicking the input and you can only navigate between days using the Tab key.
The hover state lacks contrast, and disabled days are not visually distinct enough.
The form field no longer gets a border when an invalid date is entered.

ToMESSKa · 2026-04-21T09:21:07Z

The commit message doesn't include the breaking prop changes. Could you please ask Matyi or Balázs about this?

Overall, it looks good to me! I only have a few minor observations, which I've left in the comments.

I found some slight differences between v11.6 and v11.7, but these seem to be specific to the v2 sub-components that DateTimeInput now uses:

The calendar no longer opens when clicking the input and you can only navigate between days using the Tab key.

The hover state lacks contrast, and disabled days are not visually distinct enough.

The form field no longer gets a border when an invalid date is entered.

@git-nandor the commit message includes the prop changes a84f237

the first difference is due to different API between DateInput v1 and v2
the second difference: @adamlobler can you please take a look at these when you review the component please?
the third difference is due to different API between FormField v1 and v2

balzss

overall great work, left some comments about making the api more similar to DateInput

balzss · 2026-04-21T10:42:55Z

+
+import { Component, SyntheticEvent } from 'react'
+import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n'
+import type { Moment } from '@instructure/ui-i18n'


we should not use moment at all

I looked at this and it would require some major rework and new functions to active the same functionalty. So we agreed to do this in another ticket.

balzss · 2026-04-21T10:43:15Z

+ */
+
+import { Component, SyntheticEvent } from 'react'
+import { Locale, DateTime, ApplyLocaleContext } from '@instructure/ui-i18n'


we should not use DateTime at all since it's just a moment wrapper

I looked at this and it would require some major rework and new functions to active the same functionalty. So we agreed to do this in another ticket.

balzss · 2026-04-21T10:45:12Z

+          onRequestValidateDate={this.handleDateValidated}
+          onBlur={(e) => this.handleBlur(e)}
+          inputRef={dateInputRef}
+          placeholder={datePlaceholder ?? ''}


this should be just placeholder={datePlaceholder} because DateInput accepts null as a placeholder an uses it's internal placeholder

balzss · 2026-04-21T10:46:14Z

+          locale={locale}
+          timezone={timezone}
+          disabledDates={disabledDates}
+          dateFormat={{


instead of providing this premade formatter and parser, let's allow the users to pass their own or just rely on the one provided by DateInput by default (so dateFormat={props.dateFormat})

Done. This also changed the default dateFormat Moment's 'LL' (long month name) → locale's default date format, so I had to update the tests accordingly. (e. g. 'May 1, 2017' to '3/29/2022')

balzss · 2026-04-21T10:47:42Z

+import type { Moment } from '@instructure/ui-i18n'
+import type { Renderable } from '@instructure/shared-types'
+
+type DateTimeInputProps = {


we should make the api of DateTimeInput more similar to DateInput, e.g. instead of separate prevMonthLabel and nextMonthLabel props, just use screenreaderlabel={...

balzss · 2026-04-21T10:48:22Z

+   * If omitted, it will use 'LL' which is a localized date with full month,
+   * e.g. "August 6, 2014"
+   **/
+  dateFormat?: string


this prop should be replaced with the dateFormat type accepted by DateInput

ToMESSKa · 2026-04-24T08:26:18Z

+  private formatDateInput(date: Date): string {
+    const { dateFormat } = this.props


I added this which is the same as the formatDate function in DateInput v2. DateTimeInput controls the DateInput value prop directly via state, so it needs to format the date itself.

…DateInput v1 with DateInput v2 in DateTimeInput BREAKING CHANGE: prevMonthLabel prop removed (use screenReaderLabels.prevMonthButton instead) nextMonthLabel prop removed (use screenReaderLabels.nextMonthButton instead) renderWeekdayLabels prop removed dateFormat type changed: string → string { parser: (input: string) => Date null, formatter: (date: Date) => string } screenReaderLabels is a new required prop dateFormat default changed: Moment's 'LL' (long month name) → locale's default date format INSTUI-4791

adamlobler

I checked the components and other than the yearPicker issue I mentioned in the channel, I think it’s okay. I created a ticket for that earlier: https://instructure.atlassian.net/browse/INSTUI-5014

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch from 7167d25 to b06d123 Compare April 16, 2026 09:55

ToMESSKa changed the title ~~Inst UI 4791 time date input rework multi version~~ feat(ui-select,ui-date-time-input): rework DateTimeInput and replace DateInput v1 with DateInput v2 in DateTimeInput Apr 16, 2026

ToMESSKa commented Apr 16, 2026

View reviewed changes

ToMESSKa self-assigned this Apr 16, 2026

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch 2 times, most recently from 4fae7f8 to a84f237 Compare April 16, 2026 13:22

ToMESSKa commented Apr 16, 2026

View reviewed changes

ToMESSKa requested review from balzss and matyasf April 16, 2026 14:44

matyasf requested review from git-nandor and removed request for matyasf April 20, 2026 08:53

git-nandor reviewed Apr 20, 2026

View reviewed changes

git-nandor approved these changes Apr 20, 2026

View reviewed changes

ToMESSKa requested review from adamlobler April 21, 2026 08:52

ToMESSKa requested a review from git-nandor April 21, 2026 09:21

git-nandor approved these changes Apr 21, 2026

View reviewed changes

balzss reviewed Apr 21, 2026

View reviewed changes

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch 2 times, most recently from 3df60b9 to 0c00547 Compare April 24, 2026 08:14

ToMESSKa commented Apr 24, 2026

View reviewed changes

ToMESSKa force-pushed the INSTUI-4791-time-date-input-rework-multi-version branch from 0c00547 to bf24b70 Compare April 24, 2026 08:48

ToMESSKa requested a review from balzss April 24, 2026 09:12

balzss mentioned this pull request Apr 28, 2026

refactor(ui-date-time-input): convert v2 to functional, drop Moment.js #2531

Open

17 tasks

adamlobler requested changes Apr 30, 2026

View reviewed changes

git-nandor approved these changes Apr 30, 2026

View reviewed changes

balzss approved these changes May 5, 2026

View reviewed changes

		private formatDateInput(date: Date): string {
		const { dateFormat } = this.props

Conversation

ToMESSKa commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-04-24 08:52 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

ToMESSKa Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ToMESSKa Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

git-nandor commented Apr 20, 2026

Uh oh!

ToMESSKa commented Apr 21, 2026

Uh oh!

balzss left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ToMESSKa Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamlobler left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ToMESSKa commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-04-24 08:52 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

ToMESSKa Apr 16, 2026 •

edited

Loading

ToMESSKa Apr 16, 2026 •

edited

Loading

ToMESSKa Apr 24, 2026 •

edited

Loading