Skip to content

Commit 0e076a5

Browse files
marin-bratanovmarin-bratanov
committed
docs(dateInput): update supported formats
1 parent a4ebd7a commit 0e076a5

File tree

4 files changed

+90
-21
lines changed

4 files changed

+90
-21
lines changed

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

-19.8 KB
Binary file not shown.

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

22.4 KB
Loading

‎components/dateinput/images/standard-format-strings.png

37.9 KB
Loading

‎components/dateinput/supported-formats.md

Lines changed: 90 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,93 @@ position: 5
1010

1111
# Supported Date Formats
1212

13-
This article explains the format strings and specifiers supported by the Telerik DateInput for Blazor.
13+
This article explains the format strings and specifiers supported by the Telerik DateInput for Blazor and how to set them to its `Format` property.
14+
15+
These formats are also used in composite components that also rely on a date input, such as the Date Picker and the Time Picker.
16+
17+
The Telerik Date Input supports the standard format strings and specifiers that come from the .NET Framework:
18+
19+
* [Standard Date and Time Format Strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings) - all options are supported, except `O`, `o` and `U`.
20+
* [Custom Date and Time Format Strings](https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-date-and-time-format-strings) - the most common date and time specifiers are supported down to the seconds level. Epoch, offset, time zone and sub-second specifiers are not supported. Here is a list of the supported specifiers:
21+
* `d`
22+
* `dd`
23+
* `ddd`
24+
* `dddd`
25+
* `M`
26+
* `MM`
27+
* `MMM`
28+
* `MMMM`
29+
* `y`
30+
* `yy`
31+
* `yyy`
32+
* `yyyy`
33+
* `h`
34+
* `hh`
35+
* `H`
36+
* `HH`
37+
* `m`
38+
* `mm`
39+
* `s`
40+
* `ss`
41+
* `t`
42+
* `tt`
43+
44+
>caution While the results of unsupported format specifiers values will render correctly, editing is not supported for them.
45+
46+
## Examples
47+
48+
>caption Standard format strings support in Telerik Date Input for Blazor
1449
15-
The `Format` property can take a number of possible format strings, and this is a list of the supported options and their effects.
50+
````CSHTML
51+
@using Telerik.Blazor.Components.DateInput
52+
53+
<TelerikDateInput @bind-Value="TheDate" Format="d" />@TheDate.ToString("d")
54+
<br />
55+
<TelerikDateInput @bind-Value="TheDate" Format="D" />@TheDate.ToString("D")
56+
<br />
57+
<TelerikDateInput @bind-Value="TheDate" Format="f" />@TheDate.ToString("f")
58+
<br />
59+
<TelerikDateInput @bind-Value="TheDate" Format="F" />@TheDate.ToString("F")
60+
<br />
61+
<TelerikDateInput @bind-Value="TheDate" Format="g" />@TheDate.ToString("g")
62+
<br />
63+
<TelerikDateInput @bind-Value="TheDate" Format="G" />@TheDate.ToString("G")
64+
<br />
65+
<TelerikDateInput @bind-Value="TheDate" Format="m" />@TheDate.ToString("m")
66+
<br />
67+
<TelerikDateInput @bind-Value="TheDate" Format="M" />@TheDate.ToString("M")
68+
<br />
69+
<TelerikDateInput @bind-Value="TheDate" Format="r" />@TheDate.ToString("r")
70+
<br />
71+
<TelerikDateInput @bind-Value="TheDate" Format="R" />@TheDate.ToString("R")
72+
<br />
73+
<TelerikDateInput @bind-Value="TheDate" Format="s" />@TheDate.ToString("s")
74+
<br />
75+
<TelerikDateInput @bind-Value="TheDate" Format="t" />@TheDate.ToString("t")
76+
<br />
77+
<TelerikDateInput @bind-Value="TheDate" Format="T" />@TheDate.ToString("T")
78+
<br />
79+
<TelerikDateInput @bind-Value="TheDate" Format="u" />@TheDate.ToString("u")
80+
<br />
81+
<TelerikDateInput @bind-Value="TheDate" Format="y" />@TheDate.ToString("y")
82+
<br />
83+
<TelerikDateInput @bind-Value="TheDate" Format="Y" />@TheDate.ToString("Y")
84+
<br />
85+
86+
@TheDate
87+
88+
@code {
89+
DateTime TheDate { get; set; } = new DateTime(2019, 4, 27, 22, 03, 44);
90+
}
91+
````
92+
93+
>caption The result from the code snippet above
94+
95+
![](images/standard-format-strings.png)
1696

17-
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.
1897

19-
>caption Using supported .NET format specifiers to define date format in the Telerik Date Input
98+
99+
>caption Using supported .NET format specifiers to define relatively common date formats in the Telerik Date Input
20100
21101
````CSHTML
22102
@using Telerik.Blazor.Components.DateInput
@@ -27,43 +107,32 @@ The .NET framework supports a list of format specifiers for dates that you can u
27107
<br />
28108
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy" /> @TheDate.ToString("dd/MMM/yyyy")
29109
<br />
110+
<TelerikDateInput @bind-Value="TheDate" Format="dddd, dd/MMM/yyyy" /> @TheDate.ToString("dddd, dd/MMM/yyyy")
111+
<br />
30112
<TelerikDateInput @bind-Value="TheDate" Format="HH:mm:ss" /> @TheDate.ToString("HH:mm:ss")
31113
<br />
114+
<TelerikDateInput @bind-Value="TheDate" Format="d/M/y h:m:s tt" /> @TheDate.ToString("d/M/y h:m:s")
115+
<br />
32116
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMM/yyyy H:mm:ss" /> @TheDate.ToString("dd/MMM/yyyy H:mm:ss")
33117
<br />
34118
<TelerikDateInput @bind-Value="TheDate" Format="dd/MMMM/yyyy HH:mm:ss" /> @TheDate.ToString("dd/MMMM/yyyy HH:mm:ss")
35119
<br />
36-
<TelerikDateInput @bind-Value="TheDate" Format="'dd/mm/yyyy date:' dd/MM/yyyy" /> @TheDate.ToString("'dd/mm/yyyy date:' dd/MM/yyyy")
37-
<br />
38120
<TelerikDateInput @bind-Value="TheDate" Format="dd-MM-yyyy" /> @TheDate.ToString("dd-MM-yyyy")
39121
<br />
40122
<TelerikDateInput @bind-Value="TheDate" Format="dd.MMM.yyyy" /> @TheDate.ToString("dd.MMM.yyyy")
41123
<br />
42124
43125
@TheDate
44126
45-
@code {
127+
@code {
46128
DateTime TheDate { get; set; } = new DateTime(2019, 11, 27, 02, 03, 44);
47129
}
48130
````
49131

50132
>caption The result from the code snippet above
51133
52-
![](images/custom-date-formats-overview.png)
53-
54-
>caption Unsupported .NET format specifiers
55-
56-
* `m` - single digit minutes without leading zero
57-
* `t` and `tt` - AM/PM indicators
58-
* `g`, `gg` - epoch indicators
59-
* `ddd`, `dddd` - day of the week names
60-
* `z`, `zz`, `zzz` - UTC offsets
61-
* `K` - kind
62-
63-
64-
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.
134+
![](images/custom-date-formats.png)
65135

66-
>caution While the results of unsupported format specifiers values will render correctly, editing is not supported.
67136

68137

69138

0 commit comments

Comments
 (0)