983104: Updated

Author: Ashwini-SF5049

blazor/datepicker/data-binding.md

@@ -17,7 +17,9 @@ This section explains how to bind values to the DatePicker component in the foll
 
 ## One-way binding
 
-Bind a value to the DatePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but user edits do not update the source automatically.
+Bind a value to the DatePicker component using the `Value` property as shown in the following example. In one-way binding, pass the property or variable name prefixed with `@` (for example, `@DateValue`). Changes to the source update the UI, but edits in the UI do not update the source automatically.
+
+- API reference: [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Value)
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -27,7 +29,7 @@ Bind a value to the DatePicker component using the `Value` property as shown in
 <button @onclick="@UpdateValue">Update Value</button>
 
 @code {
-    public DateTime? DateValue {get;set;} = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
+    public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 28);
 
     public void UpdateValue()
     {
@@ -36,10 +38,18 @@ Bind a value to the DatePicker component using the `Value` property as shown in
 }
 ```
 
+Preview:
+- The DatePicker initially shows the 28th of the current month. Selecting the “Update Value” button sets the input to today’s date. Typing or selecting a date in the UI does not change the underlying DateValue field.
+
 ## Two-way data binding
 
 Two-way binding is achieved with the `@bind-Value` attribute. This binds the component’s value to the specified field and updates both the UI and the source when changes occur. Use a type that matches the component’s `TValue` (for example, `DateTime` or `DateTime?`). Clearing the input sets the value to `null` when using a nullable type. The `@bind-Value` syntax is shorthand for using the `Value`, `ValueChanged`, and `ValueExpression` parameters.
 
+- API references:
+  - [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Value)
+  - [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueChanged)
+  - [ValueExpression](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueExpression)
+
 ```cshtml
 @using Syncfusion.Blazor.Calendars
 
@@ -48,31 +58,37 @@ Two-way binding is achieved with the `@bind-Value` attribute. This binds the com
 <SfDatePicker TValue="DateTime?" @bind-Value="@DateValue"></SfDatePicker>
 
 @code {
-public DateTime? DateValue { get; set; } = DateTime.Now;
+    public DateTime? DateValue { get; set; } = DateTime.Now;
 }
 ```
 
+Preview:
+- The paragraph renders the current value from the bound field. Selecting a new date in the DatePicker updates the paragraph text immediately. Clearing the input results in a blank (null) display when using a nullable type.
+
 ## Dynamic value binding
 
-The value can be updated programmatically in response to component events (such as the DatePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically in most cases; `StateHasChanged()` is typically required only when changes originate outside the normal event pipeline (for example, from timers, external services, or non-UI threads). The following example shows updating the value in the DatePicker’s `ValueChange` event.
+The value can be updated programmatically in response to component events (such as the DatePicker’s `ValueChange`) or from external logic. When updating state within component event callbacks, the UI re-renders automatically.
+
+- API references:
+  - [ValueChange event](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_ValueChange)
+  - [ChangedEventArgs<TValue>](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.ChangedEventArgs-1.html)
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
 
 <p>DatePicker value is: @DateValue</p>
 
 <SfDatePicker TValue="DateTime?" Value="@DateValue">
-    <DatePickerEvents TValue="DateTime?" ValueChange="@onChange"></DatePickerEvents>
+    <DatePickerEvents TValue="DateTime?" ValueChange="@OnChange"></DatePickerEvents>
 </SfDatePicker>
 
 @code {
+    public DateTime? DateValue { get; set; } = DateTime.Now;
 
-public DateTime? DateValue { get; set; } = DateTime.Now;
-
-private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
+    private void OnChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> args)
     {
         DateValue = args.Value;
-        StateHasChanged();
+        // StateHasChanged() is not required here because event callbacks trigger re-rendering.
     }
 }
-```
+

blazor/datepicker/date-format.md

@@ -1,39 +1,64 @@
 ---
 layout: post
-title:  Date Format in Blazor DatePicker Component | Syncfusion
+title: Date Format in Blazor DatePicker Component | Syncfusion
 description: Checkout and learn here all about Date Format in Syncfusion Blazor DatePicker component and much more.
 platform: Blazor
 control: DatePicker
 documentation: ug
 ---
 
-#  Date Format in Blazor DatePicker Component
+# Date Format in Blazor DatePicker Component
+
+This article describes how to control the display and input formats in the Blazor DatePicker component using the Format and InputFormats properties, along with .NET standard and custom date-time format strings.
 
 ## Display Format
 
-The display format specifies how a date value is rendered in the DatePicker input. Use it to control the visual representation of the selected value (for example, dd-MM-yyyy, MM/dd/yyyy, or MMM dd, yyyy).
+The display format specifies how a date value is rendered in the DatePicker input. This controls the visual representation of the selected value (for example, dd-MM-yyyy, MM/dd/yyyy, or MMM dd, yyyy).
+
+By default, the DatePicker display format is based on the current culture. A custom or standard .NET date and time format string can be applied using the [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) options via the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property.
 
