DatePicker: Adds "Today" button

[tesar-tech]

Description

Closes #6061

Not the cleanest solution, but since flatpicker support is lacking we don't have much other options.

One option can be to change our flatpicker fork, but I am not sure if it's work it.

The current solution does what plugins do, just in our custom js.

[stsrki]

It works, so that is good. Although I would like to make it part of our flatpickr fork if possible. This is a good candidate for the first work.

I don't really like how the button looks as a link. And it doesn't look like it belongs to the framework styling.

BS4

FluentUI

---

For reference, you can see the real fluent design at https://react.fluentui.dev/?path=/docs/compat-components-datepicker--docs

---

So, instead of having an inline style in JS

<button type="button" class="today-button"
        style="color: #007bff; background-color: transparent; border: none; padding: 4px 8px; cursor: pointer; text-decoration: underline;">
  ${localizedToday}
</button>

I would do this:

1. Define only a class name on the button, flatpickr-today-btn.
2. For every one of our CSS providers,, define CSS styling in _date-picker.scss

But even before that, I would first implement it on our flatpickr fork. And make it resemble their default day item styling.

[stsrki]

PS. Throwing in also material design for reference

[stsrki]

https://github.com/jcsmorais/shortcut-buttons-flatpickr

[tesar-tech]

The link buttons try to mimic what DateEdit (input type date) provides.

---

I added the "Today" feature rather as a hotfix.

About flatpickr... Are you sure it’s a good idea to start working on it? I feel like poor flatpickr has done its duty — it’s really old(dead) now, and there’s no point in beating a dead horse.

The question is whether you truly want to commit to keeping this horse alive — it contains a decade-old npm packages, not part of our tech stack, and it carries a lot of technical baggage. It's destined to fail sooner or later. Unfortunately, there's no direct alternative that matches flatpickr feature for feature (we can't just switch libraries).

Spending resources on this dead horse is unwise unless you're ready to commit long-term. And I don't event see point in that.

From my understanding, date picking isn’t rocket science (I have done calendar once). There are three main parts:

• Make the calendar behave as expected — show days, months, navigation buttons, etc.
• Position it correctly under the input (we already have floatingUI for this) and hide it at the appropriate time.
• Support the necessary parameters and features that flatpickr provided.

There aren’t that many features. I suggest we rewrite it properly in Blazor:

• We won’t need any js interop — there are no required APIs missing in Blazor for date-picking capabilities.
• We can style it based on the provider.
• We can extend functionality beyond just a "Today" button, e.g., via RenderFragment ButtonBar, which is currently impossible without some serious Blazor hackery.
• We eliminate one (rather heavy) dependency and its JS interop.
• We keep it fully within the Blazor ecosystem.

[stsrki]

It's not such an easy thing to do in Blazor. That's why we used Flatpickr in the first place. For example, we have almost no control over how to properly handle input masks. There is no way to prevent invalid value natively in Blazor. So we would then had to fall back to JSInterop for every edge case. We actually had this in the past on one of the early Blazorise components. It was a nightmare to maintain after a while. So I removed it sometime in 0.9.x version, I think 🤔

And input mask is just one feature we need. There is also a display format, which is then again different from internal value.

I mean, we could come close to what we need but why solve something that is already solved.

[tesar-tech]

but why solve something that is already solved

Because it no longer fits our overall needs. Instead of solving the input mask issue, we now carry the burden of keeping flatpickr "alive."

---

Anyway, it's done — our fork of flatpickr now has the showTodayButton option. I also made sure it works when the option changes from Blazor, and localization is functional as well.

Initialization, option changes, and localization changes all call the same function in js — all the logic is centralized.

I styled it using the _flatpickr.scss file, but I don't consider this the best approach. Better would be to reuse the btn btn-primary classes. Similarly, this will likely be the case for other providers. I suggest letting styling be governed by individual class providers instead.