Skip to content

UI Fix: Date time input 'year' field unmodifiable#63885

Merged
bbovenzi merged 4 commits intoapache:mainfrom
Tomi-1997:ui-fix-dateinput-year-stuck
Mar 26, 2026
Merged

UI Fix: Date time input 'year' field unmodifiable#63885
bbovenzi merged 4 commits intoapache:mainfrom
Tomi-1997:ui-fix-dateinput-year-stuck

Conversation

@Tomi-1997
Copy link
Copy Markdown
Contributor

@Tomi-1997 Tomi-1997 commented Mar 18, 2026

Follow-up to #57880

Problem

When the date input is full, the year field can't be modified

Why

The value is converted to a dayjs object, which parses a year with 2 digits from 00xx (which occurs while typing) to 19xx
For example, dayjs(0002-03-17T15:33) = Mon, 17 Mar 1902 15:13:30
iamkun/dayjs#1237

before.mp4

Possible solution

Avoid passing back the parsed date value to the component
The displayed value will remain the same, but the actual value (which is 'watched' by other forms) will be in UTC

Possible problems with this approach:
When typing from 2026 to 2025, the actual value will be:
2026 -> 1902 -> 1920 -> 0202 -> 2025
But the year being displayed to the user will be:
2026 -> 0002 -> 0020 -> 0202 -> 2025
Lmk what you think, with the display discrepancy in mind

@boring-cyborg boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Mar 18, 2026
@bbovenzi bbovenzi added this to the Airflow 3.1.9 milestone Mar 18, 2026
@eladkal
Copy link
Copy Markdown
Contributor

eladkal commented Mar 18, 2026

Tests are failing

bbovenzi
bbovenzi approved these changes Mar 18, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this works. But the date is still the local timezone not UTC

@bbovenzi
Copy link
Copy Markdown
Contributor

bbovenzi commented Mar 18, 2026

And yes e2e tests need to be checked

@Tomi-1997
Copy link
Copy Markdown
Contributor Author

Tomi-1997 commented Mar 21, 2026

Spent some time trying to handle dayjs(date) and also dayjs.format(date) parsing year 00xx as 19xx
Ultimately, I wrapped the core logic in a function and called it with a slight delay after a user finishes typing, while instantly updating the display value.
I tested several browsers and components using DateTimeInput to verify it's in UTC, also typing is smoother

pierrejeambrun
pierrejeambrun approved these changes Mar 23, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@pierrejeambrun pierrejeambrun left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected, thanks

A couple small suggestions.

@Tomi-1997
Copy link
Copy Markdown
Contributor Author

Tomi-1997 commented Mar 24, 2026

Thanks for the feedback!
I increased the delay to 1000ms, should be enough (I think 🤔)

@bbovenzi
Copy link
Copy Markdown
Contributor

bbovenzi commented Mar 26, 2026

Merging. CI failure is unrelated

@bbovenzi bbovenzi merged commit f8c9c51 into apache:main Mar 26, 2026
123 of 125 checks passed
github-actions bot pushed a commit that referenced this pull request Mar 26, 2026
@Tomi-1997
[v3-1-test] UI Fix: Date time input 'year' field unmodifiable (#63885)
d5bf6fa 
* avoid passing parsed input back to component

* on change, update component and debounce utc parsing

* typo, linting fixes

* longer type delay, removed redundant isValid check
(cherry picked from commit f8c9c51)

Co-authored-by: Tomi <74303735+Tomi-1997@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 26, 2026

Backport successfully created: v3-1-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status Branch Result
✅ v3-1-test PR Link

github-actions bot pushed a commit to aws-mwaa/upstream-to-airflow that referenced this pull request Mar 26, 2026
@Tomi-1997
[v3-1-test] UI Fix: Date time input 'year' field unmodifiable (apache…
e50e08f 
…#63885)

* avoid passing parsed input back to component

* on change, update component and debounce utc parsing

* typo, linting fixes

* longer type delay, removed redundant isValid check
(cherry picked from commit f8c9c51)

Co-authored-by: Tomi <74303735+Tomi-1997@users.noreply.github.com>
bbovenzi pushed a commit that referenced this pull request Mar 26, 2026
@github-actions @Tomi-1997
[v3-1-test] UI Fix: Date time input 'year' field unmodifiable (#63885) (
583e39a 
#64264)

* avoid passing parsed input back to component

* on change, update component and debounce utc parsing

* typo, linting fixes

* longer type delay, removed redundant isValid check
(cherry picked from commit f8c9c51)

Co-authored-by: Tomi <74303735+Tomi-1997@users.noreply.github.com>
nailo2c pushed a commit to nailo2c/airflow that referenced this pull request Mar 30, 2026
@Tomi-1997 @nailo2c
UI Fix: Date time input 'year' field unmodifiable (apache#63885)
713433c 
* avoid passing parsed input back to component

* on change, update component and debounce utc parsing

* typo, linting fixes

* longer type delay, removed redundant isValid check
Suraj-kumar00 pushed a commit to Suraj-kumar00/airflow that referenced this pull request Apr 7, 2026
@Tomi-1997 @Suraj-kumar00
UI Fix: Date time input 'year' field unmodifiable (apache#63885)
e5e6ffc 
* avoid passing parsed input back to component

* on change, update component and debounce utc parsing

* typo, linting fixes

* longer type delay, removed redundant isValid check
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi approved these changes

@pierrejeambrun pierrejeambrun pierrejeambrun approved these changes

@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner

@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner

@guan404ming guan404ming Awaiting requested review from guan404ming guan404ming is a code owner

@vatsrahul1001 vatsrahul1001 Awaiting requested review from vatsrahul1001 vatsrahul1001 is a code owner

@choo121600 choo121600 Awaiting requested review from choo121600 choo121600 is a code owner

Assignees

No one assigned

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Milestone

Airflow 3.1.9

Development

Successfully merging this pull request may close these issues.

4 participants

@Tomi-1997 @eladkal @bbovenzi @pierrejeambrun