Skip to content

Commit 2b32e46

Browse files
author
dmihaylo
committed
docs: update content based on latest commits
1 parent f50b0fb commit 2b32e46

File tree

6 files changed

+148
-156
lines changed

6 files changed

+148
-156
lines changed

‎docs/date-formatting/index.md‎

Lines changed: 96 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,89 +8,91 @@ position: 1
88

99
# Date Formatting
1010

11-
Date formatting converts a `Date` object to a human-readable string using the locale specific settings. The `formatDate` method supports the usage of predefined and custom formats specified as strings, and standard formats specified as objects.
11+
Date formatting converts a `Date` object to a human-readable string using the locale specific settings.
12+
13+
The `formatDate` method supports the usage of predefined and custom formats specified as strings, and standard formats specified as objects.
1214

1315
## Types of Date Formats
1416

1517
### Predefined
1618

1719
* **The `d` specifier**—Renders a short date pattern: `"M/d/y"` for en.
1820

19-
import { formatDate } from '@telerik/kendo-intl';
21+
import { formatDate } from '@telerik/kendo-intl';
2022

21-
formatDate(new Date(2000, 10, 6), "d"); // 10/6/2000
23+
formatDate(new Date(2000, 10, 6), "d"); // 10/6/2000
2224

2325
* **The `D` specifier**—Renders a long date pattern: `"EEEE, MMMM d, y"` for en.
2426

25-
import { formatDate } from '@telerik/kendo-intl';
27+
import { formatDate } from '@telerik/kendo-intl';
2628

27-
formatDate(new Date(2000, 10, 6), "D"); // Monday, November 6, 2000
29+
formatDate(new Date(2000, 10, 6), "D"); // Monday, November 6, 2000
2830

2931
* **The `F` specifier**—Renders a full date and time pattern: `"EEEE, MMMM d, y h:mm:ss a"` for en.
3032

31-
import { formatDate } from '@telerik/kendo-intl';
33+
import { formatDate } from '@telerik/kendo-intl';
3234

33-
formatDate(new Date(2000, 10, 6), "F"); // Monday, November 6, 2000 12:00:00 AM
35+
formatDate(new Date(2000, 10, 6), "F"); // Monday, November 6, 2000 12:00:00 AM
3436

3537
* **The `g` specifier**—Renders a general date and time pattern (short time): `"M/d/y h:mm a"` for en.
3638

37-
import { formatDate } from '@telerik/kendo-intl';
39+
import { formatDate } from '@telerik/kendo-intl';
3840

39-
formatDate(new Date(2000, 10, 6), "g"); // 11/6/2000 12:00 AM
41+
formatDate(new Date(2000, 10, 6), "g"); // 11/6/2000 12:00 AM
4042

4143
* **The `G` specifier**—Renders a general date and time pattern (long time): `"M/d/y h:mm:ss a"` for en.
4244

43-
import { formatDate } from '@telerik/kendo-intl';
45+
import { formatDate } from '@telerik/kendo-intl';
4446

45-
formatDate(new Date(2000, 10, 6), "G"); // 11/6/2000 12:00:00 AM
47+
formatDate(new Date(2000, 10, 6), "G"); // 11/6/2000 12:00:00 AM
4648

4749
* **The `M` specifier**—Renders a wide month and day pattern: `"MMMM d"` for en.
4850

49-
import { formatDate } from '@telerik/kendo-intl';
51+
import { formatDate } from '@telerik/kendo-intl';
5052

51-
formatDate(new Date(2000, 10, 6), "M"); // November 6
53+
formatDate(new Date(2000, 10, 6), "M"); // November 6
5254

5355
* **The `m` specifier**—Renders an abbreviated month and day pattern: `"MMM d"` for en.
5456

55-
import { formatDate } from '@telerik/kendo-intl';
57+
import { formatDate } from '@telerik/kendo-intl';
5658

57-
formatDate(new Date(2000, 10, 6), "m"); // Nov 6
59+
formatDate(new Date(2000, 10, 6), "m"); // Nov 6
5860

5961
* **The `Y` specifier**—Renders a wide month and year pattern: `"MMMM y"` for en.
6062

61-
import { formatDate } from '@telerik/kendo-intl';
63+
import { formatDate } from '@telerik/kendo-intl';
6264

63-
formatDate(new Date(2000, 10, 6), "Y"); // November 2000
65+
formatDate(new Date(2000, 10, 6), "Y"); // November 2000
6466

6567
* **The `y` specifier**—Renders an abbreviated month/year pattern: `"MMM y"` for en.
6668

67-
import { formatDate } from '@telerik/kendo-intl';
69+
import { formatDate } from '@telerik/kendo-intl';
6870

69-
formatDate(new Date(2000, 10, 6), "y"); // Nov 2000
71+
formatDate(new Date(2000, 10, 6), "y"); // Nov 2000
7072

7173
* **The `t` specifier**—Renders a short time pattern: `"h:mm a"` for en.
7274

73-
import { formatDate } from '@telerik/kendo-intl';
75+
import { formatDate } from '@telerik/kendo-intl';
7476

75-
formatDate(new Date(2000, 10, 6, 14, 30, 45), "t"); // 2:30 PM
77+
formatDate(new Date(2000, 10, 6, 14, 30, 45), "t"); // 2:30 PM
7678

7779
* **The `T` specifier**—Renders a long time pattern: `"h:mm:ss a"` for en.
7880

79-
import { formatDate } from '@telerik/kendo-intl';
81+
import { formatDate } from '@telerik/kendo-intl';
8082

81-
formatDate(new Date(2000, 10, 6, 14, 30, 45), "T"); // 2:30:45 PM
83+
formatDate(new Date(2000, 10, 6, 14, 30, 45), "T"); // 2:30:45 PM
8284

8385
* **The `s` specifier**—Renders a universal sortable local date and time pattern: `"yyyy-MM-dd HH:mm:ss"`.
8486

85-
import { formatDate } from '@telerik/kendo-intl';
87+
import { formatDate } from '@telerik/kendo-intl';
8688

87-
formatDate(new Date(2000, 10, 6), "s"); // 2000-11-06T00:00:00
89+
formatDate(new Date(2000, 10, 6), "s"); // 2000-11-06T00:00:00
8890

8991
* **The `u` specifier**—Renders a universal sortable UTC date and time pattern: `"yyyy-MM-dd HH:mm:ssZ"`.
9092

91-
import { formatDate } from '@telerik/kendo-intl';
93+
import { formatDate } from '@telerik/kendo-intl';
9294

93-
formatDate(new Date(2000, 10, 6), "u"); // 2000-11-06 00:00:00Z
95+
formatDate(new Date(2000, 10, 6), "u"); // 2000-11-06 00:00:00Z
9496

9597
### Custom
9698

@@ -100,35 +102,35 @@ The following specifiers can be used in the custom formats.
100102

101103
For the abbreviated name, use one to three letters. For the wide name, use four letters. For the narrow name, use five letters.
102104

103-
import { formatDate } from '@telerik/kendo-intl';
105+
import { formatDate } from '@telerik/kendo-intl';
104106

105-
formatDate(new Date(2000, 0, 1), "y G"); // 2000 AD
107+
formatDate(new Date(2000, 0, 1), "y G"); // 2000 AD
106108

107109
* **The `"y"` specifier**—Renders the year.
108110

109111
To render the full year, use one letter. To render a two-digit year, use two letters. To render a zero-padded year, if necessary, use three or four letters.
110112

111-
import { formatDate } from '@telerik/kendo-intl';
113+
import { formatDate } from '@telerik/kendo-intl';
112114

113-
formatDate(new Date(2000, 0, 1), "y"); // 2000
115+
formatDate(new Date(2000, 0, 1), "y"); // 2000
114116

115-
formatDate(new Date(2011, 0, 1), "yy"); // 11
117+
formatDate(new Date(2011, 0, 1), "yy"); // 11
116118

117-
formatDate(new Date(111, 0, 1), "yyyy"); // 0111
119+
formatDate(new Date(111, 0, 1), "yyyy"); // 0111
118120

119121
* **The `"Q"` specifier**—Renders a quarter of the year.
120122

121123
For the numerical quarter, use one or two letters. For the abbreviation, use three letters. For the wide name, use four letters. For the narrow name, use five letters.
122124

123-
import { formatDate } from '@telerik/kendo-intl';
125+
import { formatDate } from '@telerik/kendo-intl';
124126

125-
formatDate(new Date(2000, 0, 1), "Q"); // 1
127+
formatDate(new Date(2000, 0, 1), "Q"); // 1
126128

127-
formatDate(new Date(2000, 4, 1), "QQQ"); // Q2
129+
formatDate(new Date(2000, 4, 1), "QQQ"); // Q2
128130

129-
formatDate(new Date(2000, 6, 1), "QQQQ"); // 3rd quarter
131+
formatDate(new Date(2000, 6, 1), "QQQQ"); // 3rd quarter
130132

131-
formatDate(new Date(2000, 10, 1), "QQQQQ"); // 4
133+
formatDate(new Date(2000, 10, 1), "QQQQQ"); // 4
132134

133135
* **The `"q"` specifier**—The same as the `"Q"` specifier except that the `"q"` specifier uses the standalone names.
134136

@@ -138,151 +140,151 @@ The following specifiers can be used in the custom formats.
138140

139141
When you use two letters, the month number is rendered as zero-padded.
140142

141-
import { formatDate } from '@telerik/kendo-intl';
143+
import { formatDate } from '@telerik/kendo-intl';
142144

143-
formatDate(new Date(2000, 0, 1), "M"); // 1
145+
formatDate(new Date(2000, 0, 1), "M"); // 1
144146

145-
formatDate(new Date(2000, 0, 1), "MM"); // 01
147+
formatDate(new Date(2000, 0, 1), "MM"); // 01
146148

147-
formatDate(new Date(2000, 0, 1), "MMM"); // Jan
149+
formatDate(new Date(2000, 0, 1), "MMM"); // Jan
148150

149-
formatDate(new Date(2000, 0, 1), "MMMM"); // January
151+
formatDate(new Date(2000, 0, 1), "MMMM"); // January
150152

151-
formatDate(new Date(2000, 0, 1), "MMMMM"); // J
153+
formatDate(new Date(2000, 0, 1), "MMMMM"); // J
152154

153155
* **The `"L"` specifier**—The same as the `"M"` specifier except that the `"L"` specifier uses the standalone names.
154156

155157
* **The `"d"` specifier**—Renders the day of the month.
156158

157159
To show the minimum number of digits, use `"d"`. To always show two digits, use `"dd"` (zero-padding, if necessary—for example, "08").
158160

159-
import { formatDate } from '@telerik/kendo-intl';
161+
import { formatDate } from '@telerik/kendo-intl';
160162

161-
formatDate(new Date(2000, 0, 1), "y d"); // 2000 1
163+
formatDate(new Date(2000, 0, 1), "y d"); // 2000 1
162164

163-
formatDate(new Date(2000, 0, 1), "y dd"); // 2000 01
165+
formatDate(new Date(2000, 0, 1), "y dd"); // 2000 01
164166

165167
* **The `"E"` specifier**—Renders the day of the week.
166168

167169
For the abbreviated day name, use one through three letters. For the wide name, use four letters. For the narrow name, use five letters. For the short name, use six letters.
168170

169-
import { formatDate } from '@telerik/kendo-intl';
171+
import { formatDate } from '@telerik/kendo-intl';
170172

171-
formatDate(new Date(2000, 0, 1), "E"); // Sat
173+
formatDate(new Date(2000, 0, 1), "E"); // Sat
172174

173-
formatDate(new Date(2000, 0, 1), "EEEE"); // Saturday
175+
formatDate(new Date(2000, 0, 1), "EEEE"); // Saturday
174176

175-
formatDate(new Date(2000, 0, 1), "EEEEE"); // S
177+
formatDate(new Date(2000, 0, 1), "EEEEE"); // S
176178

177-
formatDate(new Date(2000, 0, 1), "EEEEEE"); // Sa
179+
formatDate(new Date(2000, 0, 1), "EEEEEE"); // Sa
178180

179181
* **The `"e"` specifier**—The same as the `"E"` specifier except that it adds a numeric value that depends on the local starting day of the week, using one or two letters. The format requires you to load the supplemental `weekData`.
180182

181-
import { formatDate } from '@telerik/kendo-intl';
183+
import { formatDate } from '@telerik/kendo-intl';
182184

183-
formatDate(new Date(2000, 0, 1), "e"); // 7
185+
formatDate(new Date(2000, 0, 1), "e"); // 7
184186

185187
* **The `"c"` specifier**—The same as the `"e"` specifier except that uses the standalone names.
186188

187189
* **The `"a"` specifier**—Renders the day period.
188190

189191
For the short name, use one through three letters. For the wide name, use four letters. For the narrow name, use five letters.
190192

191-
import { formatDate } from '@telerik/kendo-intl';
193+
import { formatDate } from '@telerik/kendo-intl';
192194

193-
formatDate(new Date(2000, 0, 1), "a"); // AM
195+
formatDate(new Date(2000, 0, 1), "a"); // AM
194196

195-
formatDate(new Date(2000, 0, 1, 13), "aaaa"); // PM
197+
formatDate(new Date(2000, 0, 1, 13), "aaaa"); // PM
196198

197-
formatDate(new Date(2000, 0, 1, 13), "aaaaa"); // p
199+
formatDate(new Date(2000, 0, 1, 13), "aaaaa"); // p
198200

