Skip to content

Commit 456075b

Browse files
marin-bratanovmarin-bratanov
committed
docs(dateInput): supported formats v1
1 parent cb2cb30 commit 456075b

File tree

4 files changed

+186
-4
lines changed

4 files changed

+186
-4
lines changed

‎components/dateinput/images/custom-date-formats-overview.png‎

19.8 KB
Loading

‎components/dateinput/overview.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ The date input provides the following features:
3636

3737
* `Class` - the CSS class that will be rendered on the `input` element.
3838
* `Enabled` - whether the `input` is enabled.
39-
* `Format` - the date format that the user input must match.
39+
* `Format` - the date format that the user input must match. Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article.
4040
* `ParsingErrorMessage` - a hint that is displayed to the user through validation when their input cannot be parsed in the required format
4141
* `Value` - get/set the value of the input, can be used for binding.
4242
* `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
@@ -75,4 +75,6 @@ The date input provides the following features:
7575
## See Also
7676

7777
* [Live Demo: Date Input](https://demos.telerik.com/blazor-ui/dateinput/index)
78-
* [Input Validation]({%slug common-features/input-validation%})
78+
* [Input Validation]({%slug common-features/input-validation%})
79+
* [Supported Date Formats]({%slug components/dateinput/supported-formats%})
80+

‎components/dateinput/supported-formats.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: Supported Formats
3+
page_title: DateInput for Blazor | Supported Formats
4+
description: Supported date adn time formats in the DateInput for Blazor
5+
slug: components/dateinput/supported-formats
6+
tags: telerik,blazor,DateInput,format,formats
7+
published: true
8+
position: 5
9+
---
10+
11+
# Supported Date Formats
12+
13+
This article explains the format strings and specifiers supported by the Telerik DateInput for Blazor.
14+
15+
The `Format` property can take a number of possible format strings, and this is a list of the supported options and their effects.
16+
17+
<!-- ## Custom Formats -->
18+
19+
The .NET framework supports a list of format specifiers for dates that you can use to build your own format strings: [https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings). The Telerik Date Input steps on them and carries over as many as possible to the client-side to validate and facilitate user input.
20+
21+
>caption Using supported .NET format specifiers to define date format in the Telerik Date Input
22+
23+
24+
````CSHTML
25+
@using Telerik.Blazor.Components.DateInput
26+
27+
<TelerikDateInput @bind-Value="TheDate" Format="d/M/y" /> @TheDate.ToString("d/M/y")
28+
<br />
29+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MM/yy" /> @TheDate.ToString("dd/MM/yy")
30+
<br />
31+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy" /> @TheDate.ToString("dd/MMM/yyyy")
32+
<br />
33+
<TelerikDateInput @bind-Value="TheDate" Format="HH:mm:ss" /> @TheDate.ToString("HH:mm:ss")
34+
<br />
35+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy H:mm:ss" /> @TheDate.ToString("dd/MMM/yyyy H:mm:ss")
36+
<br />
37+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMMM/yyyy HH:mm:ss" /> @TheDate.ToString("dd/MMMM/yyyy HH:mm:ss")
38+
<br />
39+
<TelerikDateInput @bind-Value="TheDate" Format="'dd/mm/yyyy date:' dd/MM/yyyy" /> @TheDate.ToString("'dd/mm/yyyy date:' dd/MM/yyyy")
40+
<br />
41+
<TelerikDateInput @bind-Value="TheDate" Format="dd-MM-yyyy" /> @TheDate.ToString("dd-MM-yyyy")
42+
<br />
43+
<TelerikDateInput @bind-Value="TheDate" Format="dd.MMM.yyyy" /> @TheDate.ToString("dd.MMM.yyyy")
44+
<br />
45+
46+
@TheDate
47+
48+
@code {
49+
DateTime TheDate { get; set; } = new DateTime(2019, 11, 27, 02, 03, 44);
50+
}
51+
````
52+
53+
>caption The result from the code snippet above
54+
55+
![](images/custom-date-formats-overview.png)
56+
57+
>caption Unsupported .NET format specifiers
58+
59+
* `m` - single digit minutes without leading zero
60+
* `t` and `tt` - AM/PM indicators
61+
* `g`, `gg` - epoch indicators
62+
* `ddd`, `dddd` - day of the week names
63+
* `z`, `zz`, `zzz` - UTC offsets
64+
* `K` - kind
65+
66+
<!-- `t` and `tt` -makes h and hh useless even though they would maybe work -->
67+
<!-- `g`, `gg` - maybe should never be supported, since it may not be editable -->
68+
<!-- `K` - not tested until localization arrives, maybe should never be supported since it is not really an editable portion -->
69+
<!-- `f` through `ffffff` and `F` through `FFFFFF` have not been tested as they are too granular for the current feature set of the components -->
70+
71+
72+
<!--
73+
74+
>caption Most of the available custom format strings in .NET are used in the examples below
75+
76+
unsupported ATM:
77+
78+
m - single digit minutes
79+
t and tt - AM/PM indicators -makes h and hh useless even though they would maybe work
80+
g, gg - epoch indicators - maybe never, since it may not be editable
81+
ddd, dddd - day names
82+
z, zz, zzz - UTC offsets
83+
K - kind - not tested until localization arrives, maybe never will be supported since it is not really an editable portion
84+
85+
86+
87+
````CSHTML
88+
@using Telerik.Blazor.Components.DateInput
89+
90+
<TelerikDateInput @bind-Value="TheDate" Format="d/M/y h:m:s tt" />
91+
@TheDate.ToString("d/M/y h:m:s")
92+
<br />
93+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MM/yy hh:mm:ss" />
94+
@TheDate.ToString("dd/MM/yy hh:mm:ss")
95+
<br />
96+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy H:m:ss g" />
97+
@TheDate.ToString("dd/MMM/yyyy H:M:ss g")
98+
<br />
99+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMMM/yyyy HH:mm:ss" />
100+
@TheDate.ToString("dd/MMMM/yyyy HH:MM:ss")
101+
<br />
102+
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy H:m:ss z" />
103+
@TheDate.ToString("dd/MMM/yyyy H:M:ss z")
104+
<br />
105+
<TelerikDateInput @bind-Value="TheDate" Format="'enter dd/mm/yyyy date:' dd/MM/yyyy" />
106+
@TheDate.ToString("'enter dd/mm/yyy date:' dd/MM/yyyy")
107+
<br />
108+
109+
@TheDate
110+
111+
@code {
112+
DateTime TheDate { get; set; } = new DateTime(2019, 11, 27, 22, 03, 44);
113+
}
114+
````
115+
116+
>caption The result from the snippet above
117+
118+
-->
119+
120+
121+
<!-- ## Standard Formats -->
122+
123+
The .NET framework also has a list of standard formats for dates: [https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings). They are **not** supported with the Telerik Date Input for Blazor at this point.
124+
125+
>caution While the results of unsupported format specifiers values will render correctly, editing is impossible because their formats are only implemented on the server (in .NET) and do not have equivalents in our JS Interop which is requires for the end user experience.
126+
127+
<!--
128+
129+
````CSHTML
130+
@using Telerik.Blazor.Components.DateInput
131+
132+
<TelerikDateInput @bind-Value="TheDate" Format="d" />@TheDate.ToString("d")
133+
<br />
134+
<TelerikDateInput @bind-Value="TheDate" Format="D" />@TheDate.ToString("D")
135+
<br />
136+
<TelerikDateInput @bind-Value="TheDate" Format="f" />@TheDate.ToString("f")
137+
<br />
138+
<TelerikDateInput @bind-Value="TheDate" Format="F" />@TheDate.ToString("F")
139+
<br />
140+
<TelerikDateInput @bind-Value="TheDate" Format="g" />@TheDate.ToString("g")
141+
<br />
142+
<TelerikDateInput @bind-Value="TheDate" Format="G" />@TheDate.ToString("G")
143+
<br />
144+
<TelerikDateInput @bind-Value="TheDate" Format="m" />@TheDate.ToString("m")
145+
<br />
146+
<TelerikDateInput @bind-Value="TheDate" Format="M" />@TheDate.ToString("M")
147+
<br />
148+
@*the 'o' and 'O' are related to time zones and kinds whose implementation is still unclear in Blazor, so they are omitted from this list*@
149+
<TelerikDateInput @bind-Value="TheDate" Format="r" />@TheDate.ToString("r")
150+
<br />
151+
<TelerikDateInput @bind-Value="TheDate" Format="R" />@TheDate.ToString("R")
152+
<br />
153+
<TelerikDateInput @bind-Value="TheDate" Format="s" />@TheDate.ToString("s")
154+
<br />
155+
<TelerikDateInput @bind-Value="TheDate" Format="t" />@TheDate.ToString("t")
156+
<br />
157+
<TelerikDateInput @bind-Value="TheDate" Format="T" />@TheDate.ToString("T")
158+
<br />
159+
<TelerikDateInput @bind-Value="TheDate" Format="u" />@TheDate.ToString("u")
160+
<br />
161+
<TelerikDateInput @bind-Value="TheDate" Format="U" />@TheDate.ToString("U")
162+
<br />
163+
<TelerikDateInput @bind-Value="TheDate" Format="y" />@TheDate.ToString("y")
164+
<br />
165+
<TelerikDateInput @bind-Value="TheDate" Format="Y" />@TheDate.ToString("Y")
166+
<br />
167+
168+
@TheDate
169+
170+
@code {
171+
DateTime TheDate { get; set; } = new DateTime(2019, 4, 27, 22, 03, 44);
172+
}
173+
````
174+
175+
-->
176+
177+
## See Also
178+
179+
* [DateInput Overview]({%slug components/dateinput/overview%})

‎components/datepicker/overview.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ The Date Picker component exposes the following features:
4141
* `DisabledDates` - Specifies a list of dates that can not be selected.
4242
* `Enabled` - Specifies whether typing in the input is allowed.
4343
* `Height` - Defines the height of the DatePicker. Defaults to `28px`. See the [Dimensions]({%slug common-features/dimensions%}) article.
44-
* `Format` - Specifies the format of the DateInput of the DatePicker. Defaults to `yyyy-MM-dd`.
44+
* `Format` - Specifies the format of the DateInput of the DatePicker. Defaults to `yyyy-MM-dd`. Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article.
4545
* `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to `280px`.
4646
* `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to `320px`.
4747
* `Value` - The current value of the input. Can be used for binding.
@@ -56,4 +56,5 @@ The date picker is, essentially, a [date input]({%slug components/dateinput/over
5656
## See Also
5757

5858
* [Live Demo: Date Picker](https://demos.telerik.com/blazor-ui/datepicker/index)
59-
* [Input Validation]({%slug common-features/input-validation%})
59+
* [Input Validation]({%slug common-features/input-validation%})
60+
* [Supported Input Date Formats]({%slug components/dateinput/supported-formats%})

0 commit comments

Comments
 (0)