Skip to content

Commit 6ab4c93

Browse files
MuniappanSubramanianMuniappanSubramanian
authored
Merge pull request #296 from syncfusion-content/Picker_UG_Dev
955640-Added UG For Picker, Date Picker, Time Picker and Date Time Picker Control
2 parents 7828133 + d0cffab commit 6ab4c93

File tree

243 files changed

+8045
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

243 files changed

+8045
-1
lines changed

‎maui-toolkit-toc.html‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
</ul>
210210
</li>
211211
<li>
212-
SfCircularProgressBar
212+
SfCircularProgressBar
213213
<ul>
214214
<li><a href="/maui-toolkit/CircularProgressBar/overview">Overview</a></li>
215215
<li><a href="/maui-toolkit/CircularProgressBar/getting-started">Getting Started</a></li>
@@ -222,6 +222,38 @@
222222
<li><a href="/maui-toolkit/CircularProgressBar/events">Events</a></li>
223223
</ul>
224224
</li>
225+
<li>
226+
SfDatePicker
227+
<ul>
228+
<li><a href="/maui/DatePicker/overview">Overview</a></li>
229+
<li><a href="/maui/DatePicker/getting-started">Getting Started</a></li>
230+
<li><a href="/maui/DatePicker/formatting">Formatting</a></li>
231+
<li><a href="/maui/DatePicker/date-picker-mode">DatePicker Mode</a></li>
232+
<li><a href="/maui/DatePicker/date-picker-text-display-mode">Text Display Mode</a></li>
233+
<li><a href="/maui/DatePicker/date-restriction">Date Restriction</a></li>
234+
<li><a href="/maui/DatePicker/date-interval">Date Interval</a></li>
235+
<li><a href="/maui/DatePicker/customizations">Customizations</a></li>
236+
<li><a href="/maui/DatePicker/events">Events and Commands</a></li>
237+
<li><a href="/maui/DatePicker/localization">Localization</a></li>
238+
<li><a href="/maui/DatePicker/accessibility">Accessibility</a></li>
239+
</ul>
240+
</li>
241+
<li>
242+
SfDateTimePicker
243+
<ul>
244+
<li><a href="/maui/DateTimePicker/overview">Overview</a></li>
245+
<li><a href="/maui/DateTimePicker/getting-started">Getting Started</a></li>
246+
<li><a href="/maui/DateTimePicker/formatting">Formatting</a></li>
247+
<li><a href="/maui/DateTimePicker/date-time-picker-text-display-mode">Text Display Mode</a></li>
248+
<li><a href="/maui/DateTimePicker/date-time-picker-mode">Picker Modes</a></li>
249+
<li><a href="/maui/DateTimePicker/date-restriction">Date Restriction</a></li>
250+
<li><a href="/maui/DateTimePicker/intervals">Intervals</a></li>
251+
<li><a href="/maui/DateTimePicker/customizations">Customizations</a></li>
252+
<li><a href="/maui/DateTimePicker/events">Events and Commands</a></li>
253+
<li><a href="/maui/DateTimePicker/localization">Localization</a></li>
254+
<li><a href="/maui/DateTimePicker/accessibility">Accessibility</a></li>
255+
</ul>
256+
</li>
225257
<li>
226258
SfEffectsView
227259
<ul>
@@ -330,6 +362,23 @@
330362
<li><a href="/maui-toolkit/Otp-Input/Accessibility">Accessibility</a></li>
331363
</ul>
332364
</li>
365+
<li>
366+
SfPicker
367+
<ul>
368+
<li><a href="/maui/Picker/overview">Overview</a></li>
369+
<li><a href="/maui/Picker/getting-started">Getting Started</a></li>
370+
<li><a href="/maui/Picker/populating-items">PopulatingItems</a></li>
371+
<li><a href="/maui/Picker/data-template-selector">DataTemplateSelector</a></li>
372+
<li><a href="/maui/Picker/events">Events and Commands</a></li>
373+
<li><a href="/maui/Picker/picker-mode">Picker Mode</a></li>
374+
<li><a href="/maui/Picker/picker-text-display-mode">Text Display Mode</a></li>
375+
<li><a href="/maui/Picker/dealing-with-header-footer-and-selection-view">Dealing with Header, Footer and Selection view</a></li>
376+
<li><a href="/maui/Picker/dealing-with-column-header">Dealing with ColumnHeader</a></li>
377+
<li><a href="/maui/Picker/dealing-with-columns">Dealing with Columns</a></li>
378+
<li><a href="/maui/Picker/localization">Localization</a></li>
379+
<li><a href="/maui/Picker/accessibility">Accessibility</a></li>
380+
</ul>
381+
</li>
333382
<li>
334383
SfPolarChart
335384
<ul>
@@ -459,6 +508,22 @@
459508
<li><a href="/maui-toolkit/TextInputLayout/How-To">How to</a></li>
460509
</ul>
461510
</li>
511+
<li>
512+
SfTimePicker
513+
<ul>
514+
<li><a href="/maui/TimePicker/overview">Overview</a></li>
515+
<li><a href="/maui/TimePicker/getting-started">Getting Started</a></li>
516+
<li><a href="/maui/TimePicker/formatting">Formatting</a></li>
517+
<li><a href="/maui/TimePicker/time-picker-text-display-mode">Text Display Mode</a></li>
518+
<li><a href="/maui/TimePicker/time-restriction">Time Restriction</a></li>
519+
<li><a href="/maui/TimePicker/time-picker-mode">TimePicker Mode</a></li>
520+
<li><a href="/maui/TimePicker/time-interval">Time Interval</a></li>
521+
<li><a href="/maui/TimePicker/customizations">Customizations</a></li>
522+
<li><a href="/maui/TimePicker/events">Events and Commands</a></li>
523+
<li><a href="/maui/TimePicker/localization">Localization</a></li>
524+
<li><a href="/maui/TimePicker/accessibility">Accessibility</a></li>
525+
</ul>
526+
</li>
462527
<li>
463528
Release Notes
464529
<ul>

