@vaadin/date-picker 23.2.0-dev.48e5e3967 → 23.2.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/package.json +17 -11
  2. package/src/vaadin-date-picker-light.d.ts +10 -2
  3. package/src/vaadin-date-picker-light.js +2 -1
  4. package/src/vaadin-date-picker-mixin.d.ts +11 -9
  5. package/src/vaadin-date-picker-mixin.js +110 -107
  6. package/src/vaadin-date-picker-overlay-content.js +59 -69
  7. package/src/vaadin-date-picker.d.ts +10 -2
  8. package/src/vaadin-date-picker.js +2 -6
  9. package/src/vaadin-infinite-scroller.js +3 -3
  10. package/src/vaadin-month-calendar.js +3 -1
  11. package/theme/lumo/vaadin-date-picker-overlay-content-styles.js +0 -14
  12. package/theme/lumo/vaadin-month-calendar-styles.js +3 -3
  13. package/theme/material/vaadin-date-picker-overlay-content-styles.js +0 -19
  14. package/web-types.json +726 -0
  15. package/web-types.lit.json +307 -0
package/web-types.json ADDED
@@ -0,0 +1,726 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/date-picker",
4
+ "version": "23.2.0-rc1",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
10
+ "name": "vaadin-date-picker-light",
11
+ "description": "`<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing\nonly the scrollable month calendar view and leaving the input field definition to the user.\n\nTo create a custom input field, you need to add a child element which has a two-way\ndata-bindable property representing the input value. The property name is expected\nto be `bindValue` by default. See the example below for a simplest possible example\nusing an `<input>` element.\n\n```html\n<vaadin-date-picker-light attr-for-value=\"value\">\n <input class=\"input\">\n</vaadin-date-picker-light>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description | Theme for Element\n----------------|----------------|----------------\n`overlay-content` | The overlay element | vaadin-date-picker-light\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.\n\nIn addition to `<vaadin-date-picker-light>` itself, the following\ninternal components are themable:\n\n- `<vaadin-date-picker-overlay>`\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n\nNote: the `theme` attribute value set on `<vaadin-date-picker-light>`\nis propagated to the internal themable components listed above.",
12
+ "attributes": [
13
+ {
14
+ "name": "value",
15
+ "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
16
+ "value": {
17
+ "type": [
18
+ "string"
19
+ ]
20
+ }
21
+ },
22
+ {
23
+ "name": "initial-position",
24
+ "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
25
+ "value": {
26
+ "type": [
27
+ "string",
28
+ "null",
29
+ "undefined"
30
+ ]
31
+ }
32
+ },
33
+ {
34
+ "name": "opened",
35
+ "description": "Set true to open the date selector overlay.",
36
+ "value": {
37
+ "type": [
38
+ "boolean",
39
+ "null",
40
+ "undefined"
41
+ ]
42
+ }
43
+ },
44
+ {
45
+ "name": "auto-open-disabled",
46
+ "description": "Set true to prevent the overlay from opening automatically.",
47
+ "value": {
48
+ "type": [
49
+ "boolean",
50
+ "null",
51
+ "undefined"
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "name": "show-week-numbers",
57
+ "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
58
+ "value": {
59
+ "type": [
60
+ "boolean",
61
+ "null",
62
+ "undefined"
63
+ ]
64
+ }
65
+ },
66
+ {
67
+ "name": "min",
68
+ "description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
69
+ "value": {
70
+ "type": [
71
+ "string",
72
+ "undefined"
73
+ ]
74
+ }
75
+ },
76
+ {
77
+ "name": "max",
78
+ "description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
79
+ "value": {
80
+ "type": [
81
+ "string",
82
+ "undefined"
83
+ ]
84
+ }
85
+ },
86
+ {
87
+ "name": "attr-for-value",
88
+ "description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
89
+ "value": {
90
+ "type": [
91
+ "string"
92
+ ]
93
+ }
94
+ },
95
+ {
96
+ "name": "theme",
97
+ "description": "The theme variants to apply to the component.",
98
+ "value": {
99
+ "type": [
100
+ "string",
101
+ "null",
102
+ "undefined"
103
+ ]
104
+ }
105
+ }
106
+ ],
107
+ "js": {
108
+ "properties": [
109
+ {
110
+ "name": "value",
111
+ "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
112
+ "value": {
113
+ "type": [
114
+ "string"
115
+ ]
116
+ }
117
+ },
118
+ {
119
+ "name": "initialPosition",
120
+ "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
121
+ "value": {
122
+ "type": [
123
+ "string",
124
+ "null",
125
+ "undefined"
126
+ ]
127
+ }
128
+ },
129
+ {
130
+ "name": "opened",
131
+ "description": "Set true to open the date selector overlay.",
132
+ "value": {
133
+ "type": [
134
+ "boolean",
135
+ "null",
136
+ "undefined"
137
+ ]
138
+ }
139
+ },
140
+ {
141
+ "name": "autoOpenDisabled",
142
+ "description": "Set true to prevent the overlay from opening automatically.",
143
+ "value": {
144
+ "type": [
145
+ "boolean",
146
+ "null",
147
+ "undefined"
148
+ ]
149
+ }
150
+ },
151
+ {
152
+ "name": "showWeekNumbers",
153
+ "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
154
+ "value": {
155
+ "type": [
156
+ "boolean",
157
+ "null",
158
+ "undefined"
159
+ ]
160
+ }
161
+ },
162
+ {
163
+ "name": "i18n",
164
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
165
+ "value": {
166
+ "type": [
167
+ "DatePickerI18n"
168
+ ]
169
+ }
170
+ },
171
+ {
172
+ "name": "min",
173
+ "description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
174
+ "value": {
175
+ "type": [
176
+ "string",
177
+ "undefined"
178
+ ]
179
+ }
180
+ },
181
+ {
182
+ "name": "max",
183
+ "description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
184
+ "value": {
185
+ "type": [
186
+ "string",
187
+ "undefined"
188
+ ]
189
+ }
190
+ },
191
+ {
192
+ "name": "attrForValue",
193
+ "description": "Name of the two-way data-bindable property representing the\nvalue of the custom input field.",
194
+ "value": {
195
+ "type": [
196
+ "string"
197
+ ]
198
+ }
199
+ }
200
+ ],
201
+ "events": [
202
+ {
203
+ "name": "change",
204
+ "description": "Fired when the user commits a value change."
205
+ },
206
+ {
207
+ "name": "opened-changed",
208
+ "description": "Fired when `opened` property value changes."
209
+ },
210
+ {
211
+ "name": "value-changed",
212
+ "description": "Fired when `value` property value changes."
213
+ }
214
+ ]
215
+ }
216
+ },
217
+ {
218
+ "name": "vaadin-date-picker",
219
+ "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-rc1/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n`overlay-content` | The overlay element\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n`today` | Set on the date corresponding to the current day | date\n`selected` | Set on the selected date | date\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-rc1/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-rc1/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/23.2.0-rc1/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`months` | Months scroller\n`years` | Years scroller\n`toolbar` | Footer bar with buttons\n`today-button` | Today button\n`cancel-button` | Cancel button\n`month` | Month calendar\n`year-number` | Year number\n`year-separator` | Year separator\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
220
+ "attributes": [
221
+ {
222
+ "name": "disabled",
223
+ "description": "If true, the user cannot interact with this element.",
224
+ "value": {
225
+ "type": [
226
+ "boolean",
227
+ "null",
228
+ "undefined"
229
+ ]
230
+ }
231
+ },
232
+ {
233
+ "name": "autofocus",
234
+ "description": "Specify that this control should have input focus when the page loads.",
235
+ "value": {
236
+ "type": [
237
+ "boolean",
238
+ "null",
239
+ "undefined"
240
+ ]
241
+ }
242
+ },
243
+ {
244
+ "name": "label",
245
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
246
+ "value": {
247
+ "type": [
248
+ "string",
249
+ "null",
250
+ "undefined"
251
+ ]
252
+ }
253
+ },
254
+ {
255
+ "name": "invalid",
256
+ "description": "Set to true when the field is invalid.",
257
+ "value": {
258
+ "type": [
259
+ "boolean",
260
+ "null",
261
+ "undefined"
262
+ ]
263
+ }
264
+ },
265
+ {
266
+ "name": "required",
267
+ "description": "Specifies that the user must fill in a value.",
268
+ "value": {
269
+ "type": [
270
+ "boolean",
271
+ "null",
272
+ "undefined"
273
+ ]
274
+ }
275
+ },
276
+ {
277
+ "name": "error-message",
278
+ "description": "Error to show when the field is invalid.",
279
+ "value": {
280
+ "type": [
281
+ "string",
282
+ "null",
283
+ "undefined"
284
+ ]
285
+ }
286
+ },
287
+ {
288
+ "name": "helper-text",
289
+ "description": "String used for the helper text.",
290
+ "value": {
291
+ "type": [
292
+ "string",
293
+ "null",
294
+ "undefined"
295
+ ]
296
+ }
297
+ },
298
+ {
299
+ "name": "value",
300
+ "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
301
+ "value": {
302
+ "type": [
303
+ "string"
304
+ ]
305
+ }
306
+ },
307
+ {
308
+ "name": "allowed-char-pattern",
309
+ "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
310
+ "value": {
311
+ "type": [
312
+ "string",
313
+ "null",
314
+ "undefined"
315
+ ]
316
+ }
317
+ },
318
+ {
319
+ "name": "autoselect",
320
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
321
+ "value": {
322
+ "type": [
323
+ "boolean",
324
+ "null",
325
+ "undefined"
326
+ ]
327
+ }
328
+ },
329
+ {
330
+ "name": "clear-button-visible",
331
+ "description": "Set to true to display the clear icon which clears the input.",
332
+ "value": {
333
+ "type": [
334
+ "boolean",
335
+ "null",
336
+ "undefined"
337
+ ]
338
+ }
339
+ },
340
+ {
341
+ "name": "name",
342
+ "description": "The name of this field.",
343
+ "value": {
344
+ "type": [
345
+ "string",
346
+ "null",
347
+ "undefined"
348
+ ]
349
+ }
350
+ },
351
+ {
352
+ "name": "placeholder",
353
+ "description": "A hint to the user of what can be entered in the field.",
354
+ "value": {
355
+ "type": [
356
+ "string",
357
+ "null",
358
+ "undefined"
359
+ ]
360
+ }
361
+ },
362
+ {
363
+ "name": "readonly",
364
+ "description": "When present, it specifies that the field is read-only.",
365
+ "value": {
366
+ "type": [
367
+ "boolean",
368
+ "null",
369
+ "undefined"
370
+ ]
371
+ }
372
+ },
373
+ {
374
+ "name": "title",
375
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
376
+ "value": {
377
+ "type": [
378
+ "string",
379
+ "null",
380
+ "undefined"
381
+ ]
382
+ }
383
+ },
384
+ {
385
+ "name": "initial-position",
386
+ "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
387
+ "value": {
388
+ "type": [
389
+ "string",
390
+ "null",
391
+ "undefined"
392
+ ]
393
+ }
394
+ },
395
+ {
396
+ "name": "opened",
397
+ "description": "Set true to open the date selector overlay.",
398
+ "value": {
399
+ "type": [
400
+ "boolean",
401
+ "null",
402
+ "undefined"
403
+ ]
404
+ }
405
+ },
406
+ {
407
+ "name": "auto-open-disabled",
408
+ "description": "Set true to prevent the overlay from opening automatically.",
409
+ "value": {
410
+ "type": [
411
+ "boolean",
412
+ "null",
413
+ "undefined"
414
+ ]
415
+ }
416
+ },
417
+ {
418
+ "name": "show-week-numbers",
419
+ "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
420
+ "value": {
421
+ "type": [
422
+ "boolean",
423
+ "null",
424
+ "undefined"
425
+ ]
426
+ }
427
+ },
428
+ {
429
+ "name": "min",
430
+ "description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
431
+ "value": {
432
+ "type": [
433
+ "string",
434
+ "undefined"
435
+ ]
436
+ }
437
+ },
438
+ {
439
+ "name": "max",
440
+ "description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
441
+ "value": {
442
+ "type": [
443
+ "string",
444
+ "undefined"
445
+ ]
446
+ }
447
+ },
448
+ {
449
+ "name": "theme",
450
+ "description": "The theme variants to apply to the component.",
451
+ "value": {
452
+ "type": [
453
+ "string",
454
+ "null",
455
+ "undefined"
456
+ ]
457
+ }
458
+ }
459
+ ],
460
+ "js": {
461
+ "properties": [
462
+ {
463
+ "name": "disabled",
464
+ "description": "If true, the user cannot interact with this element.",
465
+ "value": {
466
+ "type": [
467
+ "boolean",
468
+ "null",
469
+ "undefined"
470
+ ]
471
+ }
472
+ },
473
+ {
474
+ "name": "autofocus",
475
+ "description": "Specify that this control should have input focus when the page loads.",
476
+ "value": {
477
+ "type": [
478
+ "boolean",
479
+ "null",
480
+ "undefined"
481
+ ]
482
+ }
483
+ },
484
+ {
485
+ "name": "label",
486
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
487
+ "value": {
488
+ "type": [
489
+ "string",
490
+ "null",
491
+ "undefined"
492
+ ]
493
+ }
494
+ },
495
+ {
496
+ "name": "invalid",
497
+ "description": "Set to true when the field is invalid.",
498
+ "value": {
499
+ "type": [
500
+ "boolean",
501
+ "null",
502
+ "undefined"
503
+ ]
504
+ }
505
+ },
506
+ {
507
+ "name": "required",
508
+ "description": "Specifies that the user must fill in a value.",
509
+ "value": {
510
+ "type": [
511
+ "boolean",
512
+ "null",
513
+ "undefined"
514
+ ]
515
+ }
516
+ },
517
+ {
518
+ "name": "errorMessage",
519
+ "description": "Error to show when the field is invalid.",
520
+ "value": {
521
+ "type": [
522
+ "string",
523
+ "null",
524
+ "undefined"
525
+ ]
526
+ }
527
+ },
528
+ {
529
+ "name": "helperText",
530
+ "description": "String used for the helper text.",
531
+ "value": {
532
+ "type": [
533
+ "string",
534
+ "null",
535
+ "undefined"
536
+ ]
537
+ }
538
+ },
539
+ {
540
+ "name": "value",
541
+ "description": "Selected date.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
542
+ "value": {
543
+ "type": [
544
+ "string"
545
+ ]
546
+ }
547
+ },
548
+ {
549
+ "name": "allowedCharPattern",
550
+ "description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
551
+ "value": {
552
+ "type": [
553
+ "string",
554
+ "null",
555
+ "undefined"
556
+ ]
557
+ }
558
+ },
559
+ {
560
+ "name": "autoselect",
561
+ "description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
562
+ "value": {
563
+ "type": [
564
+ "boolean",
565
+ "null",
566
+ "undefined"
567
+ ]
568
+ }
569
+ },
570
+ {
571
+ "name": "clearButtonVisible",
572
+ "description": "Set to true to display the clear icon which clears the input.",
573
+ "value": {
574
+ "type": [
575
+ "boolean",
576
+ "null",
577
+ "undefined"
578
+ ]
579
+ }
580
+ },
581
+ {
582
+ "name": "name",
583
+ "description": "The name of this field.",
584
+ "value": {
585
+ "type": [
586
+ "string",
587
+ "null",
588
+ "undefined"
589
+ ]
590
+ }
591
+ },
592
+ {
593
+ "name": "placeholder",
594
+ "description": "A hint to the user of what can be entered in the field.",
595
+ "value": {
596
+ "type": [
597
+ "string",
598
+ "null",
599
+ "undefined"
600
+ ]
601
+ }
602
+ },
603
+ {
604
+ "name": "readonly",
605
+ "description": "When present, it specifies that the field is read-only.",
606
+ "value": {
607
+ "type": [
608
+ "boolean",
609
+ "null",
610
+ "undefined"
611
+ ]
612
+ }
613
+ },
614
+ {
615
+ "name": "title",
616
+ "description": "The text usually displayed in a tooltip popup when the mouse is over the field.",
617
+ "value": {
618
+ "type": [
619
+ "string",
620
+ "null",
621
+ "undefined"
622
+ ]
623
+ }
624
+ },
625
+ {
626
+ "name": "initialPosition",
627
+ "description": "Date which should be visible when there is no value selected.\n\nThe same date formats as for the `value` property are supported.",
628
+ "value": {
629
+ "type": [
630
+ "string",
631
+ "null",
632
+ "undefined"
633
+ ]
634
+ }
635
+ },
636
+ {
637
+ "name": "opened",
638
+ "description": "Set true to open the date selector overlay.",
639
+ "value": {
640
+ "type": [
641
+ "boolean",
642
+ "null",
643
+ "undefined"
644
+ ]
645
+ }
646
+ },
647
+ {
648
+ "name": "autoOpenDisabled",
649
+ "description": "Set true to prevent the overlay from opening automatically.",
650
+ "value": {
651
+ "type": [
652
+ "boolean",
653
+ "null",
654
+ "undefined"
655
+ ]
656
+ }
657
+ },
658
+ {
659
+ "name": "showWeekNumbers",
660
+ "description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
661
+ "value": {
662
+ "type": [
663
+ "boolean",
664
+ "null",
665
+ "undefined"
666
+ ]
667
+ }
668
+ },
669
+ {
670
+ "name": "i18n",
671
+ "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object like so:\n```\ndatePicker.i18n = { ...datePicker.i18n, {\n formatDate: date => { ... },\n parseDate: value => { ... },\n}};\n```\n\nThe object has the following JSON structure and default values:\n\n```\n{\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n}\n```",
672
+ "value": {
673
+ "type": [
674
+ "DatePickerI18n"
675
+ ]
676
+ }
677
+ },
678
+ {
679
+ "name": "min",
680
+ "description": "The earliest date that can be selected. All earlier dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
681
+ "value": {
682
+ "type": [
683
+ "string",
684
+ "undefined"
685
+ ]
686
+ }
687
+ },
688
+ {
689
+ "name": "max",
690
+ "description": "The latest date that can be selected. All later dates will be disabled.\n\nSupported date formats:\n- ISO 8601 `\"YYYY-MM-DD\"` (default)\n- 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`",
691
+ "value": {
692
+ "type": [
693
+ "string",
694
+ "undefined"
695
+ ]
696
+ }
697
+ }
698
+ ],
699
+ "events": [
700
+ {
701
+ "name": "validated",
702
+ "description": "Fired whenever the field is validated."
703
+ },
704
+ {
705
+ "name": "change",
706
+ "description": "Fired when the user commits a value change."
707
+ },
708
+ {
709
+ "name": "input",
710
+ "description": "Fired when the value is changed by the user: on every typing keystroke,\nand the value is cleared using the clear button."
711
+ },
712
+ {
713
+ "name": "opened-changed",
714
+ "description": "Fired when `opened` property value changes."
715
+ },
716
+ {
717
+ "name": "value-changed",
718
+ "description": "Fired when `value` property value changes."
719
+ }
720
+ ]
721
+ }
722
+ }
723
+ ]
724
+ }
725
+ }
726
+ }