Skip to content

Commit

Permalink
[blog] Update fields behavior on date pickers blog post (#36480)
Browse files Browse the repository at this point in the history
Signed-off-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Co-authored-by: Lukas <llukas.tyla@gmail.com>
  • Loading branch information
joserodolfofreitas and LukasTy committed Mar 13, 2023
1 parent 3c9948d commit 0a3a016
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 6 deletions.
22 changes: 16 additions & 6 deletions docs/pages/blog/v6-beta-pickers.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,18 +58,28 @@ 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, each date section is independent.
This behavior [has been changed](https://github.com/mui/mui-x/issues/7934) to be more consistent with native implementations.
:::

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

<iframe
Expand Down
Binary file not shown.

0 comments on commit 0a3a016

Please sign in to comment.