Megabit · tesar-tech · Apr 23, 2025 · Apr 23, 2025 · Apr 23, 2025 · Apr 27, 2025
diff --git a/Documentation/Blazorise.Docs/Pages/News/2025-03-10-release-notes-180.razor b/Documentation/Blazorise.Docs/Pages/News/2025-03-10-release-notes-180.razor
@@ -126,6 +126,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">
+    Show "Today" Button on DatePicker
+</Heading>
+
+<Paragraph>
+    The <Code>DatePicker</Code> component now includes a <Code>ShowTodayButton</Code> parameter. When enabled, a "Today" button appears at the bottom of the calendar, allowing users to quickly jump to the current date.
+</Paragraph>
+
 <Heading Size="HeadingSize.Is3">
     Optimized Chart Plugins
 </Heading>

diff --git a/Source/Blazorise.Bootstrap5/Styles/_vendors/_flatpickr.scss b/Source/Blazorise.Bootstrap5/Styles/_vendors/_flatpickr.scss
@@ -85,3 +85,36 @@ span.flatpickr-weekday {
 .flatpickr-monthSelect-month.selected {
     background-color: $primary;
 }
+
+.flatpickr-today-button {
+    display: inline-block;
+    font-weight: 400;
+    color: #fff;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+    background-color: $primary;
+    border: 1px solid $primary;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.375rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background-color: darken($primary, 10%);
+        border-color: darken($primary, 12%);
+    }
+
+    &:focus {
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba($primary, 0.5);
+    }
+
+    &:disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+    }
+}
diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css
@@ -230,7 +230,7 @@ hr.divider.divider-text::before {
 .b-is-autocomplete.b-is-autocomplete-multipleselection.focus {
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
-  border-color: #86b7fe;
+  border-color: rgb(134, 182.5, 254);
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
@@ -1627,7 +1627,7 @@ li.list-group-item-action {
 }
 
 .form-check.form-switch .form-check-input.form-check-input-xs {
-  width: calc(0.75rem + (0.5rem / 2));
+  width: calc(0.75rem + 0.5rem / 2);
   height: 0.5rem;
   margin-left: -2.5em;
 }
@@ -1637,11 +1637,11 @@ li.list-group-item-action {
   padding-left: 0;
 }
 .form-check.form-switch .form-check-input.form-check-input-xs:checked ~ .form-check-label::after {
-  transform: translateX(calc(0.75rem - (0.5rem / 2)));
+  transform: translateX(calc(0.75rem - 0.5rem / 2));
 }
 
 .form-check.form-switch .form-check-input.form-check-input-sm {
-  width: calc(1rem + (0.75rem / 2));
+  width: calc(1rem + 0.75rem / 2);
   height: 0.75rem;
   margin-left: -2.5em;
 }
@@ -1651,11 +1651,11 @@ li.list-group-item-action {
   padding-left: 0.75rem;
 }
 .form-check.form-switch .form-check-input.form-check-input-sm:checked ~ .form-check-label::after {
-  transform: translateX(calc(1rem - (0.75rem / 2)));
+  transform: translateX(calc(1rem - 0.75rem / 2));
 }
 
 .form-check.form-switch .form-check-input.form-check-input-md {
-  width: calc(2rem + (1.5rem / 2));
+  width: calc(2rem + 1.5rem / 2);
   height: 1.5rem;
   margin-left: -2.5em;
 }
@@ -1665,11 +1665,11 @@ li.list-group-item-action {
   padding-left: 0.75rem;
 }
 .form-check.form-switch .form-check-input.form-check-input-md:checked ~ .form-check-label::after {
-  transform: translateX(calc(2rem - (1.5rem / 2)));
+  transform: translateX(calc(2rem - 1.5rem / 2));
 }
 
 .form-check.form-switch .form-check-input.form-check-input-lg {
-  width: calc(3rem + (2rem / 2));
+  width: calc(3rem + 2rem / 2);
   height: 2rem;
   margin-left: -2.5em;
 }
@@ -1679,11 +1679,11 @@ li.list-group-item-action {
   padding-left: 0.75rem;
 }
 .form-check.form-switch .form-check-input.form-check-input-lg:checked ~ .form-check-label::after {
-  transform: translateX(calc(3rem - (2rem / 2)));
+  transform: translateX(calc(3rem - 2rem / 2));
 }
 
 .form-check.form-switch .form-check-input.form-check-input-xl {
-  width: calc(4rem + (2.5rem / 2));
+  width: calc(4rem + 2.5rem / 2);
   height: 2.5rem;
   margin-left: -2.5em;
 }
@@ -1693,7 +1693,7 @@ li.list-group-item-action {
   padding-left: 0.75rem;
 }
 .form-check.form-switch .form-check-input.form-check-input-xl:checked ~ .form-check-label::after {
-  transform: translateX(calc(4rem - (2.5rem / 2)));
+  transform: translateX(calc(4rem - 2.5rem / 2));
 }
 
 table.table tbody tr:not(.table-group).selected {
@@ -4565,3 +4565,38 @@ span.flatpickr-weekday {
 .flatpickr-monthSelect-month.selected {
   background-color: #0d6efd;
 }
+
+.flatpickr-extra-buttons-container {
+  display: flex;
+  justify-content: end;
+  padding: 10px;
+}
+
+.flatpickr-today-button {
+  display: inline-block;
+  font-weight: 400;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  background-color: #0d6efd;
+  border: 1px solid #0d6efd;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.375rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  cursor: pointer;
+}
+.flatpickr-today-button:hover {
+  background-color: rgb(1.762295082, 87.2336065574, 213.237704918);
+  border-color: rgb(1.6786885246, 83.0950819672, 203.1213114754);
+}
+.flatpickr-today-button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
+}
+.flatpickr-today-button:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css
diff --git a/Source/Blazorise/Components/DatePicker/DatePicker.razor.cs b/Source/Blazorise/Components/DatePicker/DatePicker.razor.cs
@@ -50,7 +50,7 @@
            var disabledChanged = parameters.TryGetValue( nameof( Disabled ), out bool paramDisabled ) && Disabled != paramDisabled;
            var readOnlyChanged = parameters.TryGetValue( nameof( ReadOnly ), out bool paramReadOnly ) && ReadOnly != paramReadOnly;
            var disabledDatesChanged = parameters.TryGetValue( nameof( DisabledDates ), out IEnumerable<TValue> paramDisabledDates ) && !DisabledDates.AreEqual( paramDisabledDates );
            var enabledDatesChanged = parameters.TryGetValue( nameof( EnabledDates ), out IEnumerable<TValue>? paramEnabledDates ) && !EnabledDates.AreEqual( paramEnabledDates );
            var disabledDaysChanged = parameters.TryGetValue( nameof( DisabledDays ), out IEnumerable<DayOfWeek> paramDisabledDays ) && !DisabledDays.AreEqual( paramDisabledDays );
            var selectionModeChanged = parameters.TryGetValue( nameof( SelectionMode ), out DateInputSelectionMode paramSelectionMode ) && !SelectionMode.IsEqual( paramSelectionMode );
            var inlineChanged = parameters.TryGetValue( nameof( Inline ), out bool paramInline ) && Inline != paramInline;
@@ -58,6 +58,7 @@
             var placeholderChanged = parameters.TryGetValue( nameof( Placeholder ), out string paramPlaceholder ) && Placeholder != paramPlaceholder;
             var staticPickerChanged = parameters.TryGetValue( nameof( StaticPicker ), out bool paramStaticPicker ) && StaticPicker != paramStaticPicker;
             var showWeekNumbersChanged = parameters.TryGetValue( nameof( ShowWeekNumbers ), out bool paramShowWeekNumbers ) && ShowWeekNumbers != paramShowWeekNumbers;
+            var showTodayButtonChanged = parameters.TryGetValue( nameof( ShowTodayButton ), out bool paramShowTodayButton ) && ShowTodayButton != paramShowTodayButton;
 
             if ( dateChanged || datesChanged )
             {
@@ -89,7 +90,8 @@
                  || disableMobileChanged
                  || placeholderChanged
                  || staticPickerChanged
-                 || showWeekNumbersChanged )
+                 || showWeekNumbersChanged
+                 || showTodayButtonChanged )
             {
                 ExecuteAfterRender( async () => await JSModule.UpdateOptions( ElementRef, ElementId, new DatePickerUpdateJSOptions()
                 {
@@ -110,6 +112,7 @@
                     Placeholder = new JSOptionChange<string>( placeholderChanged, paramPlaceholder ),
                     StaticPicker = new JSOptionChange<bool>( staticPickerChanged, paramStaticPicker ),
                     ShowWeekNumbers = new JSOptionChange<bool>( showWeekNumbersChanged, paramShowWeekNumbers ),
+                    ShowTodayButton = new JSOptionChange<bool>( showTodayButtonChanged, paramShowTodayButton ),
                 } ) );
             }
         }
@@ -190,6 +193,7 @@
             Placeholder = Placeholder,
             StaticPicker = StaticPicker,
             ShowWeekNumbers = ShowWeekNumbers,
+            ShowTodayButton = ShowTodayButton,
             ValidationStatus = new
             {
                 SuccessClass = ClassProvider.DatePickerValidation( ValidationStatus.Success ),
@@ -480,6 +484,7 @@
             },
             amPM = new[] { Localizer["AM"], Localizer["PM"] },
             RangeSeparator = CurrentRangeSeparator,
+            Today = Localizer["Today"],
         };
     }
 
