Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[blog] Update fields behavior on date pickers blog post #36480

Merged
merged 9 commits into from
Mar 13, 2023
Merged

[blog] Update fields behavior on date pickers blog post #36480

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
be1d2d0
Update fields behavior
joserodolfofreitas Mar 13, 2023
a68f7af
Small rephrasing
joserodolfofreitas Mar 10, 2023
e44a865
break line and prettier
joserodolfofreitas Mar 10, 2023
8945901
Small rephrasing
joserodolfofreitas Mar 10, 2023
73d69cc
Polishing phrase
joserodolfofreitas Mar 10, 2023
366d238
trim video
joserodolfofreitas Mar 10, 2023
1ba82ba
Lukas suggestions!
joserodolfofreitas Mar 11, 2023
c707938
Change layout to improve reading flow
joserodolfofreitas Mar 13, 2023
8af1fdc
Explain why we changed the behavior of the fields
joserodolfofreitas Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions docs/pages/blog/v6-beta-pickers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,27 @@ Not only can you type the date as text, but you can also use arrow keys to navig
<source src="/static/blog/v6-beta-pickers/date-field-navigation.mp4" type="video/mp4" />
</video>

Moreover, notice in the following example that as we increase the month, the component automatically watches for valid values throughout each piece of your date input, like you're navigating in a calendar.
For a quick comparison, let's check out how the old and new approaches behave in typical scenarios.

<video style="margin-bottom: 5px; width: 608px;" autoplay muted loop playsinline>
<source src="/static/blog/v6-beta-pickers/smart-field.mp4" type="video/mp4" />
<video style="margin-bottom:24px" autoplay muted loop playsinline >
<source src="/static/blog/v6-beta-pickers/quick-comparison-fields.mp4" type="video/mp4" />
</video>

For a quick comparison, let's check out how the old and new approaches behave in typical scenarios.
Moreover, notice in the following example that as we edit the day, the component automatically navigates only in valid values.

<video style="margin-bottom:24px" autoplay muted loop playsinline>
<source src="/static/blog/v6-beta-pickers/quick-comparison-fields.mp4" type="video/mp4" />
<video style="margin-bottom: 5px; width: 608px;" autoplay muted loop playsinline >
<source src="/static/blog/v6-beta-pickers/smart-field-stable.mp4" type="video/mp4" />
</video>

:::info
**Behavior change alert**

During pre-releases, using <kbd>Arrow Up</kbd> and <kbd>Arrow Down</kbd> to update a date section would essentially update the entire field like you were navigating the calendar.
In the previous example, updating the day value from 28 to 1 would also update the month to March.

On the stable version, released after the original post, this behavior [has been changed](https://github.com/mui/mui-x/issues/7934), and each date section became independent.
joserodolfofreitas marked this conversation as resolved.
Show resolved Hide resolved
:::

Please, try it out for yourself in the live demo below.

<iframe
Expand Down
Binary file added docs/public/static/blog/v6-beta-pickers/smart-field-stable.mp4
View file
Open in desktop
Binary file not shown.