Merge pull request #4856 from syncfusion-content/910140-dev

910140: Documentaion for Time Restriction, Input Formats and Disabled…

Author: PrinceOliver

blazor-toc.html

@@ -3326,6 +3326,7 @@
 			<li><a href="/blazor/mention/working-with-data">Working with Data</a></li>
 			<li><a href="/blazor/mention/filtering-data">Filtering Data</a></li>
 			<li><a href="/blazor/mention/sorting">Sorting</a></li>
+			<li> <a href="/blazor/mention/disabled-items">Disabled Items</a></li>
 			<li><a href="/blazor/mention/templates">Templates</a></li>
 			<li><a href="/blazor/mention/localization">Localization</a></li>
 			<li><a href="/blazor/mention/customization">Customization</a></li>

blazor/autocomplete/disabled-items.md

@@ -27,7 +27,6 @@ The disableItem method can be used to handle dynamic changing in disable state o
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemHTMLLIElement |  <code>HTMLLIElement</code> |  It accepts the HTML Li element of the item to be removed.  |
 | itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
 | itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
 

blazor/combobox/disabled-items.md

@@ -27,7 +27,6 @@ The disableItem method can be used to handle dynamic changing in disable state o
 
 | Parameter | Type | Description |
 |------|------|------|
-| itemHTMLLIElement |  <code>HTMLLIElement</code> |  It accepts the HTML Li element of the item to be removed.  |
 | itemValue | <code>string</code> \| <code>number</code> \| <code>boolean</code> \| <code>object</code> | It accepts the string, number, boolean and object type value of the item to be removed. |
 | itemIndex | <code>number</code> | It accepts the index of the item to be removed. |
 

blazor/datepicker/code-snippet/InputFormat.razor

@@ -0,0 +1,9 @@
+
+@using Syncfusion.Blazor.Calendars
+
+<SfDatePicker TValue="DateTime?" Format="yyyy-MM-dd" InputFormats='new string[] { "dd/MM/yyyy", "MM-dd-yyyy", "yyyy/MM/dd" }' @bind-Value="@Value"></SfDatePicker>
+
+
+@code {
+    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+}

blazor/datepicker/date-format.md

@@ -9,13 +9,15 @@ documentation: ug
 
 #  Date Format in Blazor DatePicker Component
 
-The date format can be used to specify how the date value is displayed or entered in a `DatePicker` control
+## Display Format
+
+The display format can be used to specify how the date value is displayed or entered in a `DatePicker` control
 
 The string format of the date value specifies how the date value should be represented as a string. Different countries and regions have different conventions for representing the date value in a string format. In addition to representing the date value in different string formats, it is also possible to specify the order in which the day, month, and year values appear in the string. For example, the day/month/year format could be written as `28-12-2022` or `28.12.2022`
 
 By default, the DatePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property.
 
-> Once the date format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the date format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used.
+> Once the display format property has been defined, it will be applied consistently to all cultures, regardless of their conventions for representing the date value. In other words, the display format property serves as a standardized way of representing the date value, ensuring that it is displayed and entered consistently regardless of the culture or region in which the application is used.
 
 {% highlight Razor %}
 
@@ -24,5 +26,16 @@ By default, the DatePicker's format is based on the culture. You can also set th
 {% endhighlight %}
 
 
+![Date Format in Blazor DatePicker](./images/DatePicker.png)
+
+## Input Formats
+
+The input format can be used to specify how the date value is entered in a `DatePicker` control.
+
+The string format of the date value specifies how the date should be represented as a string when entered by the user. When the user types the date in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_InputFormats) property.
+
+{% highlight Razor %}
+
+{% include_relative code-snippet/InputFormat.razor %}
 
-![Date Format in Blazor DatePicker](./images/DatePicker.png)
+{% endhighlight %}

blazor/datetime-picker/code-snippet/InputFormat.razor

@@ -0,0 +1,9 @@
+
+@using Syncfusion.Blazor.Calendars
+
+<SfDateTimePicker TValue="DateTime?" Format="yyyy-MM-dd hh:mm:ss" InputFormats='new string[] { "dd/MM/yyyy hh:mm", "MM-dd-yyyy HH:mm", "yyyy/MM/dd hh mm tt" }' @bind-Value="@Value"></SfDateTimePicker>
+
+
+@code {
+    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
+}