@@ -669,6 +674,11 @@
     /// Determines whether the calendar menu will show week numbers.
     /// </summary>
     [Parameter] public bool ShowWeekNumbers { get; set; }
+
+    /// <summary>
+    /// Determines whether to show the today button in the calendar menu.
+    /// </summary>
+    [Parameter] public bool ShowTodayButton { get; set; }
 
     #endregion
 }
diff --git a/Source/Blazorise/Modules/JSOptions/DatePickerJSOptions.cs b/Source/Blazorise/Modules/JSOptions/DatePickerJSOptions.cs
@@ -111,6 +111,11 @@ public class DatePickerJSOptions
     /// Determines whether the calendar menu will show week numbers.
     /// </summary>
     public bool ShowWeekNumbers { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether to show a "Today" button in the date picker calendar.
+    /// </summary>
+    public bool ShowTodayButton { get; set; }
 }
 
 /// <summary>
@@ -202,4 +207,9 @@ public class DatePickerUpdateJSOptions
     /// Gets or sets the option for updating the show week numbers setting.
     /// </summary>
     public JSOptionChange<bool> ShowWeekNumbers { get; set; }
+
+    /// <summary>
+    /// Gets or sets the option for showing or hiding the "Today" button.
+    /// </summary>
+    public JSOptionChange<bool> ShowTodayButton { get; set; }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/cs.json b/Source/Blazorise/Resources/Localization/DatePicker/cs.json
@@ -41,6 +41,7 @@
     "December": "Prosinec",
     "AM": "dopo",
     "PM": "odpo",