‎maui-toolkit/DatePicker/accessibility.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
layout: post
3+
title: Accessibility with .NET MAUI Date Picker Control | Syncfusion<sup>&reg;</sup>
4+
description: Learn here about accessibility with Syncfusion<sup>&reg;</sup> .NET MAUI Date Picker (SfDatePicker) control.
5+
platform: maui
6+
control: SfDatePicker
7+
documentation: ug
8+
---
9+
10+
# Accessibility in .NET MAUI Date Picker (SfDatePicker)
11+
12+
The [.NET MAUI Date Picker](https://www.syncfusion.com/maui-controls/maui-datepicker) control has interact with the `Header`, `Column Header`, `Footer`, and `Picker Items`.
13+
14+
## Header Layout
15+
16+
The SfDatePicker control has interact [Header Text](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.PickerHeaderView.html#Syncfusion_Maui_Toolkit_Picker_PickerHeaderView_Text) with localization of header layout.
17+
18+
![Header Layout in .NET MAUI Date Picker.](images/accessibility/maui-accessibility-datepicker-header.png)
19+
20+
## Column Header Layout
21+
22+
The SfDatePicker control has interact column header text with localization of column header layout. It contains [DayHeaderText](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.DatePickerColumnHeaderView.html#Syncfusion_Maui_Toolkit_Picker_DatePickerColumnHeaderView_DayHeaderText), [MonthHeaderText](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.DatePickerColumnHeaderView.html#Syncfusion_Maui_Toolkit_Picker_DatePickerColumnHeaderView_MonthHeaderText), and [YearHeaderText](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.DatePickerColumnHeaderView.html#Syncfusion_Maui_Toolkit_Picker_DatePickerColumnHeaderView_YearHeaderText) properties of the [DatePickerColumnHeaderView](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.DatePickerColumnHeaderView.html). The default value of the `DayHeaderText` property is "Day", `MonthHeaderText` is "Month", and `YearHeaderText` is "Year".
23+
24+
![Column Header Layout in .NET MAUI Date Picker.](images/accessibility/maui-accessibility-datepicker-columnheader.png)
25+
26+
## Footer Layout
27+
28+
The SfDatePicker control has interact validation buttons (OK and Cancel) with localization of footer layout. The Default value of the [OkButtonText](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.PickerFooterView.html#Syncfusion_Maui_Toolkit_Picker_PickerFooterView_OkButtonText) property is "OK", and [CancelButtonText](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.PickerFooterView.html#Syncfusion_Maui_Toolkit_Picker_PickerFooterView_CancelButtonText) is "Cancel".
29+
30+
![Footer Layout in .NET MAUI Date Picker.](images/accessibility/maui-accessibility-datepicker-footer.png)
31+
32+
## Picker Items
33+
34+
The SfDatePicker control has interact with the item source in picker items. The item source contains based on the [Date Format](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Picker.PickerDateFormat.html). For example,
35+
36+
<table>
37+
<tr>
38+
<th>Format</th>
39+
<th>Example</th></tr>
40+
<tr>
41+
<td>d, M</td>
42+
<td>1</td>
43+
</tr>
44+
<tr>
45+
<td>dd, MM</td>
46+
<td>01</td>
47+
</tr>
48+
<tr>
49+
<td>MMM</td>
50+
<td>January</td>
51+
</tr>
52+
<tr>
53+
<td>yyyy</td>
54+
<td>2023</td>
55+
</tr>
56+
</table>
57+
58+
![Picker Items in .NET MAUI Date Picker.](images/accessibility/maui-accessibility-datepicker-datepickeritems.png)
59+
60+
## Keyboard
61+
`SfDatePicker` supports selection using keyboard interactions.
62+
63+
<table>
64+
<tr>
65+
<th>
66+
Key
67+
</th>
68+
<th>
69+
Description
70+
</th>
71+
</tr>
72+
<tr>
73+
<td>
74+
Tab
75+
</td>
76+
<td>
77+
Focus the picker.
78+
</td>
79+
</tr>
80+
<tr>
81+
<td>
82+
Enter
83+
</td>
84+
<td>
85+
Opens the selected picker.
86+
</td>
87+
</tr>
88+
<tr>
89+
<td>
90+
DownArrow
91+
</td>
92+
<td>
93+
Selects an item from the currently expanded list by moving downwards.
94+
</td>
95+
</tr>
96+
<tr>
97+
<td>
98+
UpArrow
99+
</td>
100+
<td>
101+
Selects an item from the currently expanded list by moving upwards.
102+
</td>
103+
</tr>
104+
<tr>
105+
<td>
106+
RightArrow/Tab
107+
</td>
108+
<td>
109+
Navigates through the selected item in the right direction.
110+
</td>
111+
</tr>
112+
<tr>
113+
<td>
114+
LeftArrow/Shift+Tab
115+
</td>
116+
<td>
117+
Navigates through the selected item in the left direction.
118+
</td>
119+
</tr>
120+
<tr>
121+
<td>
122+
Esc/Enter
123+
</td>
124+
<td>
125+
Exit and commit selection.
126+
</td>
127+
</tr>
128+
</table>

0 commit comments

Comments
 (0)