Skip to content

Commit 844ea2c

Browse files
author
dmihaylo
committed
docs: fix layout issues, part 2
1 parent 2b32e46 commit 844ea2c

File tree

6 files changed

+163
-155
lines changed

6 files changed

+163
-155
lines changed

‎docs/date-formatting/index.md‎

Lines changed: 98 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -14,85 +14,90 @@ The `formatDate` method supports the usage of predefined and custom formats spec
1414

1515
## Types of Date Formats
1616

17+
The supported types of date formats are:
18+
* [Predefined](#predifined)
19+
* [Custom](#custom)
20+
* [Standard](#standard)
21+
1722
### Predefined
1823

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

21-
import { formatDate } from '@telerik/kendo-intl';
26+
import { formatDate } from '@telerik/kendo-intl';
2227

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

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

27-
import { formatDate } from '@telerik/kendo-intl';
32+
import { formatDate } from '@telerik/kendo-intl';
2833

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

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

33-
import { formatDate } from '@telerik/kendo-intl';
38+
import { formatDate } from '@telerik/kendo-intl';
3439

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

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

39-
import { formatDate } from '@telerik/kendo-intl';
44+
import { formatDate } from '@telerik/kendo-intl';
4045

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

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

45-
import { formatDate } from '@telerik/kendo-intl';
50+
import { formatDate } from '@telerik/kendo-intl';
4651

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

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

51-
import { formatDate } from '@telerik/kendo-intl';
56+
import { formatDate } from '@telerik/kendo-intl';
5257

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

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

57-
import { formatDate } from '@telerik/kendo-intl';
62+
import { formatDate } from '@telerik/kendo-intl';
5863

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

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

63-
import { formatDate } from '@telerik/kendo-intl';
68+
import { formatDate } from '@telerik/kendo-intl';
6469

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

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

69-
import { formatDate } from '@telerik/kendo-intl';
74+
import { formatDate } from '@telerik/kendo-intl';
7075

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

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

75-
import { formatDate } from '@telerik/kendo-intl';
80+
import { formatDate } from '@telerik/kendo-intl';
7681

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

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

81-
import { formatDate } from '@telerik/kendo-intl';
86+
import { formatDate } from '@telerik/kendo-intl';
8287

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

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

87-
import { formatDate } from '@telerik/kendo-intl';
92+
import { formatDate } from '@telerik/kendo-intl';
8893

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

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

93-
import { formatDate } from '@telerik/kendo-intl';
98+
import { formatDate } from '@telerik/kendo-intl';
9499

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

97102
### Custom
98103

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

103108
For the abbreviated name, use one to three letters. For the wide name, use four letters. For the narrow name, use five letters.
104109

105-
import { formatDate } from '@telerik/kendo-intl';
110+
import { formatDate } from '@telerik/kendo-intl';
106111

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

109114
* **The `"y"` specifier**—Renders the year.
110115

111116
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.
112117

113-
import { formatDate } from '@telerik/kendo-intl';
118+
import { formatDate } from '@telerik/kendo-intl';
114119

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

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

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

121126
* **The `"Q"` specifier**—Renders a quarter of the year.
122127

123128
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.
124129

125-
import { formatDate } from '@telerik/kendo-intl';
130+
import { formatDate } from '@telerik/kendo-intl';
126131

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

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

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

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

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

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

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

143-
import { formatDate } from '@telerik/kendo-intl';
148+
import { formatDate } from '@telerik/kendo-intl';
144149

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

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

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

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

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

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

157162
* **The `"d"` specifier**—Renders the day of the month.
158163

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

161-
import { formatDate } from '@telerik/kendo-intl';
166+
import { formatDate } from '@telerik/kendo-intl';
162167

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

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

167172
* **The `"E"` specifier**—Renders the day of the week.
168173

169174
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.
170175

171-
import { formatDate } from '@telerik/kendo-intl';
176+
import { formatDate } from '@telerik/kendo-intl';
172177

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

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

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

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

181186
* **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`.
182187

183-
import { formatDate } from '@telerik/kendo-intl';
188+
import { formatDate } from '@telerik/kendo-intl';
184189

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

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

189194
* **The `"a"` specifier**—Renders the day period.
190195

191196
For the short name, use one through three letters. For the wide name, use four letters. For the narrow name, use five letters.
192197

193-
import { formatDate } from '@telerik/kendo-intl';
198+
import { formatDate } from '@telerik/kendo-intl';
194199

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

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

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

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

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

205-
import { formatDate } from '@telerik/kendo-intl';
210+
import { formatDate } from '@telerik/kendo-intl';
206211

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

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

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

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

215-
import { formatDate } from '@telerik/kendo-intl';
220+
import { formatDate } from '@telerik/kendo-intl';
216221

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

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

221226
* **The `"m"` specifier**—Renders the minutes from 0 through 59.
222227

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

225-
import { formatDate } from '@telerik/kendo-intl';
230+
import { formatDate } from '@telerik/kendo-intl';
226231

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

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

231236
* **The `"s"` specifier**—Renders the seconds from 0 through 59.
232237

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

235-
import { formatDate } from '@telerik/kendo-intl';
240+
import { formatDate } from '@telerik/kendo-intl';
236241

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

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

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

243-
import { formatDate } from '@telerik/kendo-intl';
248+
import { formatDate } from '@telerik/kendo-intl';
244249

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

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

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

251256
* **The `"z"` specifier**—Renders the timezone.
252257

253258
For the short localized GMT format, use one through three letters. For the long localized GMT format, use four letters.
254259

255-
import { formatDate } from '@telerik/kendo-intl';
260+
import { formatDate } from '@telerik/kendo-intl';
256261

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

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

261266
* **The `"Z"` specifier**—Renders the timezone.
262267

263268
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.
264269

265-
import { formatDate } from '@telerik/kendo-intl';
270+
import { formatDate } from '@telerik/kendo-intl';
266271

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

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

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

273278
* **The `"X"` specifier**—Renders the timezone.
274279

275280
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.
276281

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

279-
import { formatDate } from '@telerik/kendo-intl';
284+
import { formatDate } from '@telerik/kendo-intl';
280285

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

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

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

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

289294
* **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).
290295

@@ -296,25 +301,25 @@ The supported types of options are:
296301

297302
* **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.
298303

299-
import { formatDate } from '@telerik/kendo-intl';
304+
import { formatDate } from '@telerik/kendo-intl';
300305

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

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

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

307312
* **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.
308313

309-
import { formatDate } from '@telerik/kendo-intl';
314+
import { formatDate } from '@telerik/kendo-intl';
310315

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

313318
* **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.
314319

315-
import { formatDate } from '@telerik/kendo-intl';
320+
import { formatDate } from '@telerik/kendo-intl';
316321

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

319324
## Suggested Links
320325

0 commit comments

Comments
 (0)