blazor/datetime-picker/date-time-format.md

@@ -8,7 +8,9 @@ documentation: ug
 ---
 #  DateTime Format in Blazor DateTimePicker Component
 
-The date and time format can be used to specify how the date and time value is displayed or entered in a `DateTimePicker` control
+## Display Date and Time format
+
+The display date and time format can be used to specify how the date and time value is displayed or entered in a `DateTimePicker` control
 
 By default, the DateTimePicker's format is based on the culture. You can also set the own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property.
 
@@ -21,4 +23,16 @@ By default, the DateTimePicker's format is based on the culture. You can also se
 {% endhighlight %}
 
 
-![Date Time Format in Blazor DateTimePicker](./images/DateTimePicker.png)
+![Date Time Format in Blazor DateTimePicker](./images/DateTimePicker.png)
+
+## Input Formats
+
+The input format can be used to specify how the date and time value is entered in a `DateTimePicker` control.
+
+The string format of the date and time value specifies how the date and time should be represented as a string when entered by the user. When the user types the date and time in the input format, it will be automatically converted to the display format after pressing enter, tab key, or when the input loses focus. This enhances the user experience by allowing intuitive data entry through various custom input formats. You can also set your own [Custom Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [Standard Format](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) by using the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_InputFormats) property.
+
+{% highlight Razor %}
+
+{% include_relative code-snippet/InputFormat.razor %}
+
+{% endhighlight %}

blazor/datetime-picker/date-time-range.md

@@ -9,6 +9,8 @@ documentation: ug
 
 # DateTime Range in Blazor Datetime Picker Component
 
+## DateTime Restriction
+
 DateTimePicker provides an option to select a date and time value within a specified range by using the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Min) and [Max](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_Max) properties. The Min value must always be less than the Max value.
 
 The `Value` property depends on the Min/Max with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation.
@@ -47,4 +49,42 @@ When the Min and Max properties are configured and the selected datetime value i
 
 ![Blazor DateTimePicker displays Selected Date and Time](./images/blazor-datetimepicker-date-time-selection.png)
 
-N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range.
+N> If the value of `Min` or `Max` properties changed through code behind, you have to update the `Value` property to set within the range.
+
+## Time Restriction
+
+DateTimePicker provides an option to select a time value within a specified range by using the [MinTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MinTime) and [MaxTime](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_MaxTime) properties. The MinTime value must always be less than the MaxTime value.
+
+The `Value` property depends on the MinTime/MaxTime with respect to [StrictMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html#Syncfusion_Blazor_Calendars_SfDateTimePicker_1_StrictMode) property. For more information about StrictMode, refer to the [Strict Mode](./strict-mode) section from the documentation.
+
+The following code allows selecting a date within the range from 10:00 AM to 8:30 PM of each day.
+
+```cshtml
+@using Syncfusion.Blazor.Calendars
+
+<SfDateTimePicker TValue="DateTime?" MinTime='@MinTime' MaxTime='@MaxTime' Value='@DateTimeValue'></SfDateTimePicker>
+
+@code {
+    public DateTime DateTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 9, 11, 0, 0);
+    public DateTime MinTime { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 7, 10, 0, 0);
+    public DateTime MaxTime { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27, 20, 30, 0);
+}
+```
+
+![Time Selection in Blazor DateTimePicker](./images/blazor-datetimepicker-time-selection.png)
+
+When the MinTime and MaxTime properties are configured and the selected time value is out-of-range or invalid, then the model value will be set to `out of range` time value or `null` respectively with highlighted `error` class to indicate the time is out of range or invalid.
+
+```cshtml
+@using Syncfusion.Blazor.Calendars
+
+<SfDateTimePicker TValue="DateTime?" MinTime='@MinTime' MaxTime='@MaxTime' Value='@DateTimeValue'></SfDateTimePicker>
+
+@code {
+    public DateTime DateTimeValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 9, 11, 0, 0);
+    public DateTime MinTime { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 7, 10, 0, 0);
+    public DateTime MaxTime { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27, 20, 30, 0);
+}
+```
+
+![Blazor DateTimePicker displays Time Selection](./images/blazor-datetimepicker-time-validation.png)