updates date pickers to v9 by tillyw · Pull Request #1899 · cityofaustin/atd-moped

tillyw · 2026-07-16T23:08:38Z

Associated issues

closes cityofaustin/atd-data-tech#28996

Testing

URL to test:

https://deploy-preview-1899--moped-main-and-prs.netlify.app/

Steps to test:

compare any instances of date pickers and areas where dates/timestamps are displayed (the latter because I had to update the date-fns library in order to get to the current x-date-pickers version
date pickers
- inline editing for milestones tables 'completion estimate' and 'date completed' fields
- start and end date in the phases modal
- substantial completion date in the phases table
timestamps
- notes table timestamps (both dates and relative timestamps)
- files table timestamps (both dates and relative timestamps)
- activity log timestamps (both dates and relative timestamps)
- summary view status update timestamp (both dates and relative timestamps)
- dashboard view timestamps (both dates and relative timestamps)
- dashboard view greeting ('good morning/afternoon/evening')
- staff table 'last seen' timestamps

please let me know if I missed any instances of date pickers!

Ship list

Code reviewed
Product manager approved
Product manager checked DB view dependencies
Product manager checked if any columns in views used by the Power BI dataflow were added, deleted, or renamed
~~[ ] Product manager added to QA test script if applicable~~

netlify · 2026-07-16T23:08:43Z

✅ Deploy Preview for moped-main-and-prs ready!

Name	Link
🔨 Latest commit	`1d932d5`
🔍 Latest deploy log	https://app.netlify.com/projects/moped-main-and-prs/deploys/6a68da954fb43d00082c8ce2
😎 Deploy Preview	https://deploy-preview-1899--moped-main-and-prs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

tillyw · 2026-07-21T22:06:29Z

updates from running a codemod script

i think these extra parentheses will go away after running prettier. could you run that here and in the next file?

but glad the diff surfaced the MUI todo, soon! 🚀

tillyw · 2026-07-21T22:06:36Z

updates from running a codemod script

tillyw · 2026-07-21T22:07:58Z

input props are now passed via slotProps rather than at the global level

tillyw · 2026-07-21T22:10:10Z

 import { useMutation } from "@apollo/client";
-import { format } from "date-fns";
-import parseISO from "date-fns/parseISO";
+import { parseISO, format } from "date-fns";


I had to update the date-fns library as our version was not compatible with x-date-pickers v9, and the current version (v4) requires this import convention

tillyw · 2026-07-21T22:12:15Z

    "aws-amplify": "^5.3.33",
    "axios": "^1.16.0",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.4.0",


current version of date-fns library! skipped a version of this as well but went through the documentation for both upgrades and I believe I have addressed any potential breaking changes.

roseeichelmann

tested all the date pickers and date/time formatting and compared to prod, this looks good to me! i dont mind that you have to click on the calendar now to get the drop down menu

mddilley

Thanks Tillian! I'm only requesting change because there is a little bugginess with focus due to crossover with DataGridPro focus behavior. I found one potential path to a fix, and I'm happy to take a closer look too!

mddilley · 2026-07-22T21:42:33Z

i think these extra parentheses will go away after running prettier. could you run that here and in the next file?

but glad the diff surfaced the MUI todo, soon! 🚀

mddilley · 2026-07-22T22:37:25Z

      value={value ? parseISO(value) : null}
      onChange={handleChange}
-      InputProps={{ style: { minWidth: "100px" } }}
      slotProps={{


I noticed that the date picker isn't working quite like the demo when clicking into the left side of the input, and I think that the way we are managing the tab focus in the Data Grid row is interfering with the ability to immediately enter the date keyboard input. I made a recording because it is hard to put into words.

It seems there is a new fieldRef prop that could be used in place of inputRef that we are currently using.

@tillyw could you test this out?

Here is what I'm seeing where it takes two clicks to enter keyboard entry mode:

Screen.Recording.2026-07-22.at.5.30.09.PM.mov

thank you for working with me on this! ready for re-review :)

mddilley · 2026-07-22T22:40:45Z

          />
        ),
-        width: 180,
+        width: 185,


I do like the calendar icon, and I think that we could update the label text to reduce the cluttered look of them overlapping.

Could you test out these labels? I'm open to other variations too. "Target date"? "Date (estimated)" and "Date (actual)"?

I like 'Target date' and 'Actual date'! Uses slightly different language from the headers for additional context

mddilley

Works amazingly! I noticed that dates can now be entered by keyboard in the component form too! All of the uses of date-fns look consistent with prod to me. Thanks for troubleshooting the small quirks that came out of the upgrade. 🚢 🙏 🚀

johnclary

Looks great and works great 👍 🚢 🚢 🚢 🚢

chiaberry

we have a lot of dates! it looks good and interacting with the picker was smooth.

Approving assuming that you will run prettier on those files to remove the (extra) parens.

tillyw · 2026-07-28T16:39:06Z

thanks, y'all! and thank you @chiaberry for the reminder to run prettier on those files! after consulting with @mddilley i'm going to merge this branch so we can compare #1900 to main rather than this branch and have the option to test via the deploy preview

updates date pickers to v9

0bebdb8

update date-fns imports

a63f1df

tillyw commented Jul 21, 2026

View reviewed changes

tillyw requested review from chiaberry, frankhereford, johnclary, mateoclarke, mddilley and roseeichelmann July 21, 2026 22:44

roseeichelmann approved these changes Jul 22, 2026

View reviewed changes

tillyw mentioned this pull request Jul 22, 2026

29471 upgrade to mui material v9 #1900

Open

5 tasks

mddilley requested changes Jul 22, 2026

View reviewed changes

tillyw added 2 commits July 23, 2026 17:50

fix field ref in date picker

2d6b7c3

update labels

86e7953

tillyw requested a review from mddilley July 24, 2026 00:35

mddilley approved these changes Jul 24, 2026

View reviewed changes

johnclary approved these changes Jul 27, 2026

View reviewed changes

chiaberry approved these changes Jul 27, 2026

View reviewed changes

run prettier on modded files

1d932d5

tillyw merged commit 30e5983 into main Jul 28, 2026
4 checks passed

tillyw deleted the 28996_update_date_pickers branch July 28, 2026 16:39

Uh oh!

Conversation

tillyw commented Jul 16, 2026 • edited by mddilley Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Associated issues

Testing

Ship list

Uh oh!

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

Uh oh!

✅ Deploy Preview for moped-main-and-prs ready!

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!

tillyw Jul 21, 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!

roseeichelmann left a comment

Choose a reason for hiding this comment

Uh oh!

mddilley 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!

mddilley left a comment

Choose a reason for hiding this comment

Uh oh!

johnclary left a comment

Choose a reason for hiding this comment

Uh oh!

chiaberry left a comment

Choose a reason for hiding this comment

Uh oh!

tillyw commented Jul 28, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tillyw commented Jul 16, 2026 •

edited by mddilley

Loading

netlify Bot commented Jul 16, 2026 •

edited

Loading

tillyw Jul 21, 2026 •

edited

Loading