DatePicker: add Today and Clear button (#6089)

* Add "Today" button support to DatePicker component.

* today translation for datepicker

* release notes

* Remove showTodayButton from datePicker in favor of adding showTodayButton options to faltpickr itself. Styling bs5.

* Update flatpickr.js

* Clear Button

* Add missing ShowClearButton

* Add default flatpickr scss

* Remove bs5 styles

* Use new buttons in the demo

* Release notes

* Example in the docs

* material css

* fluent styles

* hover styles

---------

Co-authored-by: Mladen Macanovic <mladen.macanovic@blazorise.com>
Co-authored-by: Mladen Macanovic <mladen.macanovic@gmail.com>

Author: tesar-tech

Demos/Blazorise.Demo/Pages/Tests/PickersPage.razor

@@ -9,7 +9,7 @@
                 <Field Horizontal>
                     <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is3.OnDesktop">Date</FieldLabel>
                     <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is9.OnDesktop">
-                        <DatePicker TValue="DateOnly?" @bind-Date="@d1" Placeholder="Select date..." />
+                        <DatePicker TValue="DateOnly?" @bind-Date="@d1" Placeholder="Select date..." ShowTodayButton ShowClearButton />
                     </FieldBody>
                 </Field>
                 <Field Horizontal="true">

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

@@ -1917,6 +1917,8 @@ void OnDateChanged( DateTime? date )
     DateTime? value;
 }";
 
+        public const string DatePickerShowButtonsExample = @"<DatePicker TValue=""DateTime?"" ShowTodayButton ShowClearButton />";
+
         public const string DatePickerShowWeekNumbersExample = @"<DatePicker TValue=""DateTime?"" ShowWeekNumbers=""true"" />";
 
         public const string DatePickerWithIconExample = @"<Addons>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/Code/DatePickerShowButtonsExampleCode.html

@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DatePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">DateTime?</span><span class="quot">&quot;</span> <span class="htmlAttributeName">ShowTodayButton</span> <span class="htmlAttributeName">ShowClearButton</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/DatePickerPage.razor

@@ -145,6 +145,21 @@
     <DocsPageSectionSource Code="DatePickerShowWeekNumbersExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Show buttons">
+        <Paragraph>
+            Use the <Code>ShowTodayButton</Code>, or <Code>ShowClearButton</Code> parameters to toggle the visibility of the buttons in the calendar view.
+        </Paragraph>
+        <Paragraph>
+            When enabled, a row of buttons will appear at the bottom of the calendar allowing users to quickly navigate to today or clear the selected date.
+        </Paragraph>
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <DatePickerShowButtonsExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="DatePickerShowButtonsExample" />
+</DocsPageSection>
+
 <DocsPageSubtitle>
     Formats
 </DocsPageSubtitle>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/Examples/DatePickerShowButtonsExample.razor

@@ -0,0 +1,3 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<DatePicker TValue="DateTime?" ShowTodayButton ShowClearButton />

Documentation/Blazorise.Docs/Pages/News/2025-03-10-release-notes-180.razor

@@ -134,6 +134,14 @@
     The <Code>DatePicker</Code> component now includes a <Code>ShowWeekNumbers</Code> parameter. When enabled, the calendar displays ISO week numbers alongside each row. This can be helpful for planning or referencing by week.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is3">
+    New Buttons on DatePicker Calendar
+</Heading>
+
+<Paragraph>
+    The <Code>DatePicker</Code> component now includes a <Code>ShowTodayButton</Code> parameter, and a <Code>ShowClearButton</Code> parameter. When enabled, these buttons appear on the calendar, allowing users to quickly select the current date or clear the selected date, respectively. This enhances usability and provides a more intuitive experience for users interacting with the date picker.
+</Paragraph>
+
 <Heading Size="HeadingSize.Is3">
     Optimized Chart Plugins
 </Heading>

Source/Blazorise.AntDesign/Styles/vendors/_flatpickr.scss

@@ -85,3 +85,9 @@ span.flatpickr-weekday {
 .flatpickr-monthSelect-month.selected {
     background-color: $primary;
 }
+
+.flatpickr-button {
+    &:hover {
+        background: rgba($primary,.15);
+    }
+}

Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css

@@ -10772,3 +10772,7 @@ span.flatpickr-weekday {
 .flatpickr-monthSelect-month.selected {
   background-color: #1890ff;
 }
+
+.flatpickr-button:hover {
+  background: rgba(24, 144, 255, 0.15);
+}

Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.min.css

@@ -85,3 +85,9 @@ span.flatpickr-weekday {
 .flatpickr-monthSelect-month.selected {
     background-color: $primary;
 }
+
+.flatpickr-button {
+    &:hover {
+        background: rgba($primary,.15);
+    }
+}