Skip to content

[6.x] Date picker today shortcut#14651

Draft
jaygeorge wants to merge 13 commits into
6.xfrom
date-picker-today-shortcut
Draft

[6.x] Date picker today shortcut#14651
jaygeorge wants to merge 13 commits into
6.xfrom
date-picker-today-shortcut

Conversation

@jaygeorge
Copy link
Copy Markdown
Contributor

@jaygeorge jaygeorge commented May 12, 2026

Description of the Problem

If you're dealing with an old date and want to change it, it can be a bit of mental effort to find / re-orient yourself to today's date.

What this PR Does

  • Adds a little button to get to today's date
    • Once you're on today's date, Today becomes Apply. This solves two things:
      1. It allows the user to simply use "today" to bring the date field selection up to date with today before selecting a close date
      2. If the user really did mean to select today then you can simply click again, without moving the cursor, to confirm/close
    • For date ranges clicking Today focuses on today's date, and then prompts you to Select it as the first point in the range. If you ignore the Select button you can click a different date within the view to start the range selection
  • Fixes the alignment of the calendar. I noticed it was misaligned for the "inline" view

Conditions Enforced

  • Clicking Today should forward the date view, as well as selecting the current date
  • If there is an "earliest date" or "latest date" set before today, then you should not be able to select today

For Date Ranges

  • Apply should only show when there is a date range to start making the selection
  • Clicking Today should reset the date range selection
  • Clicking Today should then show Select, but if you click another date before clicking Select then Select should reset to Today

Before (inline)

Here you can see the calendar is slightly misaligned to the right – for example, you can see 28 is closer to the right here vs 22

2026-05-11 at 17 17 47@2x

After (inline)

With "today" button and alignment fixed

2026-05-11 at 17 18 36@2x

How to Reproduce

(blueprint below)

  1. Add a date field
  2. Check out the new "today" button
  3. Check in a variety of views, such as:
  • Date picker (not inline)
  • Date range picker (not inline)
  • Date picker > inline
  • Date range picker > inline
  • Test earliest / latest date constraints in the past where "today" should be disabled
2026-05-11 at 17 21 35@2x

Here's the sidebar bit of a blueprint with various configurations to help replicate:

  sidebar:
    display: Sidebar
    sections:
      -
        fields:
          -
            handle: date_range_picker
            field:
              type: date
              default: now
              validate:
                - required
              localizable: false
              mode: range
              display: 'Date Range Picker'
          -
            handle: date1
            field:
              type: date
              default: now
              validate:
                - required
              localizable: false
              mode: range
              time_enabled: true
              display: 'Date Range Picker with Time'
          -
            handle: date_range_picker_inline
            field:
              type: date
              default: now
              validate:
                - required
              localizable: false
              mode: range
              time_enabled: true
              display: 'Date Range Picker Inline'
              inline: true
          -
            handle: date_picker_single
            field:
              type: date
              display: 'Date Picker'
              localizable: false
          -
            handle: date_picker_single_inline
            field:
              inline: true
              type: date
              display: 'Date Picker Inline'
              localizable: false
          -
            handle: date_picker_duplicate
            field:
              type: date
              display: 'Date Picker with earliest date'
              localizable: false
              earliest_date: '2026-05-13 23:00'
          -
            handle: date_picker_with_latest_date
            field:
              type: date
              display: 'Date Picker with latest date'
              localizable: false
              latest_date: '2026-05-10 23:00'
          -

@jaygeorge
Copy link
Copy Markdown
Contributor Author

Hmmm, I've only just noticed that the "clear" x almost does the same thing as I have the new today button doing here.

It's not quite the same because if the field is not required, then clearing it will not focus on today's date. I wonder if it's possible to copy the button and make a few modifications rather than make all these changes, if you don't like the amount of lines changed @jasonvarga.

I kind of want to reach for a "today" button because it's a more obvious affordance than mentally clearing the field in order to focus on today's date.

@jasonvarga jasonvarga marked this pull request as draft May 12, 2026 17:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant