983104: Updated the UG Documentation for the Datepicker,DateRangepicker

blazor/datepicker/accessibility.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor DatePicker Component
 
-The web accessibility defines a way to make web content and web applications more accessible to disabled people. It especially helps the dynamic content change and advanced user interface components developed with Ajax, HTML, JavaScript, and related technologies.
+Web accessibility ensures that web content and applications are usable by people with disabilities. This is especially important for dynamic content and advanced UI components built with Ajax, HTML, and JavaScript.
 
-The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The [Blazor DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility.
 
 The accessibility compliance for the Blazor DatePicker component is outlined below.
 
@@ -20,7 +20,7 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
 | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
 | [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
 | [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Right-to-left (RTL) support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
@@ -40,27 +40,25 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
 
 ## WAI-ARIA attributes
 
-The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. WAI-ARIA supports can be achieved through the attributes like `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input element.
+The Blazor DatePicker provides built-in compliance with the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) specifications. Compliance is achieved through ARIA attributes such as `aria-expanded`, `aria-disabled`, and `aria-activedescendant` applied to the input, toggle button, and popup elements to convey state and relationships to assistive technologies.
 
-To learn more about the accessibility of Calendar, refer to the Calendar's [Accessibility](../calendar/accessibility) section.
+To learn more about the accessibility of the Calendar component, refer to the Calendar [Accessibility](../calendar/accessibility) section.
 
-It provides information about the widget for assistive technology to the disabled person in screen reader.
+These attributes expose the component’s state and behavior to assistive technologies used by people who rely on screen readers.
 
-* **aria-expanded**: Attribute indicates the state of a collapsible element.
-
-* **aria-disabled**: Attribute indicates the disabled state of this DatePicker component.
-
-* **aria-activedescendent**: Attribute helps in managing the current active child of the DatePicker component.
+* **aria-expanded**: Indicates the expanded or collapsed state of the popup element.
+* **aria-disabled**: Indicates the disabled state of the DatePicker component.
+* **aria-activedescendant**: Identifies the currently active child element within the DatePicker popup.
 
 ## Keyboard interaction
 
-You can use the following keys to interact with the Blazor DatePicker. The component implements the keyboard navigation support by following the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
+Use the following keys to interact with the Blazor DatePicker. The component implements keyboard navigation support in line with the [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/).
 
 It supports the following list of shortcut keys:
 
 ### Input navigation
 
-Before opening the pop-up, use the following list of keys to control the pop-up element:
+Before opening the popup, use the following keys to control the popup element:
 
 | Windows | Mac | Description |
 | --- | --- | --- |
@@ -70,7 +68,7 @@ Before opening the pop-up, use the following list of keys to control the pop-up
 
 ### Calendar navigation
 
-Use the following list of keys to navigate the Calendar after the pop-up has been opened:
+Use the following keys to navigate the calendar after the popup has been opened:
 
 | Windows | Mac | Description |
 | --- | --- | --- |
@@ -84,13 +82,13 @@ Use the following list of keys to navigate the Calendar after the pop-up has bee
 | <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Focuses the same date in the next month. |
 | <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused date. |
 | <kbd>Shift</kbd> + <kbd>Page Up</kbd> | <kbd>⇧</kbd> + <kbd>Page Up</kbd> | Focuses the same date in the previous year. |
-| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the previous year. |
-| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves into the inner level of view like month-year and year-decade |
-| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves out from the depth level view like decade-year and year-month |
-| <kbd>Control</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> | Focuses the starting date in the current year. |
+| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the next year. |
+| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves to a higher-level view (month to year, year to decade). |
+| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves to a lower-level view (decade to year, year to month). |
+| <kbd>Ctrl</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Focuses the starting date in the current year. |
 | <kbd>Ctrl</kbd> + <kbd>End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Focuses the ending date in the current year. |
 
-N> To focus out the DatePicker component, use the `t` keys. For additional information about native event, [click](https://blazor.syncfusion.com/documentation/datepicker/native-events) here.
+N> To move focus out of the DatePicker component, press the `t` key. For details about handling native events in DatePicker, see [Native events in DatePicker](https://blazor.syncfusion.com/documentation/datepicker/native-events).
 
 ```cshtml
 @using Syncfusion.Blazor.Calendars
@@ -110,9 +108,9 @@ N> To focus out the DatePicker component, use the `t` keys. For additional infor
 ```
 ## Ensuring accessibility
 
-The Blazor DatePicker component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor DatePicker component's accessibility levels are validated using the [axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
 
-The accessibility compliance of the DatePicker component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the accessibility of the DatePicker component with accessibility tools.
+The accessibility compliance of the DatePicker component is demonstrated in the following sample. Open the [DatePicker accessibility sample](https://blazor.syncfusion.com/accessibility/datepicker) in a new window to evaluate the component with accessibility tools.
 
 ## See also
 

blazor/datepicker/data-binding.md

@@ -1,23 +1,25 @@
 ---
 layout: post
 title: Data Binding in Blazor DatePicker Component | Syncfusion
-description: Checkout and learn here all about Data Binding in Syncfusion Blazor DatePicker component and much more.
+description: Learn how to bind values to the Syncfusion Blazor DatePicker using one-way binding, two-way binding with @bind-Value, and dynamic value updates.
 platform: Blazor
 control: DatePicker
 documentation: ug
 ---
 
 # Data Binding in Blazor DatePicker Component
 
-This section briefly explains how to bind the value to the DatePicker component in the below different ways.
+This section explains how to bind values to the DatePicker component in the following ways.
 
 * One-Way Data Binding
 * Two-Way Data Binding
 * Dynamic Value Binding
 
 ## One-way binding
 
-You can bind the value to the DatePicker component directly for `Value` property as mentioned in the following code example. In one-way binding, you need to pass property or variable name along with `@` (For Ex: "@DateValue").
+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 @@ You can bind the value to the DatePicker component directly for `Value` property
 <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,9 +38,17 @@ You can bind the value to the DatePicker component directly for `Value` property
 }
 ```
 
+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 can be achieved by using `bind-Value` attribute, which supports string, int, Enum, DateTime, bool types. If the component value has been changed, it will affect all places where the variable is bound for the **bind-value** attribute.
+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,33 +58,37 @@ Two-way binding can be achieved by using `bind-Value` attribute, which supports
 <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
 
-You can change the property value dynamically by manually calling the `StateHasChanged()` method inside public event of **Blazor DatePicker component** only. This method notifies the component that its state has changed and queues a re-render.
+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.
 
-There is no need to call this method for native events since it’s called after any lifecycle method has been called and can also be invoked manually to trigger a re-render. Refer the below mentioned code example.
+- 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.
     }
 }
-```
+