You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/datepicker/accessibility.md
+19-21Lines changed: 19 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor DatePicker Component
11
11
12
-
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.
12
+
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.
13
13
14
-
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.
14
+
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.
15
15
16
16
The accessibility compliance for the Blazor DatePicker component is outlined below.
17
17
@@ -20,7 +20,7 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
@@ -40,27 +40,25 @@ The accessibility compliance for the Blazor DatePicker component is outlined bel
40
40
41
41
## WAI-ARIA attributes
42
42
43
-
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.
43
+
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.
44
44
45
-
To learn more about the accessibility of Calendar, refer to the Calendar's[Accessibility](../calendar/accessibility) section.
45
+
To learn more about the accessibility of the Calendar component, refer to the Calendar [Accessibility](../calendar/accessibility) section.
46
46
47
-
It provides information about the widget for assistive technology to the disabled person in screen reader.
47
+
These attributes expose the component’s state and behavior to assistive technologies used by people who rely on screen readers.
48
48
49
-
***aria-expanded**: Attribute indicates the state of a collapsible element.
50
-
51
-
***aria-disabled**: Attribute indicates the disabled state of this DatePicker component.
52
-
53
-
***aria-activedescendent**: Attribute helps in managing the current active child of the DatePicker component.
49
+
***aria-expanded**: Indicates the expanded or collapsed state of the popup element.
50
+
***aria-disabled**: Indicates the disabled state of the DatePicker component.
51
+
***aria-activedescendant**: Identifies the currently active child element within the DatePicker popup.
54
52
55
53
## Keyboard interaction
56
54
57
-
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/).
55
+
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/).
58
56
59
57
It supports the following list of shortcut keys:
60
58
61
59
### Input navigation
62
60
63
-
Before opening the pop-up, use the following list of keys to control the pop-up element:
61
+
Before opening the popup, use the following keys to control the popup element:
64
62
65
63
| Windows | Mac | Description |
66
64
| --- | --- | --- |
@@ -70,7 +68,7 @@ Before opening the pop-up, use the following list of keys to control the pop-up
70
68
71
69
### Calendar navigation
72
70
73
-
Use the following list of keys to navigate the Calendar after the pop-up has been opened:
71
+
Use the following keys to navigate the calendar after the popup has been opened:
74
72
75
73
| Windows | Mac | Description |
76
74
| --- | --- | --- |
@@ -84,13 +82,13 @@ Use the following list of keys to navigate the Calendar after the pop-up has bee
84
82
| <kbd>Page Down</kbd> | <kbd>Page Down</kbd> | Focuses the same date in the next month. |
85
83
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the currently focused date. |
86
84
| <kbd>Shift</kbd> + <kbd>Page Up</kbd> | <kbd>⇧</kbd> + <kbd>Page Up</kbd> | Focuses the same date in the previous year. |
87
-
| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the previous year. |
88
-
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves into the inner level of view like month-year and year-decade |
89
-
| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves out from the depth level view like decade-year and year-month |
90
-
| <kbd>Control</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> | Focuses the starting date in the current year. |
85
+
| <kbd>Shift</kbd> + <kbd>Page Down</kbd> | <kbd>⇧</kbd> + <kbd>Page Down</kbd> | Focuses the same date in the next year. |
86
+
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> | Moves to a higher-level view (month to year, year to decade).|
87
+
| <kbd>Ctrl</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↓</kbd> | Moves to a lower-level view (decade to year, year to month).|
88
+
| <kbd>Ctrl</kbd> + <kbd>Home</kbd> | <kbd>⌘</kbd> + <kbd>Home</kbd> | Focuses the starting date in the current year. |
91
89
| <kbd>Ctrl</kbd> + <kbd>End</kbd> | <kbd>⌘</kbd> + <kbd>End</kbd> | Focuses the ending date in the current year. |
92
90
93
-
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.
91
+
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).
94
92
95
93
```cshtml
96
94
@using Syncfusion.Blazor.Calendars
@@ -110,9 +108,9 @@ N> To focus out the DatePicker component, use the `t` keys. For additional infor
110
108
```
111
109
## Ensuring accessibility
112
110
113
-
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.
111
+
The Blazor DatePicker component's accessibility levels are validated using the[axe-core](https://www.npmjs.com/package/axe-core) tool during automated testing.
114
112
115
-
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.
113
+
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.
Copy file name to clipboardExpand all lines: blazor/datepicker/data-binding.md
+6-8Lines changed: 6 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,23 +1,23 @@
1
1
---
2
2
layout: post
3
3
title: Data Binding in Blazor DatePicker Component | Syncfusion
4
-
description: Checkout and learn here all about Data Binding in Syncfusion Blazor DatePicker component and much more.
4
+
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.
5
5
platform: Blazor
6
6
control: DatePicker
7
7
documentation: ug
8
8
---
9
9
10
10
# Data Binding in Blazor DatePicker Component
11
11
12
-
This section briefly explains how to bind the value to the DatePicker component in the below different ways.
12
+
This section explains how to bind values to the DatePicker component in the following ways.
13
13
14
14
* One-Way Data Binding
15
15
* Two-Way Data Binding
16
16
* Dynamic Value Binding
17
17
18
18
## One-way binding
19
19
20
-
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").
20
+
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.
21
21
22
22
```cshtml
23
23
@using Syncfusion.Blazor.Calendars
@@ -38,7 +38,7 @@ You can bind the value to the DatePicker component directly for `Value` property
38
38
39
39
## Two-way data binding
40
40
41
-
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.
41
+
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.
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.
58
-
59
-
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.
57
+
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.
60
58
61
59
```cshtml
62
60
@using Syncfusion.Blazor.Calendars
@@ -77,4 +75,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs<DateTime?> ar
Copy file name to clipboardExpand all lines: blazor/datepicker/date-format.md
+6-8Lines changed: 6 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
layout: post
3
3
title: Date Format in Blazor DatePicker Component | Syncfusion
4
-
description: Checkout and learn here all about Date Format in Syncfusion Blazor DatePicker component and much more.
4
+
description: Learn how to control display and input date formats in the Syncfusion Blazor DatePicker using .NET standard and custom format strings with culture-aware parsing.
5
5
platform: Blazor
6
6
control: DatePicker
7
7
documentation: ug
@@ -11,13 +11,11 @@ documentation: ug
11
11
12
12
## Display Format
13
13
14
-
The display format can be used to specify how the date value is displayed or entered in a `DatePicker` control
14
+
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).
15
15
16
-
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`
16
+
By default, the DatePicker's display format is based on the current culture. A custom or standard .NET date and time formatstring 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.
17
17
18
-
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.
19
-
20
-
> 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.
18
+
> 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.
21
19
22
20
{% highlight Razor %}
23
21
@@ -30,9 +28,9 @@ By default, the DatePicker's format is based on the culture. You can also set th
30
28
31
29
## Input Formats
32
30
33
-
The input format can be used to specify how the date value is entered in a `DatePicker` control.
31
+
The input format defines how users can type dates that will be parsed into a valid value in the DatePicker.
34
32
35
-
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.
33
+
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).
0 commit comments