diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml b/docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
index d00d32ec..152a43e8 100644
--- a/docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
@@ -1289,6 +1289,408 @@
+
+
+ Represents a base class for designing date picker components.
+
+
+
+
+ Is set to true to scroll to the actual year after the next render
+
+
+
+
+ Represents the currently selected date
+
+
+ This date is highlighted in the UI
+
+
+
+
+ Represents the current view state of the object.
+
+
+
+
+ Initializes a new instance of the MudBaseDatePickerX class.
+
+
+
+
+ Gets or sets the scroll manager used to control scrolling behavior within the component.
+
+
+
+
+ Gets or sets the JavaScript interop service used to invoke JavaScript APIs from .NET code.
+
+ This property is typically provided by dependency injection in Blazor applications to enable
+ communication between .NET and JavaScript. It should be set by the framework and not manually assigned in most
+ scenarios.
+
+
+
+ Gets or sets the time provider used to obtain the current time within the component.
+
+ This property allows for abstraction of time-related operations, enabling easier testing and
+ customization of time sources. When overriding the default time behavior, provide a suitable implementation of
+ the TimeProvider.
+
+
+
+ Time zone information used to convert the selected date and time to a specific time zone. If not set, the component will use the local time zone of the user's device. This property is particularly useful when you want to display or store the selected date and time in a different time zone than the user's local time zone.
+
+
+
+
+ The maximum selectable date.
+
+
+
+
+ The minimum selectable date.
+
+
+
+
+ The initial view to display.
+
+
+ Defaults to .
+
+
+
+
+ The format for selected dates.
+
+
+
+
+ The current month shown in the date picker.
+
+
+ Defaults to the current month.
+ When bound via @bind-PickerMonth, controls the initial month displayed. This value is always the first day of a month.
+
+
+
+
+ Occurs when has changed.
+
+
+
+
+ The delay, in milliseconds, before closing the picker after a value is selected.
+
+
+ Defaults to 100.
+ This delay helps the user see that a date has been selected before the popover disappears.
+
+
+
+
+ The number of months to display in the calendar.
+
+
+ Defaults to 1.
+
+
+
+
+ The maximum number of months allowed in one row.
+
+
+ Defaults to null.
+ When null, the is used.
+
+
+
+
+ The start month when opening the picker.
+
+
+
+
+ Shows week numbers at the start of each week.
+
+
+ Defaults to false.
+
+
+
+
+ The format of the selected date in the title.
+
+
+ Defaults to ddd, dd MMM.
+ Supported date formats can be found here: .
+
+
+
+
+ Closes this picker when a value is selected.
+
+
+ Defaults to false.
+
+
+
+
+ The function used to disable one or more dates.
+
+
+ Defaults to null.
+ When set, a date will be disabled if the function returns true.
+
+
+
+
+ The function which returns CSS classes for a date.
+
+
+ Multiple classes must be separated by spaces.
+
+
+
+
+ The icon for the button that navigates to the previous month or year.
+
+
+ Defaults to .
+
+
+
+
+ The icon for the button which navigates to the next month or year.
+
+
+ Defaults to .
+
+
+
+
+ The year to use, which cannot be changed.
+
+
+ Defaults to null.
+
+
+
+
+ The month to use, which cannot be changed.
+
+
+ Defaults to null.
+
+
+
+
+ The day to use, which cannot be changed.
+
+
+ Defaults to null.
+
+
+
+
+ True if the generic type T is DateOnly or nullable, false otherwise.
+
+
+
+
+ Generic conversion method to convert the generic type T to DateTime. Supports DateTime and DateTimeOffset.
+
+ The value to convert.
+ The converted DateTime value.
+ Thrown when the type T is not supported.
+
+
+
+ Converts a nullable value to an instance of type , if supported.
+
+ If is , the local time zone offset is
+ applied to the converted value.
+ The nullable value to convert. If , the method returns the default
+ value for .
+ An instance of type representing the specified date, or the default value for
+ if is .
+ Thrown if is not or .
+
+
+
+
+
+
+
+
+
+ True if the current view is either hours or minutes, false otherwise.
+
+
+
+
+ True if the current view is either date, month or year, false otherwise.
+
+
+
+
+ Returns the date and time format string to use for formatting operations.
+
+ The returned format string is suitable for use with date and time formatting methods. If no
+ custom format is specified, the method combines the current culture's short date pattern with a 24-hour time
+ component.
+ A format string representing the date and time pattern. If a custom format is set, that value is returned;
+ otherwise, a default pattern based on the current culture's short date pattern and a 24-hour time format is
+ used.
+
+
+
+ Scrolls to the current year.
+
+
+
+
+ Provides date and time selection in a single component. The date and time can be submitted together or separately. The time selection is done through an interactive clock interface where the user can select hours and minutes by clicking or dragging a pointer.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The currently selected value.
+
+
+ When this value changes, occurs.
+
+
+
+
+ Occurs when has changed.
+
+
+
+
+ Shows a 12-hour selection clock.
+
+
+ Defaults to false.
+ When true, hours 1-12 are displayed with an AM or PM marker.
+ When false, hours 0-23 are displayed.
+
+
+
+
+ The step interval when selecting minutes.
+
+
+ Defaults to 1. For example: a value of 15 would allow minutes 0, 15,
+ 30, and 45 be selected.
+
+
+
+
+ Controls which values can be edited.
+
+
+ Defaults to .
+
+
+
+
+ Gets or sets the text displayed for the AM period in a time picker or similar control.
+
+
+
+
+ Gets or sets the text displayed for the post-meridiem (PM) indicator.
+
+
+
+
+ Handles the event when a day is clicked in the calendar view. This method updates the working value with the selected date, and if appropriate based on the component's configuration, submits the new value and closes the picker.
+
+ The date that was clicked.
+ A task that represents the asynchronous operation.
+
+
+
+ Submits the current value asynchronously, triggering value change notifications and validation as appropriate.
+
+ The method does not perform any action if the control is in a read-only state or if the
+ working value is null. Upon successful submission, the method updates the value, invokes change notifications,
+ updates the displayed text, and initiates validation.
+ A task that represents the asynchronous submit operation.
+
+
+
+ Clears the selected date and time, resetting the component to its initial state. If is true, the picker will also close after clearing the value.
+
+ Indicates whether the picker should close after clearing the value.
+ A task that represents the asynchronous operation.
+
+
+
+ Gets the formatted date string for the title of the picker, based on the current working value, the component's value, or the current local date if neither is set. The date is formatted according to the culture settings and the specified format for the title.
+
+ The formatted date string for the title of the picker.
+
+
+
+ Calculates the first day of the month for the current calendar context.
+
+ The returned date is determined using the culture-specific calendar, which may affect the
+ calculation of the month's start depending on the culture in use.
+ A representing the first day of the month, based on the current value, highlighted date,
+ or the current local date if neither is set.
+
+
+
+ Calculates the calendar year corresponding to the specified date, adjusted according to the current value and
+ culture settings.
+
+ The result is determined using the calendar of the current culture. If the current value is
+ not set, the calculation uses the current local date.
+ The date for which to determine the calendar year. The calculation is based on the calendar associated with the
+ current culture.
+ The calendar year as an integer, adjusted based on the current value and the specified date.
+
+
+
+ Gets the hour portion of the selected time.
+
+ A two-character string depending on whether is set, or -- if no value is set.
+
+
+
+ Gets the minute portion of the selected time.
+
+ A two-digit string for minutes, or -- if no value is set.
+
+
+
+ Scrolls to the current year.
+
+
+
+
+ Sets the current view of the picker to the specified value.
+
+
+
+
+ Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources asynchronously.
+
+
@@ -5985,8 +6387,13 @@
-
+
+
+
+
+
+ The timezone of the watch. If null, DateTime.Now will be used.
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/DateTimePickerPage.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/DateTimePickerPage.razor
new file mode 100644
index 00000000..a2daa74d
--- /dev/null
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/DateTimePickerPage.razor
@@ -0,0 +1,14 @@
+@page "/muddatetimepicker"
+@namespace MudExtensions.Docs.Pages
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample1.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample1.razor
new file mode 100644
index 00000000..a4ce5a8e
--- /dev/null
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample1.razor
@@ -0,0 +1,43 @@
+@namespace MudExtensions.Docs.Examples
+@using MudBlazor.Extensions
+
+
+
+
+
+
+
+
+
+ @foreach (Variant item in Enum.GetValues())
+ {
+ @item.ToDescriptionString()
+ }
+
+
+
+
+
+
+ @foreach (Color item in Enum.GetValues())
+ {
+ @item.ToDescriptionString()
+ }
+
+
+ Set Today
+
+
+
+
+@code {
+ private DateTime? _date = DateTime.Now;
+ private bool _editable = false;
+ private bool _showToolbar = true;
+ private Color _color = Color.Primary;
+ private string? _dateFormat;
+ private bool _clearable = false;
+ private Variant _variant = Variant.Outlined;
+ private bool _amPm = false;
+}
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample2.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample2.razor
new file mode 100644
index 00000000..e599abe7
--- /dev/null
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample2.razor
@@ -0,0 +1,27 @@
+@namespace MudExtensions.Docs.Examples
+@using MudBlazor.Extensions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private DateTime? _date = DateTime.Now;
+ private DateTimeOffset _date2 = DateTimeOffset.UtcNow;
+ private DateOnly _date3 = DateOnly.FromDateTime(DateTime.Now);
+ private bool _clearable = false;
+ private bool _editable = false;
+}
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample3.razor b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample3.razor
new file mode 100644
index 00000000..2e0ca6d7
--- /dev/null
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample3.razor
@@ -0,0 +1,52 @@
+@namespace MudExtensions.Docs.Examples
+@using MudBlazor.Extensions
+
+
+
+
+
+ Clear
+ Cancel
+ OK
+
+
+
+
+
+
+
+ @foreach (Variant item in Enum.GetValues())
+ {
+ @item.ToDescriptionString()
+ }
+
+
+
+
+
+
+ @foreach (Color item in Enum.GetValues())
+ {
+ @item.ToDescriptionString()
+ }
+
+
+ Set Today
+
+
+
+
+@code {
+ private MudDateTimePicker _picker = null!;
+
+ private DateTime? _date = DateTime.Now;
+ private bool _editable = false;
+ private bool _showToolbar = true;
+ private bool _submitOnClose = true;
+ private Color _color = Color.Primary;
+ private string? _dateFormat;
+ private bool _isAdornmentEnd = true;
+ private bool _clearable = false;
+ private Variant _variant = Variant.Outlined;
+}
diff --git a/docs/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs b/docs/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs
index 223769ee..ca3254ab 100644
--- a/docs/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs
+++ b/docs/CodeBeam.MudBlazor.Extensions.Docs/Services/MudExtensionsDocsService.cs
@@ -1,49 +1,49 @@
using MudExtensions.Utilities;
-namespace MudExtensions.Docs.Services
+namespace MudExtensions.Docs.Services;
+
+public class MudExtensionsDocsService
{
- public class MudExtensionsDocsService
+ List _components = new()
{
- List _components = new()
- {
- new MudExtensionComponentInfo() {Title = "MudAnimate", Component = typeof(MudAnimate), Usage = ComponentUsage.Utility, IsUnique = true, Description = "A revolutionary next generation animate component."},
- new MudExtensionComponentInfo() {Title = "MudBarcode", Component = typeof(MudBarcode), Usage = ComponentUsage.Display, IsUnique = true, Description = "A QR and barcode viewer with defined value."},
- new MudExtensionComponentInfo() {Title = "MudChipField", Component = typeof(MudChipField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A textfield which transform a text to a chip when pressed pre-defined key."},
- new MudExtensionComponentInfo() {Title = "MudCodeInput", Component = typeof(MudCodeInput<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A group of textfields that each one contains a char."},
- new MudExtensionComponentInfo() {Title = "MudCodeViewer", Component = typeof(MudCodeViewer), Usage = ComponentUsage.Display, IsUnique = true, Description = "A viewer for code blocks with basic editable options."},
- new MudExtensionComponentInfo() {Title = "MudColorProvider", Component = typeof(MudColorProvider), Usage = ComponentUsage.Utility, IsUnique = true, Description = "An extension for primary, secondary and tertiary colors to support Material 3.", IsMaterial3 = true},
- new MudExtensionComponentInfo() {Title = "MudComboBox", Component = typeof(MudComboBox<>), RelatedComponents = new List() {typeof(MudComboBoxItem)}, Usage = ComponentUsage.Input, IsUnique = true, Description = "Unites MudSelect and MudAutocomplete features."},
- new MudExtensionComponentInfo() {Title = "MudCssManager", Component = typeof(MudCssManager), Usage = ComponentUsage.Utility, IsUnique = true, IsUtility = true, Description = "Directly and dynamically get or set component's css property."},
- new MudExtensionComponentInfo() {Title = "MudCsvMapper", Component = typeof(MudCsvMapper), Usage = ComponentUsage.Display, IsUnique = true, Description = "A .csv file uploader that matches the .csv file headers to supplied / expected headers."},
- new MudExtensionComponentInfo() {Title = "MudDateWheelPicker", Component = typeof(MudDateWheelPicker), Usage = ComponentUsage.Input, IsUnique = true, Description = "A date time picker with MudWheels."},
- new MudExtensionComponentInfo() {Title = "MudGallery", Component = typeof(MudGallery), Usage = ComponentUsage.Display, IsUnique = true, Description = "Mobile friendly image gallery component."},
- new MudExtensionComponentInfo() {Title = "MudInputStyler", Component = typeof(MudInputStyler), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Applies colors or other CSS styles easily for mud inputs like MudTextField and MudSelect."},
- new MudExtensionComponentInfo() {Title = "MudJsonTreeView", Component = typeof(MudJsonTreeView), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudJsonTreeViewNode)}, IsUnique = true, Description = "A treeview for display json data."},
- new MudExtensionComponentInfo() {Title = "MudListExtended", Component = typeof(MudListExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudListItemExtended)}, IsUnique = false, Description = "The extended MudList component with richer features."},
- new MudExtensionComponentInfo() {Title = "MudLoading", Component = typeof(MudLoading), Usage = ComponentUsage.Display, IsUnique = true, Description = "Loading container for a whole page or a specific section."},
- new MudExtensionComponentInfo() {Title = "MudLoadingButton", Component = typeof(MudLoadingButton), Usage = ComponentUsage.Button, IsUnique = true, Description = "A classic MudButton with loading improvements."},
- new MudExtensionComponentInfo() {Title = "MudPage", Component = typeof(MudPage), Usage = ComponentUsage.Layout, RelatedComponents = new List() {typeof(MudSection)}, IsUnique = true, Description = "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."},
- new MudExtensionComponentInfo() {Title = "MudPasswordField", Component = typeof(MudPasswordField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A specialized textfield that designed for working easily with passwords."},
- new MudExtensionComponentInfo() {Title = "MudPopup", Component = typeof(MudPopup), Usage = ComponentUsage.Display, IsUnique = true, Description = "A mobile friendly multi-functional popup content."},
- new MudExtensionComponentInfo() {Title = "MudRangeSlider", Component = typeof(MudRangeSlider), Usage = ComponentUsage.Input, IsUnique = true, Description = "A slider with range capabilities, set upper and lower values."},
- new MudExtensionComponentInfo() {Title = "MudScrollbar", Component = typeof(MudScrollbar), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Customize all or defined scrollbars."},
- new MudExtensionComponentInfo() {Title = "MudSelectExtended", Component = typeof(MudSelectExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudSelectItemExtended)}, IsUnique = false, Description = "The extended MudSelect component with richer features."},
- new MudExtensionComponentInfo() {Title = "MudSignaturePad", Component = typeof(MudSignaturePad), Usage = ComponentUsage.Display, IsUnique = true, Description = "Draw and export a signature on a canvas."},
- new MudExtensionComponentInfo() {Title = "MudSpeedDial", Component = typeof(MudSpeedDial), Usage = ComponentUsage.Button, IsUnique = true, Description = "One button that stack other buttons in a popover."},
- new MudExtensionComponentInfo() {Title = "MudSplitter", Component = typeof(MudSplitter), Usage = ComponentUsage.Layout, IsUnique = true, Description = "A resizeable content splitter."},
- new MudExtensionComponentInfo() {Title = "MudStepperExtended", Component = typeof(MudStepperExtended), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudStepExtended)}, IsUnique = false, Description = "A wizard-like steps to control the flow with rich options."},
- new MudExtensionComponentInfo() {Title = "MudSwitchM3", Component = typeof(MudSwitchM3), Usage = ComponentUsage.Input, IsUnique = true, IsMaterial3 = true, Description = "Material 3 switch component that has all MudSwitch features."},
- new MudExtensionComponentInfo() {Title = "MudTeleport", Component = typeof(MudTeleport), Usage = ComponentUsage.Layout, IsUnique = true, Description = "Teleport the content to the specified parent and redesign the DOM hierarchy."},
- new MudExtensionComponentInfo() {Title = "MudTextFieldExtended", Component = typeof(MudTextFieldExtended<>), Usage = ComponentUsage.Input, IsUnique = false, Description = "The extended MudTextField component with richer features."},
- new MudExtensionComponentInfo() {Title = "MudTextM3", Component = typeof(MudTextM3), Usage = ComponentUsage.Display, IsUnique = true, IsMaterial3 = true, Description = "Material 3 typography."},
- new MudExtensionComponentInfo() {Title = "MudTransferList", Component = typeof(MudTransferList<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A component that has 2 lists that transfer items to another."},
- new MudExtensionComponentInfo() {Title = "MudWatch", Component = typeof(MudWatch), Usage = ComponentUsage.Display, IsUnique = true, Description = "A performance optimized watch to show current time or show stopwatch or countdown."},
- new MudExtensionComponentInfo() {Title = "MudWheel", Component = typeof(MudWheel<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "Smoothly changes values in a wheel within defined ItemCollection."},
- };
+ new MudExtensionComponentInfo() {Title = "MudAnimate", Component = typeof(MudAnimate), Usage = ComponentUsage.Utility, IsUnique = true, Description = "A revolutionary next generation animate component."},
+ new MudExtensionComponentInfo() {Title = "MudBarcode", Component = typeof(MudBarcode), Usage = ComponentUsage.Display, IsUnique = true, Description = "A QR and barcode viewer with defined value."},
+ new MudExtensionComponentInfo() {Title = "MudChipField", Component = typeof(MudChipField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A textfield which transform a text to a chip when pressed pre-defined key."},
+ new MudExtensionComponentInfo() {Title = "MudCodeInput", Component = typeof(MudCodeInput<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A group of textfields that each one contains a char."},
+ new MudExtensionComponentInfo() {Title = "MudCodeViewer", Component = typeof(MudCodeViewer), Usage = ComponentUsage.Display, IsUnique = true, Description = "A viewer for code blocks with basic editable options."},
+ new MudExtensionComponentInfo() {Title = "MudColorProvider", Component = typeof(MudColorProvider), Usage = ComponentUsage.Utility, IsUnique = true, Description = "An extension for primary, secondary and tertiary colors to support Material 3.", IsMaterial3 = true},
+ new MudExtensionComponentInfo() {Title = "MudComboBox", Component = typeof(MudComboBox<>), RelatedComponents = new List() {typeof(MudComboBoxItem)}, Usage = ComponentUsage.Input, IsUnique = true, Description = "Unites MudSelect and MudAutocomplete features."},
+ new MudExtensionComponentInfo() {Title = "MudCssManager", Component = typeof(MudCssManager), Usage = ComponentUsage.Utility, IsUnique = true, IsUtility = true, Description = "Directly and dynamically get or set component's css property."},
+ new MudExtensionComponentInfo() {Title = "MudCsvMapper", Component = typeof(MudCsvMapper), Usage = ComponentUsage.Display, IsUnique = true, Description = "A .csv file uploader that matches the .csv file headers to supplied / expected headers."},
+ new MudExtensionComponentInfo() {Title = "MudDateTimePicker", Component = typeof(MudDateTimePicker<>), Usage = ComponentUsage.Input, IsUnique = false, Description = "Unified generic date and time picker component."},
+ new MudExtensionComponentInfo() {Title = "MudDateWheelPicker", Component = typeof(MudDateWheelPicker), Usage = ComponentUsage.Input, IsUnique = true, Description = "A date time picker with MudWheels."},
+ new MudExtensionComponentInfo() {Title = "MudGallery", Component = typeof(MudGallery), Usage = ComponentUsage.Display, IsUnique = true, Description = "Mobile friendly image gallery component."},
+ new MudExtensionComponentInfo() {Title = "MudInputStyler", Component = typeof(MudInputStyler), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Applies colors or other CSS styles easily for mud inputs like MudTextField and MudSelect."},
+ new MudExtensionComponentInfo() {Title = "MudJsonTreeView", Component = typeof(MudJsonTreeView), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudJsonTreeViewNode)}, IsUnique = true, Description = "A treeview for display json data."},
+ new MudExtensionComponentInfo() {Title = "MudListExtended", Component = typeof(MudListExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudListItemExtended)}, IsUnique = false, Description = "The extended MudList component with richer features."},
+ new MudExtensionComponentInfo() {Title = "MudLoading", Component = typeof(MudLoading), Usage = ComponentUsage.Display, IsUnique = true, Description = "Loading container for a whole page or a specific section."},
+ new MudExtensionComponentInfo() {Title = "MudLoadingButton", Component = typeof(MudLoadingButton), Usage = ComponentUsage.Button, IsUnique = true, Description = "A classic MudButton with loading improvements."},
+ new MudExtensionComponentInfo() {Title = "MudPage", Component = typeof(MudPage), Usage = ComponentUsage.Layout, RelatedComponents = new List() {typeof(MudSection)}, IsUnique = true, Description = "A CSS grid layout component that builds columns and rows, supports ColSpan & RowSpan."},
+ new MudExtensionComponentInfo() {Title = "MudPasswordField", Component = typeof(MudPasswordField<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A specialized textfield that designed for working easily with passwords."},
+ new MudExtensionComponentInfo() {Title = "MudPopup", Component = typeof(MudPopup), Usage = ComponentUsage.Display, IsUnique = true, Description = "A mobile friendly multi-functional popup content."},
+ new MudExtensionComponentInfo() {Title = "MudRangeSlider", Component = typeof(MudRangeSlider), Usage = ComponentUsage.Input, IsUnique = true, Description = "A slider with range capabilities, set upper and lower values."},
+ new MudExtensionComponentInfo() {Title = "MudScrollbar", Component = typeof(MudScrollbar), Usage = ComponentUsage.Utility, IsUnique = true, Description = "Customize all or defined scrollbars."},
+ new MudExtensionComponentInfo() {Title = "MudSelectExtended", Component = typeof(MudSelectExtended<>), Usage = ComponentUsage.Input, RelatedComponents = new List() {typeof(MudSelectItemExtended)}, IsUnique = false, Description = "The extended MudSelect component with richer features."},
+ new MudExtensionComponentInfo() {Title = "MudSignaturePad", Component = typeof(MudSignaturePad), Usage = ComponentUsage.Display, IsUnique = true, Description = "Draw and export a signature on a canvas."},
+ new MudExtensionComponentInfo() {Title = "MudSpeedDial", Component = typeof(MudSpeedDial), Usage = ComponentUsage.Button, IsUnique = true, Description = "One button that stack other buttons in a popover."},
+ new MudExtensionComponentInfo() {Title = "MudSplitter", Component = typeof(MudSplitter), Usage = ComponentUsage.Layout, IsUnique = true, Description = "A resizeable content splitter."},
+ new MudExtensionComponentInfo() {Title = "MudStepperExtended", Component = typeof(MudStepperExtended), Usage = ComponentUsage.Display, RelatedComponents = new List() {typeof(MudStepExtended)}, IsUnique = false, Description = "A wizard-like steps to control the flow with rich options."},
+ new MudExtensionComponentInfo() {Title = "MudSwitchM3", Component = typeof(MudSwitchM3), Usage = ComponentUsage.Input, IsUnique = true, IsMaterial3 = true, Description = "Material 3 switch component that has all MudSwitch features."},
+ new MudExtensionComponentInfo() {Title = "MudTeleport", Component = typeof(MudTeleport), Usage = ComponentUsage.Layout, IsUnique = true, Description = "Teleport the content to the specified parent and redesign the DOM hierarchy."},
+ new MudExtensionComponentInfo() {Title = "MudTextFieldExtended", Component = typeof(MudTextFieldExtended<>), Usage = ComponentUsage.Input, IsUnique = false, Description = "The extended MudTextField component with richer features."},
+ new MudExtensionComponentInfo() {Title = "MudTextM3", Component = typeof(MudTextM3), Usage = ComponentUsage.Display, IsUnique = true, IsMaterial3 = true, Description = "Material 3 typography."},
+ new MudExtensionComponentInfo() {Title = "MudTransferList", Component = typeof(MudTransferList<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "A component that has 2 lists that transfer items to another."},
+ new MudExtensionComponentInfo() {Title = "MudWatch", Component = typeof(MudWatch), Usage = ComponentUsage.Display, IsUnique = true, Description = "A performance optimized watch to show current time or show stopwatch or countdown."},
+ new MudExtensionComponentInfo() {Title = "MudWheel", Component = typeof(MudWheel<>), Usage = ComponentUsage.Input, IsUnique = true, Description = "Smoothly changes values in a wheel within defined ItemCollection."},
+ };
- public List GetAllComponentInfo()
- {
- return _components;
- }
+ public List GetAllComponentInfo()
+ {
+ return _components;
}
}
diff --git a/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudBaseDatePickerX.cs b/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudBaseDatePickerX.cs
new file mode 100644
index 00000000..f6b9c008
--- /dev/null
+++ b/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudBaseDatePickerX.cs
@@ -0,0 +1,506 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+using MudBlazor.Extensions;
+using MudBlazor.State;
+using System.Globalization;
+
+namespace MudExtensions;
+
+///
+/// Represents a base class for designing date picker components.
+///
+public abstract partial class MudBaseDatePickerX : MudPicker
+{
+ internal readonly string _mudPickerCalendarContentElementId;
+ private readonly ParameterState _formatState;
+ protected readonly string _componentId = Identifier.Create();
+
+ internal DateTime? _picker_month;
+
+ ///
+ /// Is set to true to scroll to the actual year after the next render
+ ///
+ protected bool _scrollToYearAfterRender = false;
+
+ ///
+ /// Represents the currently selected date
+ ///
+ ///
+ /// This date is highlighted in the UI
+ ///
+ protected internal DateTime? HighlightedDate { get; set; }
+
+ ///
+ /// Represents the current view state of the object.
+ ///
+ protected OpenTo CurrentView;
+
+ ///
+ /// Initializes a new instance of the MudBaseDatePickerX class.
+ ///
+ protected MudBaseDatePickerX()
+ {
+ _mudPickerCalendarContentElementId = Identifier.Create();
+ Culture = CultureInfo.CurrentCulture;
+
+ using var registerScope = CreateRegisterScope();
+ _formatState = registerScope.RegisterParameter(nameof(DateFormat))
+ .WithParameter(() => DateFormat)
+ .WithChangeHandler(DateFormatChangedAsync);
+ }
+
+ ///
+ /// Gets or sets the scroll manager used to control scrolling behavior within the component.
+ ///
+ [Inject] protected IScrollManager ScrollManager { get; set; } = null!;
+
+ ///
+ /// Gets or sets the JavaScript interop service used to invoke JavaScript APIs from .NET code.
+ ///
+ /// This property is typically provided by dependency injection in Blazor applications to enable
+ /// communication between .NET and JavaScript. It should be set by the framework and not manually assigned in most
+ /// scenarios.
+ [Inject] private IJsApiService JsApiService { get; set; } = null!;
+
+ ///
+ /// Gets or sets the time provider used to obtain the current time within the component.
+ ///
+ /// This property allows for abstraction of time-related operations, enabling easier testing and
+ /// customization of time sources. When overriding the default time behavior, provide a suitable implementation of
+ /// the TimeProvider.
+ [Inject] protected TimeProvider TimeProvider { get; set; } = null!;
+
+
+ ///
+ /// Time zone information used to convert the selected date and time to a specific time zone. If not set, the component will use the local time zone of the user's device. This property is particularly useful when you want to display or store the selected date and time in a different time zone than the user's local time zone.
+ ///
+ [Parameter]
+ public TimeZoneInfo? TimeZone { get; set; }
+
+ ///
+ /// The maximum selectable date.
+ ///
+ [Parameter] public DateTime? MaxDate { get; set; }
+
+ ///
+ /// The minimum selectable date.
+ ///
+ [Parameter] public DateTime? MinDate { get; set; }
+
+ ///
+ /// The initial view to display.
+ ///
+ ///
+ /// Defaults to .
+ ///
+ [Parameter] public OpenTo OpenTo { get; set; } = OpenTo.Date;
+
+ ///
+ /// The format for selected dates.
+ ///
+ [Parameter, ParameterState]
+ public string? DateFormat { get; set; }
+
+ [Parameter] public DayOfWeek? FirstDayOfWeek { get; set; }
+
+ ///
+ /// The current month shown in the date picker.
+ ///
+ ///
+ /// Defaults to the current month.
+ /// When bound via @bind-PickerMonth, controls the initial month displayed. This value is always the first day of a month.
+ ///
+ [Parameter]
+ public DateTime? PickerMonth
+ {
+ get => _picker_month;
+ set
+ {
+ if (value == _picker_month)
+ return;
+ _picker_month = value;
+ InvokeAsync(StateHasChanged);
+ PickerMonthChanged.InvokeAsync(value);
+ }
+ }
+
+ ///
+ /// Occurs when has changed.
+ ///
+ [Parameter] public EventCallback PickerMonthChanged { get; set; }
+
+ ///
+ /// The delay, in milliseconds, before closing the picker after a value is selected.
+ ///
+ ///
+ /// Defaults to 100.
+ /// This delay helps the user see that a date has been selected before the popover disappears.
+ ///
+ [Parameter] public int ClosingDelay { get; set; } = 100;
+
+ ///
+ /// The number of months to display in the calendar.
+ ///
+ ///
+ /// Defaults to 1.
+ ///
+ [Parameter] public int DisplayMonths { get; set; } = 1;
+
+ ///
+ /// The maximum number of months allowed in one row.
+ ///
+ ///
+ /// Defaults to null.
+ /// When null, the is used.
+ ///
+ [Parameter] public int? MaxMonthColumns { get; set; }
+
+ ///
+ /// The start month when opening the picker.
+ ///
+ [Parameter] public DateTime? StartMonth { get; set; }
+
+ ///
+ /// Shows week numbers at the start of each week.
+ ///
+ ///
+ /// Defaults to false.
+ ///
+ [Parameter] public bool ShowWeekNumbers { get; set; }
+
+ ///
+ /// The format of the selected date in the title.
+ ///
+ ///
+ /// Defaults to ddd, dd MMM.
+ /// Supported date formats can be found here: .
+ ///
+ [Parameter] public string TitleDateFormat { get; set; } = "ddd, dd MMM";
+
+ ///
+ /// Closes this picker when a value is selected.
+ ///
+ ///
+ /// Defaults to false.
+ ///
+ [Parameter] public bool AutoClose { get; set; }
+
+ ///
+ /// The function used to disable one or more dates.
+ ///
+ ///
+ /// Defaults to null.
+ /// When set, a date will be disabled if the function returns true.
+ ///
+ [Parameter] public Func IsDateDisabledFunc { get; set; } = _ => false;
+
+ ///
+ /// The function which returns CSS classes for a date.
+ ///
+ ///
+ /// Multiple classes must be separated by spaces.
+ ///
+ [Parameter] public Func? AdditionalDateClassesFunc { get; set; }
+
+ ///
+ /// The icon for the button that navigates to the previous month or year.
+ ///
+ ///
+ /// Defaults to .
+ ///
+ [Parameter] public string PreviousIcon { get; set; } = Icons.Material.Filled.ChevronLeft;
+
+ ///
+ /// The icon for the button which navigates to the next month or year.
+ ///
+ ///
+ /// Defaults to .
+ ///
+ [Parameter] public string NextIcon { get; set; } = Icons.Material.Filled.ChevronRight;
+
+ ///
+ /// The year to use, which cannot be changed.
+ ///
+ ///
+ /// Defaults to null.
+ ///
+ [Parameter] public int? FixYear { get; set; }
+
+ ///
+ /// The month to use, which cannot be changed.
+ ///
+ ///
+ /// Defaults to null.
+ ///
+ [Parameter] public int? FixMonth { get; set; }
+
+ ///
+ /// The day to use, which cannot be changed.
+ ///
+ ///
+ /// Defaults to null.
+ ///
+ [Parameter] public int? FixDay { get; set; }
+
+ ///
+ /// True if the generic type T is DateOnly or nullable, false otherwise.
+ ///
+ protected internal bool IsDateOnly => (Nullable.GetUnderlyingType(typeof(T)) ?? typeof(T)) == typeof(DateOnly);
+
+ ///
+ /// Generic conversion method to convert the generic type T to DateTime. Supports DateTime and DateTimeOffset.
+ ///
+ /// The value to convert.
+ /// The converted DateTime value.
+ /// Thrown when the type T is not supported.
+ protected internal DateTime? ToDateTime(T? value)
+ {
+ if (value == null)
+ return null;
+
+ var tz = TimeZone ?? TimeZoneInfo.Local;
+
+ if (value is DateTime dt)
+ return dt;
+
+ if (value is DateTimeOffset dto)
+ return TimeZoneInfo.ConvertTime(dto, tz).DateTime;
+
+ if (value is DateOnly d)
+ return d.ToDateTime(TimeOnly.MinValue);
+
+ throw new NotSupportedException($"Type {typeof(T)} not supported");
+ }
+
+ ///
+ /// Converts a nullable value to an instance of type , if supported.
+ ///
+ /// If is , the local time zone offset is
+ /// applied to the converted value.
+ /// The nullable value to convert. If , the method returns the default
+ /// value for .
+ /// An instance of type representing the specified date, or the default value for
+ /// if is .
+ /// Thrown if is not or .
+ protected T? FromDateTime(DateTime? date)
+ {
+ if (date == null)
+ return default;
+
+ var tz = TimeZone ?? TimeZoneInfo.Local;
+
+ var t = Nullable.GetUnderlyingType(typeof(T)) ?? typeof(T);
+
+ if (t == typeof(DateTime))
+ return (T)(object)date.Value;
+
+ if (t == typeof(DateTimeOffset))
+ {
+ var offset = tz.GetUtcOffset(date.Value);
+ return (T)(object)new DateTimeOffset(date.Value, offset);
+ }
+
+ if (t == typeof(DateOnly))
+ return (T)(object)DateOnly.FromDateTime(date.Value);
+
+ throw new NotSupportedException($"Type {typeof(T)} not supported");
+ }
+
+ protected void ValidateType()
+ {
+ var t = Nullable.GetUnderlyingType(typeof(T)) ?? typeof(T);
+
+ if (t != typeof(DateTime) && t != typeof(DateTimeOffset) && t != typeof(DateOnly))
+ throw new NotSupportedException($"Type {typeof(T)} not supported.");
+ }
+
+ ///
+ protected override void OnInitialized()
+ {
+ ValidateType();
+ base.OnInitialized();
+ }
+
+ ///
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ await base.OnAfterRenderAsync(firstRender);
+
+ if (firstRender)
+ {
+ _picker_month ??= GetCalendarStartOfMonth();
+ }
+
+ if (firstRender && CurrentView == OpenTo.Year)
+ {
+ ScrollToYearAsync().CatchAndLog();
+ return;
+ }
+
+ if (_scrollToYearAfterRender)
+ ScrollToYearAsync().CatchAndLog();
+ }
+
+ protected virtual Task DateFormatChangedAsync(string? newFormat) => Task.CompletedTask;
+
+ private Task DateFormatChangedAsync(ParameterChangedEventArgs args) => DateFormatChangedAsync(args.Value);
+
+ ///
+ /// True if the current view is either hours or minutes, false otherwise.
+ ///
+ public bool IsTimeView => CurrentView == OpenTo.Hours || CurrentView == OpenTo.Minutes;
+
+ ///
+ /// True if the current view is either date, month or year, false otherwise.
+ ///
+ public bool IsDateView =>
+ CurrentView == OpenTo.Date
+ || CurrentView == OpenTo.Month
+ || CurrentView == OpenTo.Year;
+
+ protected override async Task OnPickerOpenedAsync()
+ {
+ await base.OnPickerOpenedAsync();
+
+ var dateTime = ToDateTime(_value);
+
+ if (dateTime.HasValue)
+ {
+ var culture = GetCulture();
+ var calendar = culture.Calendar;
+ PickerMonth = new DateTime(
+ calendar.GetYear(dateTime.Value),
+ calendar.GetMonth(dateTime.Value),
+ 1,
+ calendar);
+ }
+
+ CurrentView = OpenTo;
+ }
+
+ protected DateTime GetMonthStart(int month)
+ {
+ var culture = GetCulture();
+ var calendar = culture.Calendar;
+ var baseDate = _picker_month ?? DateTime.Today;
+
+ return calendar.AddMonths(new DateTime(baseDate.Year, baseDate.Month, 1), month);
+ }
+
+ protected IEnumerable GetWeek(int month, int index)
+ {
+ if (index is < 0 or > 5)
+ throw new ArgumentException("Index must be between 0 and 5", nameof(index));
+
+ var culture = GetCulture();
+ var monthFirst = GetMonthStart(month);
+
+ var weekFirst = monthFirst
+ .AddDays(index * 7)
+ .StartOfWeek(GetFirstDayOfWeek(), culture);
+
+ for (var i = 0; i < 7; i++)
+ yield return weekFirst.AddDays(i);
+ }
+
+ protected virtual bool IsDayDisabled(DateTime date)
+ {
+ return date < MinDate ||
+ date > MaxDate ||
+ IsDateDisabledFunc(date);
+ }
+
+ protected abstract string GetDayClasses(int month, DateTime day);
+ protected abstract Task OnDayClickedAsync(DateTime dateTime);
+
+ protected string FormatTitleDate(DateTime? date)
+ {
+ return date?.ToString(TitleDateFormat, GetCulture()) ?? "";
+ }
+
+ protected IEnumerable GetAbbreviatedDayNames()
+ {
+ var culture = GetCulture();
+ var names = culture.DateTimeFormat.AbbreviatedDayNames;
+
+ var firstDay = (int)GetFirstDayOfWeek();
+
+ return Enumerable.Range(0, 7).Select(i => names[(i + firstDay) % 7]);
+ }
+
+ protected override IConverter GetDefaultConverter()
+ {
+ return new DefaultConverter
+ {
+ Culture = GetCulture,
+ Format = GetFormat
+ };
+ }
+
+ protected override string? ConvertSet(T? value)
+ {
+ var dt = ToDateTime(value);
+
+ if (dt == null)
+ return null;
+
+ return dt.Value.ToString(GetFormat(), GetCulture());
+ }
+
+ protected internal string? ConvertSetInternal(T? value)
+ {
+ return ConvertSet(value);
+ }
+
+ ///
+ /// Returns the date and time format string to use for formatting operations.
+ ///
+ /// The returned format string is suitable for use with date and time formatting methods. If no
+ /// custom format is specified, the method combines the current culture's short date pattern with a 24-hour time
+ /// component.
+ /// A format string representing the date and time pattern. If a custom format is set, that value is returned;
+ /// otherwise, a default pattern based on the current culture's short date pattern and a 24-hour time format is
+ /// used.
+ protected override string GetFormat()
+ {
+ if (!string.IsNullOrWhiteSpace(_formatState.Value))
+ return _formatState.Value;
+
+ if (IsDateOnly)
+ return CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
+
+ return $"{CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern} HH:mm";
+ }
+
+ protected abstract DateTime GetCalendarStartOfMonth();
+ protected abstract int GetCalendarYear(DateTime yearDate);
+
+ protected DayOfWeek GetFirstDayOfWeek()
+ {
+ return FirstDayOfWeek ?? GetCulture().DateTimeFormat.FirstDayOfWeek;
+ }
+
+ protected DateTime GetMonthEnd(int month)
+ {
+ var culture = GetCulture();
+ var calendar = culture.Calendar;
+ var monthStartDate = PickerMonth ?? DateTime.Today.StartOfMonth(culture);
+
+ return calendar
+ .AddMonths(monthStartDate, month)
+ .EndOfMonth(culture);
+ }
+
+ ///
+ /// Scrolls to the current year.
+ ///
+ public virtual Task ScrollToYearAsync(DateTime? date = null)
+ {
+ return Task.CompletedTask;
+ }
+
+ //private ValueTask HandleMouseoverOnPickerCalendarDayButton(int tempId)
+ //{
+ // return JsApiService.UpdateStyleProperty(_mudPickerCalendarContentElementId, "--selected-day", tempId);
+ //}
+}
\ No newline at end of file
diff --git a/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor b/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor
new file mode 100644
index 00000000..6e0aecc3
--- /dev/null
+++ b/src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor
@@ -0,0 +1,348 @@
+@typeparam T
+@namespace MudExtensions
+@inherits MudBaseDatePickerX
+
+@Render
+
+@code {
+
+ protected override RenderFragment PickerContent =>
+ @
+
+
+ @GetFormattedYearString()
+
+ @if (_mode == PickerMode.Time)
+ {
+ @GetTitleDateString()
+ }
+
+ @if (!IsDateOnly)
+ {
+
+
+
+
+
+
+
+
+ }
+
+
+
+ @if (_mode == PickerMode.Date)
+ {
+ @GetTitleDateString()
+ }
+ else
+ {
+