Demonstration and configuration of the Radzen Blazor DatePicker component.
As all Radzen Blazor input components the DatePicker has a Value property which gets and sets the value of the component. Use @bind-Value
to get the user input.
# | Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|---|
9 | 25 | 26 | 27 | 28 | 29 | 1 | 2 |
10 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
11 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
13 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
14 | 31 | 1 | 2 | 3 | 4 | 5 | 6 |
Value property can be used to set the value of the component and Change
event to get the user input.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 31 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
The Radzen Blazor DatePicker has a parameter named ParseInput
which allows for a fully custom parse-method. This way you can accept inputs like '3012' or '30122023' and support more than one input-format. Click on the 'Edit Source' to see the implementation.
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
Value
property can be bound to values of type DateOnly
or TimeOnly
Sun | Mon | Tue | Wed | Thu | Fri | Sat |
---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 1 | 2 | 3 | 4 | 5 | 6 |
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DatePicker component.
Press this key | To do this |
---|---|
Tab | Navigate to a DatePicker component. |
Tab on open popup | Navigate forward across available picker components. |
Shift + Tab on open popup | Navigate backward across available picker components. |
Right Arrow on open popup | Select previous day. |
Left Arrow on open popup | Select next day. |
Up Arrow on open popup | Select same day from previous week. |
Down Arrow on open popup | Select same day from next week. |
Enter in an opened popup | Select the focused day and close the popup. |
Esc in an opened popup | Close the popup. |
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT
Premium Themes
Free Themes