199201
* **The `"h"` specifier**—Renders the hour using a 12-hour clock from 1 to 12.
200202

201203
To show the minimum number of digits, use `"h"`. To always show two digits, use `"hh"`.
202204

203-
import { formatDate } from '@telerik/kendo-intl';
205+
import { formatDate } from '@telerik/kendo-intl';
204206

205-
formatDate(new Date(2000, 0, 1, 13), "h a"); // 1 PM
207+
formatDate(new Date(2000, 0, 1, 13), "h a"); // 1 PM
206208

207-
formatDate(new Date(2000, 0, 1, 13), "h a"); // 01 PM
209+
formatDate(new Date(2000, 0, 1, 13), "h a"); // 01 PM
208210

209211
* **The `"H"` specifier**—Renders the hour using a 24-hour clock from 1 to 23.
210212

211213
To show the minimum number of digits, use `"H"`. To always show two digits, use `"HH"`.
212214

213-
import { formatDate } from '@telerik/kendo-intl';
215+
import { formatDate } from '@telerik/kendo-intl';
214216

215-
formatDate(new Date(2000, 0, 1, 1), "H:mm"); // 1:00
217+
formatDate(new Date(2000, 0, 1, 1), "H:mm"); // 1:00
216218

217-
formatDate(new Date(2000, 0, 1, 13), "HH:mm"); // 13:00
219+
formatDate(new Date(2000, 0, 1, 13), "HH:mm"); // 13:00
218220

219221
* **The `"m"` specifier**—Renders the minutes from 0 through 59.
220222

221223
To show the minimum number of digits, use `"m"`. To always show two digits, use `"mm"`.
222224

223-
import { formatDate } from '@telerik/kendo-intl';
225+
import { formatDate } from '@telerik/kendo-intl';
224226

225-
formatDate(new Date(2000, 0, 1, 1, 1), "H:m"); // 1:1
227+
formatDate(new Date(2000, 0, 1, 1, 1), "H:m"); // 1:1
226228

227-
formatDate(new Date(2000, 0, 1, 1, 1), "H:mm"); // 1:01
229+
formatDate(new Date(2000, 0, 1, 1, 1), "H:mm"); // 1:01
228230

229231
* **The `"s"` specifier**—Renders the seconds from 0 through 59.
230232

231233
To show the minimum number of digits, use `"s"`. To always show two digits, use `"ss"`.
232234

233-
import { formatDate } from '@telerik/kendo-intl';
235+
import { formatDate } from '@telerik/kendo-intl';
234236

235-
formatDate(new Date(2000, 0, 1, 1, 1, 1), "HH:mm:s"); // 01:01:1
237+
formatDate(new Date(2000, 0, 1, 1, 1, 1), "HH:mm:s"); // 01:01:1
236238

237-
formatDate(new Date(2000, 0, 1, 1, 1, 1), "HH:mm:ss"); // 01:01:01
239+
formatDate(new Date(2000, 0, 1, 1, 1, 1), "HH:mm:ss"); // 01:01:01
238240

239241
* **The `"S"` specifier**—Renders the fractional seconds. It truncates based on the number of letters.
240242

241-
import { formatDate } from '@telerik/kendo-intl';
243+
import { formatDate } from '@telerik/kendo-intl';
242244

243-
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.S"); // 1.1
245+
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.S"); // 1.1
244246

245-
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.SS"); // 1.12
247+
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.SS"); // 1.12
246248

247-
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.SSS"); // 1.123
249+
formatDate(new Date(2000, 0, 1, 1, 1, 1, 123), "s.SSS"); // 1.123
248250

249251
* **The `"z"` specifier**—Renders the timezone.
250252

251253
For the short localized GMT format, use one through three letters. For the long localized GMT format, use four letters.
252254

253-
import { formatDate } from '@telerik/kendo-intl';
255+
import { formatDate } from '@telerik/kendo-intl';
254256

255-
formatDate(new Date(2000, 0, 1), "z"); // GMT+2
257+
formatDate(new Date(2000, 0, 1), "z"); // GMT+2
256258

257-
formatDate(new Date(2000, 0, 1), "zzzz"); // GMT+02:00
259+
formatDate(new Date(2000, 0, 1), "zzzz"); // GMT+02:00
258260

259261
* **The `"Z"` specifier**—Renders the timezone.
260262

261263
To show the ISO8601 basic format with hours and minutes, use one through three letters. For the long localized GMT format, use four letters. For the ISO8601 extended format, use five letters.
262264

263-
import { formatDate } from '@telerik/kendo-intl';
265+
import { formatDate } from '@telerik/kendo-intl';
264266