-By default, the DatePicker's display format is based on the current culture. A custom or standard .NET date and time format string can be applied using the [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) options via the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_Format) property.
+Note: When a display format is set, it consistently controls how the value is shown, regardless of culture-specific date order or separators. The underlying value type remains DateTime/DateTime?, and localized month/day names still follow the active culture where applicable.
 
-> When a display format is set, it consistently controls how the value is shown, regardless of culture-specific date order or separators. The underlying value type remains DateTime/DateTime?, and localized month/day names still follow the active culture where applicable.
+```cshtml
+@using Syncfusion.Blazor.Calendars
 
-{% highlight Razor %}
+<p>Selected date (display format): @DateValue</p>
 
-{% include_relative code-snippet/DatePicker.razor %}
+<SfDatePicker TValue="DateTime?"
+              Value="@DateValue"
+              Format="MMM dd, yyyy">
+</SfDatePicker>
 
-{% endhighlight %}
+@code {
+    public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 15);
+}
+```
 
+Preview:
+- The input renders the selected date in the form “Sep 15, 2025” (based on the chosen format), while the bound value remains a DateTime?.
 
 ![Date Format in Blazor DatePicker](./images/DatePicker.png)
 
 ## Input Formats
 
-The input format defines how users can type dates that will be parsed into a valid value in the DatePicker.
+The input format defines how typed dates are parsed into a valid DatePicker value. Typed input is interpreted according to the current culture and any configured input patterns. After input is confirmed (for example, by pressing Enter or Tab, or when the input loses focus), the value is reformatted using the display format.
+
+Multiple input patterns can be accepted by specifying [.NET custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) patterns in the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_InputFormats) property (for example, d-M-yy, d/M/yyyy, yyyy-MM-dd).
 
-Typed input is parsed according to the current culture and any formats specified. After the user confirms input (for example, by pressing Enter or Tab, or when the input loses focus), the value is reformatted and displayed using the configured display format. You can specify [.NET custom](https://learn.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) or [standard](https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) patterns in the [InputFormats](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_InputFormats) property to accept multiple input patterns (for example, d-M-yy, d/M/yyyy, yyyy-MM-dd).
+```cshtml
+@using Syncfusion.Blazor.Calendars
 
-{% highlight Razor %}
+<p>Selected date (input formats): @DateValue</p>
 
-{% include_relative code-snippet/InputFormat.razor %}
+<SfDatePicker TValue="DateTime?"
+              Value="@DateValue"
+              Format="dd-MM-yyyy"
+              InputFormats="@(new string[] { "d-M-yy", "d/M/yyyy", "yyyy-MM-dd" })">
+</SfDatePicker>
 
-{% endhighlight %}
+@code {
+    public DateTime? DateValue { get; set; } = DateTime.Today;
+}
+```
+Preview:
+- The input accepts dates typed as “1-9-25”, “01/09/2025”, or “2025-09-01”. After confirmation, the value is reformatted and displayed as “01-09-2025” according to the configured Format “dd-MM-yyyy”.

blazor/datepicker/dateonly-support.md

@@ -14,15 +14,42 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view
 > The Blazor DatePicker component supports the `DateOnly` type in .NET 7 and later. Although DateOnly was introduced in .NET 6, full support in Blazor requires .NET 7 due to serialization and model binding changes.
 
 Key points when using DateOnly:
-- Set the component’s TValue to `DateOnly` (or `DateOnly?` for nullable scenarios and clearing values).
+- Set the component’s `TValue` to `DateOnly` (or `DateOnly?` for nullable scenarios and clearing values).
 - Use `@bind-Value` for two-way binding with a DateOnly model property.
-- Ensure related properties (such as Min, Max, and Value) use compatible types when working with DateOnly.
+- Ensure related properties (such as `Min`, `Max`, and `Value`) use compatible types when working with DateOnly.
 - Formatting and parsing follow the current culture; DateOnly represents dates only and does not include time.
 
-{% highlight Razor %}
+```cshtml
+@using Syncfusion.Blazor.Calendars
 
-{% include_relative code-snippet/DateOnly.razor %}
+<p>Selected date: @DateValue</p>
 
-{% endhighlight %}
+<SfDatePicker TValue="DateOnly?"
+              @bind-Value="DateValue"
+              Format="yyyy-MM-dd"
+              Min="@MonthStart"
+              Max="@MonthEnd">
+</SfDatePicker>
 
-![Blazor DatePicker with DateOnly](./images/DatePickerDateOnly.gif)
+@code {
+    // Initial value
+    public DateOnly? DateValue { get; set; } =
+        new DateOnly(DateTime.Now.Year, DateTime.Now.Month, 15);
+
+    // Range compatible with DateOnly
+    public DateOnly MonthStart { get; set; } =
+        new DateOnly(DateTime.Now.Year, DateTime.Now.Month, 1);
+
+    public DateOnly MonthEnd { get; set; } =
+        new DateOnly(
+            DateTime.Now.Year,
+            DateTime.Now.Month,
+            DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month)
+        );
+}
+```
+
+Preview:
+- The DatePicker binds to a `DateOnly?` model, displays the value using the `yyyy-MM-dd` format, and restricts selection to the current month via `Min`/`Max`.
+
+![Blazor DatePicker with DateOnly](./images/DatePickerDateOnly.gif)