-    "RangeSeparator": " do "
+    "RangeSeparator": " do ",
+    "Today": "Dnes"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/da.json b/Source/Blazorise/Resources/Localization/DatePicker/da.json
@@ -41,6 +41,7 @@
     "December": "December",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " til "
+    "RangeSeparator": " til ",
+    "Today": "I dag"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/de.json b/Source/Blazorise/Resources/Localization/DatePicker/de.json
@@ -41,6 +41,7 @@
     "December": "Dezember",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " bis "
+    "RangeSeparator": " bis ",
+    "Today": "Heute"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/en.json b/Source/Blazorise/Resources/Localization/DatePicker/en.json
@@ -41,6 +41,7 @@
     "December": "December",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " to "
+    "RangeSeparator": " to ", 
+    "Today": "Today"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/es.json b/Source/Blazorise/Resources/Localization/DatePicker/es.json
@@ -41,6 +41,7 @@
     "December": "Diciembre",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " a "
+    "RangeSeparator": " a ",
+    "Today": "Hoy"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/fr.json b/Source/Blazorise/Resources/Localization/DatePicker/fr.json
@@ -41,6 +41,7 @@
     "December": "décembre",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " au "
+    "RangeSeparator": " au ",
+    "Today": "Aujourd'hui"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/hr.json b/Source/Blazorise/Resources/Localization/DatePicker/hr.json
@@ -41,6 +41,7 @@
     "December": "Prosinac",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " do "
+    "RangeSeparator": " do ",
+    "Today": "Danas"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/is.json b/Source/Blazorise/Resources/Localization/DatePicker/is.json
@@ -41,6 +41,7 @@
     "December": "Desember",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " til "
+    "RangeSeparator": " til ",
+    "Today": "Í dag"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/it.json b/Source/Blazorise/Resources/Localization/DatePicker/it.json
@@ -41,6 +41,7 @@
     "December": "Dicembre",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " al "
+    "RangeSeparator": " al ",
+    "Today": "Oggi"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/nl.json b/Source/Blazorise/Resources/Localization/DatePicker/nl.json
@@ -41,6 +41,7 @@
     "December": "december",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " t/m "
+    "RangeSeparator": " t/m ",
+    "Today": "Vandaag"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/pl.json b/Source/Blazorise/Resources/Localization/DatePicker/pl.json
@@ -41,6 +41,7 @@
     "December": "Grudzień",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " do "
+    "RangeSeparator": " do ",
+    "Today": "Dzisiaj"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/pt.json b/Source/Blazorise/Resources/Localization/DatePicker/pt.json
@@ -41,6 +41,7 @@
     "December": "Dezembro",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " até "
+    "RangeSeparator": " até ",
+    "Today": "Hoje"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/ro.json b/Source/Blazorise/Resources/Localization/DatePicker/ro.json
@@ -41,6 +41,7 @@
     "December": "decembrie",
     "AM": "AM",
     "PM": "PM",
-    "RangeSeparator": " până la "
+    "RangeSeparator": " până la ",
+    "Today": "Astăzi"
   }
 }
diff --git a/Source/Blazorise/Resources/Localization/DatePicker/ru.json b/Source/Blazorise/Resources/Localization/DatePicker/ru.json
@@ -41,6 +41,7 @@
     "December": "Декабрь",
     "AM": "ДП",
     "PM": "ПП",
-    "RangeSeparator": " — "
+    "RangeSeparator": " — ",
+    "Today": "Сегодня"
   }
 }