265-
formatDate(new Date(2000, 0, 1), "Z"); // +0200
267+
formatDate(new Date(2000, 0, 1), "Z"); // +0200
266268

267-
formatDate(new Date(2000, 0, 1), "ZZZZ"); // GMT+02:00
269+
formatDate(new Date(2000, 0, 1), "ZZZZ"); // GMT+02:00
268270

269-
formatDate(new Date(2000, 0, 1), "ZZZZZ"); // +02:00
271+
formatDate(new Date(2000, 0, 1), "ZZZZZ"); // +02:00
270272

271273
* **The `"X"` specifier**—Renders the timezone.
272274

273275
For the ISO8601 basic format with hours and optional minutes, use one letter. For the ISO8601 basic format with hours and minutes, use two letters and four letters. For the ISO8601 extended format, use three and five letters.
274276

275277
When the local time offset is `0` (zero), use the ISO8601 UTC indicator `Z`.
276278

277-
import { formatDate } from '@telerik/kendo-intl';
279+
import { formatDate } from '@telerik/kendo-intl';
278280

279-
formatDate(new Date(2000, 0, 1), "X"); // +02
281+
formatDate(new Date(2000, 0, 1), "X"); // +02
280282

281-
formatDate(new Date(2000, 0, 1), "X"); // Z if zero offset
283+
formatDate(new Date(2000, 0, 1), "X"); // Z if zero offset
282284

283-
formatDate(new Date(2000, 0, 1), "XX"); // +0200
285+
formatDate(new Date(2000, 0, 1), "XX"); // +0200
284286

285-
formatDate(new Date(2000, 0, 1), "XXX"); // +02:00
287+
formatDate(new Date(2000, 0, 1), "XXX"); // +02:00
286288

287289
* **The `"x"` specifier**—The same as the `"X"` specifier except that the `"x"` specifier does not add the UTC indicator when the offset is `0` (zero).
288290

@@ -294,25 +296,25 @@ The supported types of options are:
294296

295297
* **Locale predefined formats**—Sets the format from the [`dateFormats`](http://www.unicode.org/reports/tr35/tr35-dates.html#dateFormats), [`timeFormats`](http://www.unicode.org/reports/tr35/tr35-dates.html#timeFormats), and [`dateTimeFormats`](http://www.unicode.org/reports/tr35/tr35-dates.html#dateTimeFormats) elements of the calendar.
296298

297-
import { formatDate } from '@telerik/kendo-intl';
299+
import { formatDate } from '@telerik/kendo-intl';
298300

299-
formatDate(new Date(2000, 10, 6, 13), { time: "short" }); // 1:00 PM
301+
formatDate(new Date(2000, 10, 6, 13), { time: "short" }); // 1:00 PM
300302

301-
formatDate(new Date(2000, 10, 6, 13), { date: "long" }); // November 6, 2000
303+
formatDate(new Date(2000, 10, 6, 13), { date: "long" }); // November 6, 2000
302304

303-
formatDate(new Date(2000, 10, 6, 13), { datetime: "full" }); // Monday, November 6, 2000 at 1:00:00 PM GMT+02:00
305+
formatDate(new Date(2000, 10, 6, 13), { datetime: "full" }); // Monday, November 6, 2000 at 1:00:00 PM GMT+02:00
304306

305307
* **Skeleton formats**—Sets the format from the [`availableFormats`](http://www.unicode.org/reports/tr35/tr35-dates.html#availableFormats_appendItems) of the calendar based on the date fields that you want to display.
306308

307-
import { formatDate } from '@telerik/kendo-intl';
309+
import { formatDate } from '@telerik/kendo-intl';
308310

309-
formatDate(new Date(2000, 10, 6, 13), { skeleton: "yMMMdEHm" }); // Mon, Nov 6, 2000, 13:00
311+
formatDate(new Date(2000, 10, 6, 13), { skeleton: "yMMMdEHm" }); // Mon, Nov 6, 2000, 13:00
310312

311313
* **Fields formats**—Similar to the skeleton formats except that you need to set the required fields by using separate options in the same way as the [`Intl.DateTimeFormat`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) object.
312314

313-
import { formatDate } from '@telerik/kendo-intl';
315+
import { formatDate } from '@telerik/kendo-intl';
314316

315-
formatDate(new Date(2000, 10, 6), { year: "numeric", month: "long" }); // November 2000
317+
formatDate(new Date(2000, 10, 6), { year: "numeric", month: "long" }); // November 2000
316318

317319
## Suggested Links
318320

0 commit comments

Comments
 (0)