@vaadin/date-time-picker 25.3.0-alpha8 → 25.3.0-beta1
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.
- package/custom-elements.json +162 -8
- package/package.json +12 -12
- package/src/vaadin-date-time-picker-mixin.d.ts +65 -1
- package/src/vaadin-date-time-picker-mixin.js +134 -18
- package/web-types.json +54 -7
- package/web-types.lit.json +26 -5
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "A mixin providing common date-time-picker functionality.",
|
|
27
27
|
"name": "DateTimePickerMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -88,6 +102,21 @@
|
|
|
88
102
|
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
89
103
|
}
|
|
90
104
|
},
|
|
105
|
+
{
|
|
106
|
+
"kind": "method",
|
|
107
|
+
"name": "clearCache",
|
|
108
|
+
"description": "Clears the `dateMetadataProvider` cache and reloads the date metadata."
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"kind": "field",
|
|
112
|
+
"name": "dateMetadataProvider",
|
|
113
|
+
"privacy": "public",
|
|
114
|
+
"type": {
|
|
115
|
+
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
116
|
+
},
|
|
117
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
118
|
+
"attribute": "date-metadata-provider"
|
|
119
|
+
},
|
|
91
120
|
{
|
|
92
121
|
"kind": "field",
|
|
93
122
|
"name": "datePlaceholder",
|
|
@@ -98,6 +127,16 @@
|
|
|
98
127
|
"description": "A placeholder string for the date field.",
|
|
99
128
|
"attribute": "date-placeholder"
|
|
100
129
|
},
|
|
130
|
+
{
|
|
131
|
+
"kind": "field",
|
|
132
|
+
"name": "defaultTime",
|
|
133
|
+
"privacy": "public",
|
|
134
|
+
"type": {
|
|
135
|
+
"text": "string"
|
|
136
|
+
},
|
|
137
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
138
|
+
"attribute": "default-time"
|
|
139
|
+
},
|
|
101
140
|
{
|
|
102
141
|
"kind": "field",
|
|
103
142
|
"name": "disabled",
|
|
@@ -340,12 +379,24 @@
|
|
|
340
379
|
}
|
|
341
380
|
],
|
|
342
381
|
"attributes": [
|
|
382
|
+
{
|
|
383
|
+
"name": "accessible-description-ref",
|
|
384
|
+
"type": {
|
|
385
|
+
"text": "string"
|
|
386
|
+
},
|
|
387
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
388
|
+
"fieldName": "accessibleDescriptionRef",
|
|
389
|
+
"inheritedFrom": {
|
|
390
|
+
"name": "FieldMixin",
|
|
391
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
392
|
+
}
|
|
393
|
+
},
|
|
343
394
|
{
|
|
344
395
|
"name": "accessible-name",
|
|
345
396
|
"type": {
|
|
346
397
|
"text": "string"
|
|
347
398
|
},
|
|
348
|
-
"description": "String used to label the component
|
|
399
|
+
"description": "String used to label the component for screen reader users.",
|
|
349
400
|
"fieldName": "accessibleName",
|
|
350
401
|
"inheritedFrom": {
|
|
351
402
|
"name": "FieldMixin",
|
|
@@ -357,7 +408,7 @@
|
|
|
357
408
|
"type": {
|
|
358
409
|
"text": "string"
|
|
359
410
|
},
|
|
360
|
-
"description": "
|
|
411
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
361
412
|
"fieldName": "accessibleNameRef",
|
|
362
413
|
"inheritedFrom": {
|
|
363
414
|
"name": "FieldMixin",
|
|
@@ -380,6 +431,14 @@
|
|
|
380
431
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
381
432
|
"fieldName": "autofocus"
|
|
382
433
|
},
|
|
434
|
+
{
|
|
435
|
+
"name": "date-metadata-provider",
|
|
436
|
+
"type": {
|
|
437
|
+
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
438
|
+
},
|
|
439
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
440
|
+
"fieldName": "dateMetadataProvider"
|
|
441
|
+
},
|
|
383
442
|
{
|
|
384
443
|
"name": "date-placeholder",
|
|
385
444
|
"type": {
|
|
@@ -388,6 +447,14 @@
|
|
|
388
447
|
"description": "A placeholder string for the date field.",
|
|
389
448
|
"fieldName": "datePlaceholder"
|
|
390
449
|
},
|
|
450
|
+
{
|
|
451
|
+
"name": "default-time",
|
|
452
|
+
"type": {
|
|
453
|
+
"text": "string"
|
|
454
|
+
},
|
|
455
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
456
|
+
"fieldName": "defaultTime"
|
|
457
|
+
},
|
|
391
458
|
{
|
|
392
459
|
"name": "disabled",
|
|
393
460
|
"type": {
|
|
@@ -602,6 +669,20 @@
|
|
|
602
669
|
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](#/elements/vaadin-time-picker).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
603
670
|
"name": "DateTimePicker",
|
|
604
671
|
"members": [
|
|
672
|
+
{
|
|
673
|
+
"kind": "field",
|
|
674
|
+
"name": "accessibleDescriptionRef",
|
|
675
|
+
"privacy": "public",
|
|
676
|
+
"type": {
|
|
677
|
+
"text": "string"
|
|
678
|
+
},
|
|
679
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
680
|
+
"attribute": "accessible-description-ref",
|
|
681
|
+
"inheritedFrom": {
|
|
682
|
+
"name": "FieldMixin",
|
|
683
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
684
|
+
}
|
|
685
|
+
},
|
|
605
686
|
{
|
|
606
687
|
"kind": "field",
|
|
607
688
|
"name": "accessibleName",
|
|
@@ -609,7 +690,7 @@
|
|
|
609
690
|
"type": {
|
|
610
691
|
"text": "string"
|
|
611
692
|
},
|
|
612
|
-
"description": "String used to label the component
|
|
693
|
+
"description": "String used to label the component for screen reader users.",
|
|
613
694
|
"attribute": "accessible-name",
|
|
614
695
|
"inheritedFrom": {
|
|
615
696
|
"name": "FieldMixin",
|
|
@@ -623,7 +704,7 @@
|
|
|
623
704
|
"type": {
|
|
624
705
|
"text": "string"
|
|
625
706
|
},
|
|
626
|
-
"description": "
|
|
707
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
627
708
|
"attribute": "accessible-name-ref",
|
|
628
709
|
"inheritedFrom": {
|
|
629
710
|
"name": "FieldMixin",
|
|
@@ -672,6 +753,29 @@
|
|
|
672
753
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
673
754
|
}
|
|
674
755
|
},
|
|
756
|
+
{
|
|
757
|
+
"kind": "method",
|
|
758
|
+
"name": "clearCache",
|
|
759
|
+
"description": "Clears the `dateMetadataProvider` cache and reloads the date metadata.",
|
|
760
|
+
"inheritedFrom": {
|
|
761
|
+
"name": "DateTimePickerMixin",
|
|
762
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
763
|
+
}
|
|
764
|
+
},
|
|
765
|
+
{
|
|
766
|
+
"kind": "field",
|
|
767
|
+
"name": "dateMetadataProvider",
|
|
768
|
+
"privacy": "public",
|
|
769
|
+
"type": {
|
|
770
|
+
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
771
|
+
},
|
|
772
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
773
|
+
"attribute": "date-metadata-provider",
|
|
774
|
+
"inheritedFrom": {
|
|
775
|
+
"name": "DateTimePickerMixin",
|
|
776
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
777
|
+
}
|
|
778
|
+
},
|
|
675
779
|
{
|
|
676
780
|
"kind": "field",
|
|
677
781
|
"name": "datePlaceholder",
|
|
@@ -686,6 +790,20 @@
|
|
|
686
790
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
687
791
|
}
|
|
688
792
|
},
|
|
793
|
+
{
|
|
794
|
+
"kind": "field",
|
|
795
|
+
"name": "defaultTime",
|
|
796
|
+
"privacy": "public",
|
|
797
|
+
"type": {
|
|
798
|
+
"text": "string"
|
|
799
|
+
},
|
|
800
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
801
|
+
"attribute": "default-time",
|
|
802
|
+
"inheritedFrom": {
|
|
803
|
+
"name": "DateTimePickerMixin",
|
|
804
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
805
|
+
}
|
|
806
|
+
},
|
|
689
807
|
{
|
|
690
808
|
"kind": "field",
|
|
691
809
|
"name": "disabled",
|
|
@@ -985,12 +1103,24 @@
|
|
|
985
1103
|
}
|
|
986
1104
|
],
|
|
987
1105
|
"attributes": [
|
|
1106
|
+
{
|
|
1107
|
+
"name": "accessible-description-ref",
|
|
1108
|
+
"type": {
|
|
1109
|
+
"text": "string"
|
|
1110
|
+
},
|
|
1111
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
1112
|
+
"fieldName": "accessibleDescriptionRef",
|
|
1113
|
+
"inheritedFrom": {
|
|
1114
|
+
"name": "FieldMixin",
|
|
1115
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
1116
|
+
}
|
|
1117
|
+
},
|
|
988
1118
|
{
|
|
989
1119
|
"name": "accessible-name",
|
|
990
1120
|
"type": {
|
|
991
1121
|
"text": "string"
|
|
992
1122
|
},
|
|
993
|
-
"description": "String used to label the component
|
|
1123
|
+
"description": "String used to label the component for screen reader users.",
|
|
994
1124
|
"fieldName": "accessibleName",
|
|
995
1125
|
"inheritedFrom": {
|
|
996
1126
|
"name": "FieldMixin",
|
|
@@ -1002,7 +1132,7 @@
|
|
|
1002
1132
|
"type": {
|
|
1003
1133
|
"text": "string"
|
|
1004
1134
|
},
|
|
1005
|
-
"description": "
|
|
1135
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1006
1136
|
"fieldName": "accessibleNameRef",
|
|
1007
1137
|
"inheritedFrom": {
|
|
1008
1138
|
"name": "FieldMixin",
|
|
@@ -1033,6 +1163,18 @@
|
|
|
1033
1163
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1034
1164
|
}
|
|
1035
1165
|
},
|
|
1166
|
+
{
|
|
1167
|
+
"name": "date-metadata-provider",
|
|
1168
|
+
"type": {
|
|
1169
|
+
"text": "DatePickerDateMetadataProvider | null | undefined"
|
|
1170
|
+
},
|
|
1171
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
1172
|
+
"fieldName": "dateMetadataProvider",
|
|
1173
|
+
"inheritedFrom": {
|
|
1174
|
+
"name": "DateTimePickerMixin",
|
|
1175
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1176
|
+
}
|
|
1177
|
+
},
|
|
1036
1178
|
{
|
|
1037
1179
|
"name": "date-placeholder",
|
|
1038
1180
|
"type": {
|
|
@@ -1045,6 +1187,18 @@
|
|
|
1045
1187
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1046
1188
|
}
|
|
1047
1189
|
},
|
|
1190
|
+
{
|
|
1191
|
+
"name": "default-time",
|
|
1192
|
+
"type": {
|
|
1193
|
+
"text": "string"
|
|
1194
|
+
},
|
|
1195
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
1196
|
+
"fieldName": "defaultTime",
|
|
1197
|
+
"inheritedFrom": {
|
|
1198
|
+
"name": "DateTimePickerMixin",
|
|
1199
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1200
|
+
}
|
|
1201
|
+
},
|
|
1048
1202
|
{
|
|
1049
1203
|
"name": "disabled",
|
|
1050
1204
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/date-time-picker",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,20 +35,20 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.3.0-
|
|
39
|
-
"@vaadin/component-base": "25.3.0-
|
|
40
|
-
"@vaadin/date-picker": "25.3.0-
|
|
41
|
-
"@vaadin/field-base": "25.3.0-
|
|
42
|
-
"@vaadin/time-picker": "25.3.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-beta1",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-beta1",
|
|
40
|
+
"@vaadin/date-picker": "25.3.0-beta1",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-beta1",
|
|
42
|
+
"@vaadin/time-picker": "25.3.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-beta1",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vaadin/aura": "25.3.0-
|
|
48
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
47
|
+
"@vaadin/aura": "25.3.0-beta1",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-beta1",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-beta1",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-beta1",
|
|
52
52
|
"sinon": "^22.0.0"
|
|
53
53
|
},
|
|
54
54
|
"customElements": "custom-elements.json",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "295432e44a6967e1aff36462b2e3e1d0e64eb8cc"
|
|
60
60
|
}
|
|
@@ -7,7 +7,7 @@ import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
|
7
7
|
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
8
8
|
import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
9
9
|
import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
10
|
-
import type { DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
10
|
+
import type { DatePickerDateMetadataProvider, DatePickerI18n } from '@vaadin/date-picker/src/vaadin-date-picker.js';
|
|
11
11
|
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
12
12
|
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
13
13
|
import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
|
|
@@ -119,6 +119,25 @@ export declare class DateTimePickerMixinClass {
|
|
|
119
119
|
*/
|
|
120
120
|
initialPosition: string | null | undefined;
|
|
121
121
|
|
|
122
|
+
/**
|
|
123
|
+
* The time part to set automatically when the user commits a date while
|
|
124
|
+
* the time picker is empty.
|
|
125
|
+
*
|
|
126
|
+
* Supports same time formats as the `value` property, without the date
|
|
127
|
+
* part. Precision exceeding the one defined by `step` is discarded,
|
|
128
|
+
* e.g. `09:30:45` is applied as `09:30` with the default `step`.
|
|
129
|
+
*
|
|
130
|
+
* The time part is set when a date is committed while the time picker
|
|
131
|
+
* is empty — never for programmatic or initial values. A value outside
|
|
132
|
+
* `min` / `max` is applied as-is and makes the field invalid.
|
|
133
|
+
*
|
|
134
|
+
* When not set, selecting a date leaves the time part empty. A string
|
|
135
|
+
* that is not a valid ISO 8601 time is ignored and logs a warning.
|
|
136
|
+
*
|
|
137
|
+
* @attr {string} default-time
|
|
138
|
+
*/
|
|
139
|
+
defaultTime: string | null | undefined;
|
|
140
|
+
|
|
122
141
|
/**
|
|
123
142
|
* Set true to display ISO-8601 week numbers in the calendar. Notice that
|
|
124
143
|
* displaying week numbers is only supported when `i18n.firstDayOfWeek`
|
|
@@ -127,6 +146,46 @@ export declare class DateTimePickerMixinClass {
|
|
|
127
146
|
*/
|
|
128
147
|
showWeekNumbers: boolean | null | undefined;
|
|
129
148
|
|
|
149
|
+
/**
|
|
150
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
151
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
152
|
+
* The provider is called for a range of dates at a time, and again as the calendar renders
|
|
153
|
+
* further dates.
|
|
154
|
+
*
|
|
155
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
156
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
157
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
158
|
+
*
|
|
159
|
+
* The returned array has the following structure:
|
|
160
|
+
*
|
|
161
|
+
* ```js
|
|
162
|
+
* [
|
|
163
|
+
* // The date is an ISO 8601 string.
|
|
164
|
+
* { date: '2026-01-01', disabled: true },
|
|
165
|
+
*
|
|
166
|
+
* // Adds a custom part name to the date.
|
|
167
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
168
|
+
* ]
|
|
169
|
+
* ```
|
|
170
|
+
*
|
|
171
|
+
* A date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.
|
|
172
|
+
* Disabled dates are not selectable, and a value on a disabled date makes the field invalid.
|
|
173
|
+
* The provider does not affect which date is focused when opening the overlay. Use
|
|
174
|
+
* `initialPosition` property to provide a selectable date.
|
|
175
|
+
*
|
|
176
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
177
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
178
|
+
* the next time the user navigates.
|
|
179
|
+
*
|
|
180
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
181
|
+
* while the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated
|
|
182
|
+
* when the metadata is loaded, but checked against it at the next validation instead.
|
|
183
|
+
*
|
|
184
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
185
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
186
|
+
*/
|
|
187
|
+
dateMetadataProvider: DatePickerDateMetadataProvider | null | undefined;
|
|
188
|
+
|
|
130
189
|
/**
|
|
131
190
|
* Set to true to prevent the overlays from opening automatically.
|
|
132
191
|
* @attr {boolean} auto-open-disabled
|
|
@@ -171,4 +230,9 @@ export declare class DateTimePickerMixinClass {
|
|
|
171
230
|
* [`<vaadin-time-picker>`](#/elements/vaadin-time-picker) are supported.
|
|
172
231
|
*/
|
|
173
232
|
i18n: DateTimePickerI18n;
|
|
233
|
+
|
|
234
|
+
/**
|
|
235
|
+
* Clears the `dateMetadataProvider` cache and reloads the date metadata.
|
|
236
|
+
*/
|
|
237
|
+
clearCache(): void;
|
|
174
238
|
}
|
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
7
7
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
8
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
8
9
|
import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
9
10
|
import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
|
|
10
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
|
+
import { issueWarning } from '@vaadin/component-base/src/warnings.js';
|
|
11
13
|
import {
|
|
12
14
|
dateEquals,
|
|
13
15
|
formatUTCISODate,
|
|
@@ -168,6 +170,28 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
168
170
|
sync: true,
|
|
169
171
|
},
|
|
170
172
|
|
|
173
|
+
/**
|
|
174
|
+
* The time part to set automatically when the user commits a date while
|
|
175
|
+
* the time picker is empty.
|
|
176
|
+
*
|
|
177
|
+
* Supports same time formats as the `value` property, without the date
|
|
178
|
+
* part. Precision exceeding the one defined by `step` is discarded,
|
|
179
|
+
* e.g. `09:30:45` is applied as `09:30` with the default `step`.
|
|
180
|
+
*
|
|
181
|
+
* The time part is set when a date is committed while the time picker
|
|
182
|
+
* is empty — never for programmatic or initial values. A value outside
|
|
183
|
+
* `min` / `max` is applied as-is and makes the field invalid.
|
|
184
|
+
*
|
|
185
|
+
* When not set, selecting a date leaves the time part empty. A string
|
|
186
|
+
* that is not a valid ISO 8601 time is ignored and logs a warning.
|
|
187
|
+
*
|
|
188
|
+
* @attr {string} default-time
|
|
189
|
+
*/
|
|
190
|
+
defaultTime: {
|
|
191
|
+
type: String,
|
|
192
|
+
sync: true,
|
|
193
|
+
},
|
|
194
|
+
|
|
171
195
|
/**
|
|
172
196
|
* Set true to display ISO-8601 week numbers in the calendar. Notice that
|
|
173
197
|
* displaying week numbers is only supported when `i18n.firstDayOfWeek`
|
|
@@ -180,6 +204,51 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
180
204
|
sync: true,
|
|
181
205
|
},
|
|
182
206
|
|
|
207
|
+
/**
|
|
208
|
+
* A function that provides metadata for the dates the calendar is about to render: whether they
|
|
209
|
+
* are disabled, and CSS `part` names for styling from outside using the `::part()` selector.
|
|
210
|
+
* The provider is called for a range of dates at a time, and again as the calendar renders
|
|
211
|
+
* further dates.
|
|
212
|
+
*
|
|
213
|
+
* It receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects
|
|
214
|
+
* for the dates in that range that have metadata. It can return a `Promise` to load the metadata
|
|
215
|
+
* asynchronously, and `null` or `undefined` when no date in the range has metadata.
|
|
216
|
+
*
|
|
217
|
+
* The returned array has the following structure:
|
|
218
|
+
*
|
|
219
|
+
* ```js
|
|
220
|
+
* [
|
|
221
|
+
* // The date is an ISO 8601 string.
|
|
222
|
+
* { date: '2026-01-01', disabled: true },
|
|
223
|
+
*
|
|
224
|
+
* // Adds a custom part name to the date.
|
|
225
|
+
* { date: '2026-01-02', part: 'busy' },
|
|
226
|
+
* ]
|
|
227
|
+
* ```
|
|
228
|
+
*
|
|
229
|
+
* A date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.
|
|
230
|
+
* Disabled dates are not selectable, and a value on a disabled date makes the field invalid.
|
|
231
|
+
* The provider does not affect which date is focused when opening the overlay. Use
|
|
232
|
+
* `initialPosition` property to provide a selectable date.
|
|
233
|
+
*
|
|
234
|
+
* While a returned `Promise` is pending, the dates it covers are not disabled yet and render with
|
|
235
|
+
* the `loading` part. If the function throws or rejects, corresponding dates are requested again
|
|
236
|
+
* the next time the user navigates.
|
|
237
|
+
*
|
|
238
|
+
* The provider is used for validation also when the overlay is closed. Date is considered valid
|
|
239
|
+
* while the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated
|
|
240
|
+
* when the metadata is loaded, but checked against it at the next validation instead.
|
|
241
|
+
*
|
|
242
|
+
* Keep a stable reference to the function: assigning a new one clears the cache and re-fetches
|
|
243
|
+
* visible range. Call `clearCache()` to re-fetch when the data behind the same function changed.
|
|
244
|
+
*
|
|
245
|
+
* @type {DatePickerDateMetadataProvider | null | undefined}
|
|
246
|
+
*/
|
|
247
|
+
dateMetadataProvider: {
|
|
248
|
+
type: Function,
|
|
249
|
+
sync: true,
|
|
250
|
+
},
|
|
251
|
+
|
|
183
252
|
/**
|
|
184
253
|
* Set to true to prevent the overlays from opening automatically.
|
|
185
254
|
* @attr {boolean} auto-open-disabled
|
|
@@ -245,6 +314,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
245
314
|
'__stepChanged(step, __timePicker)',
|
|
246
315
|
'__initialPositionChanged(initialPosition, __datePicker)',
|
|
247
316
|
'__showWeekNumbersChanged(showWeekNumbers, __datePicker)',
|
|
317
|
+
'__dateMetadataProviderChanged(dateMetadataProvider, __datePicker)',
|
|
248
318
|
'__requiredChanged(required, __datePicker, __timePicker)',
|
|
249
319
|
'__invalidChanged(invalid, __datePicker, __timePicker)',
|
|
250
320
|
'__disabledChanged(disabled, __datePicker, __timePicker)',
|
|
@@ -479,6 +549,17 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
479
549
|
__changeEventHandler(event) {
|
|
480
550
|
event.stopPropagation();
|
|
481
551
|
|
|
552
|
+
if (
|
|
553
|
+
event.target === this.__datePicker &&
|
|
554
|
+
this.__datePicker.value &&
|
|
555
|
+
!(this.__timePicker.value || this.__timePicker.__unparsableValue)
|
|
556
|
+
) {
|
|
557
|
+
const defaultTime = this.__normalizeDefaultTime();
|
|
558
|
+
if (defaultTime) {
|
|
559
|
+
this.__timePicker.value = defaultTime;
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
|
|
482
563
|
const isAlreadyInvalid = this.invalid;
|
|
483
564
|
const filledPickers = this.__filledPickers;
|
|
484
565
|
if (filledPickers.length === 1 && filledPickers[0].checkValidity() && !isAlreadyInvalid) {
|
|
@@ -544,6 +625,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
544
625
|
this.datePlaceholder = newDatePicker.placeholder;
|
|
545
626
|
this.initialPosition = newDatePicker.initialPosition;
|
|
546
627
|
this.showWeekNumbers = newDatePicker.showWeekNumbers;
|
|
628
|
+
this.dateMetadataProvider = newDatePicker.dateMetadataProvider;
|
|
547
629
|
}
|
|
548
630
|
|
|
549
631
|
// Min and max are always synchronized from date time picker (host) to inner fields because time picker
|
|
@@ -662,6 +744,13 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
662
744
|
}
|
|
663
745
|
}
|
|
664
746
|
|
|
747
|
+
/** @private */
|
|
748
|
+
__dateMetadataProviderChanged(dateMetadataProvider, datePicker) {
|
|
749
|
+
if (datePicker) {
|
|
750
|
+
datePicker.dateMetadataProvider = dateMetadataProvider;
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
|
|
665
754
|
/** @private */
|
|
666
755
|
__invalidChanged(invalid, datePicker, timePicker) {
|
|
667
756
|
if (datePicker) {
|
|
@@ -780,6 +869,16 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
780
869
|
return `${dateValue}T${timeValue}`;
|
|
781
870
|
}
|
|
782
871
|
|
|
872
|
+
/**
|
|
873
|
+
* Time object to string (ISO time)
|
|
874
|
+
* @param {object} timeObj
|
|
875
|
+
* @return {string} e.g. 'hh:mm', 'hh:mm:ss', 'hh:mm:ss.fff' (depending on precision defined by "step" property)
|
|
876
|
+
* @private
|
|
877
|
+
*/
|
|
878
|
+
__formatTimeISO(timeObj) {
|
|
879
|
+
return formatISOTime(validateTime(timeObj, this.step));
|
|
880
|
+
}
|
|
881
|
+
|
|
783
882
|
/**
|
|
784
883
|
* Date object to string (ISO time)
|
|
785
884
|
* @param {Date} date
|
|
@@ -787,17 +886,40 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
787
886
|
* @private
|
|
788
887
|
*/
|
|
789
888
|
__dateToIsoTimeString(date) {
|
|
790
|
-
return
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
889
|
+
return this.__formatTimeISO({
|
|
890
|
+
hours: date.getUTCHours(),
|
|
891
|
+
minutes: date.getUTCMinutes(),
|
|
892
|
+
seconds: date.getUTCSeconds(),
|
|
893
|
+
milliseconds: date.getUTCMilliseconds(),
|
|
894
|
+
});
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
/**
|
|
898
|
+
* `defaultTime` to string (ISO time), or an empty string when unset or unparsable.
|
|
899
|
+
* @return {string}
|
|
900
|
+
* @private
|
|
901
|
+
*/
|
|
902
|
+
__normalizeDefaultTime() {
|
|
903
|
+
if (!this.defaultTime) {
|
|
904
|
+
return '';
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
const timeObj = parseISOTime(this.defaultTime);
|
|
908
|
+
if (!timeObj) {
|
|
909
|
+
issueWarning(
|
|
910
|
+
`<vaadin-date-time-picker> Ignored "defaultTime" that is not a valid ISO 8601 time: ${this.defaultTime}`,
|
|
911
|
+
);
|
|
912
|
+
return '';
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
return this.__formatTimeISO(timeObj);
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
/**
|
|
919
|
+
* Clears the `dateMetadataProvider` cache and reloads the date metadata.
|
|
920
|
+
*/
|
|
921
|
+
clearCache() {
|
|
922
|
+
this.__datePicker?.clearCache();
|
|
801
923
|
}
|
|
802
924
|
|
|
803
925
|
/**
|
|
@@ -969,13 +1091,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
969
1091
|
return;
|
|
970
1092
|
}
|
|
971
1093
|
|
|
972
|
-
[datePicker, timePicker].forEach((picker) =>
|
|
973
|
-
if (theme) {
|
|
974
|
-
picker.setAttribute('theme', theme);
|
|
975
|
-
} else {
|
|
976
|
-
picker.removeAttribute('theme');
|
|
977
|
-
}
|
|
978
|
-
});
|
|
1094
|
+
[datePicker, timePicker].forEach((picker) => setOrRemoveAttribute(picker, 'theme', theme));
|
|
979
1095
|
}
|
|
980
1096
|
|
|
981
1097
|
/** @private */
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-date-time-picker",
|
|
11
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
11
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-time-picker).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -55,6 +64,15 @@
|
|
|
55
64
|
]
|
|
56
65
|
}
|
|
57
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"name": "default-time",
|
|
69
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
70
|
+
"value": {
|
|
71
|
+
"type": [
|
|
72
|
+
"string"
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
58
76
|
{
|
|
59
77
|
"name": "disabled",
|
|
60
78
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -211,9 +229,18 @@
|
|
|
211
229
|
],
|
|
212
230
|
"js": {
|
|
213
231
|
"properties": [
|
|
232
|
+
{
|
|
233
|
+
"name": "accessibleDescriptionRef",
|
|
234
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
235
|
+
"value": {
|
|
236
|
+
"type": [
|
|
237
|
+
"string"
|
|
238
|
+
]
|
|
239
|
+
}
|
|
240
|
+
},
|
|
214
241
|
{
|
|
215
242
|
"name": "accessibleName",
|
|
216
|
-
"description": "String used to label the component
|
|
243
|
+
"description": "String used to label the component for screen reader users.",
|
|
217
244
|
"value": {
|
|
218
245
|
"type": [
|
|
219
246
|
"string"
|
|
@@ -222,7 +249,7 @@
|
|
|
222
249
|
},
|
|
223
250
|
{
|
|
224
251
|
"name": "accessibleNameRef",
|
|
225
|
-
"description": "
|
|
252
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
226
253
|
"value": {
|
|
227
254
|
"type": [
|
|
228
255
|
"string"
|
|
@@ -247,6 +274,17 @@
|
|
|
247
274
|
]
|
|
248
275
|
}
|
|
249
276
|
},
|
|
277
|
+
{
|
|
278
|
+
"name": "dateMetadataProvider",
|
|
279
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
280
|
+
"value": {
|
|
281
|
+
"type": [
|
|
282
|
+
"DatePickerDateMetadataProvider",
|
|
283
|
+
"null",
|
|
284
|
+
"undefined"
|
|
285
|
+
]
|
|
286
|
+
}
|
|
287
|
+
},
|
|
250
288
|
{
|
|
251
289
|
"name": "datePlaceholder",
|
|
252
290
|
"description": "A placeholder string for the date field.",
|
|
@@ -256,6 +294,15 @@
|
|
|
256
294
|
]
|
|
257
295
|
}
|
|
258
296
|
},
|
|
297
|
+
{
|
|
298
|
+
"name": "defaultTime",
|
|
299
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
300
|
+
"value": {
|
|
301
|
+
"type": [
|
|
302
|
+
"string"
|
|
303
|
+
]
|
|
304
|
+
}
|
|
305
|
+
},
|
|
259
306
|
{
|
|
260
307
|
"name": "disabled",
|
|
261
308
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -285,7 +332,7 @@
|
|
|
285
332
|
},
|
|
286
333
|
{
|
|
287
334
|
"name": "i18n",
|
|
288
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
335
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-time-picker) are supported.",
|
|
289
336
|
"value": {
|
|
290
337
|
"type": [
|
|
291
338
|
"Object"
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/date-time-picker",
|
|
4
|
-
"version": "25.3.0-
|
|
4
|
+
"version": "25.3.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,19 +16,26 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-date-time-picker",
|
|
19
|
-
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
19
|
+
"description": "`<vaadin-date-time-picker>` is a Web Component providing a date time selection field.\n\n```html\n<vaadin-date-time-picker value=\"2019-09-16T15:00\"></vaadin-date-time-picker>\n```\n```js\ndateTimePicker.value = '2019-09-16T15:00';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`input-fields` | The date and time pickers wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`invalid` | Set when the element is invalid\n`has-label` | Set when the element has a label\n`has-value` | Set when the element has a value\n`has-helper` | Set when the element has helper text\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-date-time-picker-gap` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-required-indicator` |\n\n### Internal components\n\nThe following components are created by `<vaadin-date-time-picker>` and placed in light DOM:\n\n- [`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-time-picker).\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change\nincomplete => empty | unparsable-change\nincomplete => parsable | change\nincomplete => unparsable | unparsable-change\nempty => incomplete | unparsable-change\nparsable => incomplete | change\nunparsable => incomplete | unparsable-change",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -47,6 +54,13 @@
|
|
|
47
54
|
"kind": "expression"
|
|
48
55
|
}
|
|
49
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": ".dateMetadataProvider",
|
|
59
|
+
"description": "A function that provides metadata for the dates the calendar is about to render: whether they\nare disabled, and CSS `part` names for styling from outside using the `::part()` selector.\nThe provider is called for a range of dates at a time, and again as the calendar renders\nfurther dates.\n\nIt receives a `DatePickerDateRange` and returns an array of `DatePickerDateMetadata` objects\nfor the dates in that range that have metadata. It can return a `Promise` to load the metadata\nasynchronously, and `null` or `undefined` when no date in the range has metadata.\n\nThe returned array has the following structure:\n\n```js\n[\n // The date is an ISO 8601 string.\n { date: '2026-01-01', disabled: true },\n\n // Adds a custom part name to the date.\n { date: '2026-01-02', part: 'busy' },\n]\n```\n\nA date is disabled if its metadata marks it disabled, or it is outside `min` and `max`.\nDisabled dates are not selectable, and a value on a disabled date makes the field invalid.\nThe provider does not affect which date is focused when opening the overlay. Use\n`initialPosition` property to provide a selectable date.\n\nWhile a returned `Promise` is pending, the dates it covers are not disabled yet and render with\nthe `loading` part. If the function throws or rejects, corresponding dates are requested again\nthe next time the user navigates.\n\nThe provider is used for validation also when the overlay is closed. Date is considered valid\nwhile the provider is pending. Unlike `<vaadin-date-picker>`, the value is not re-validated\nwhen the metadata is loaded, but checked against it at the next validation instead.\n\nKeep a stable reference to the function: assigning a new one clears the cache and re-fetches\nvisible range. Call `clearCache()` to re-fetch when the data behind the same function changed.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
50
64
|
{
|
|
51
65
|
"name": ".datePlaceholder",
|
|
52
66
|
"description": "A placeholder string for the date field.",
|
|
@@ -54,6 +68,13 @@
|
|
|
54
68
|
"kind": "expression"
|
|
55
69
|
}
|
|
56
70
|
},
|
|
71
|
+
{
|
|
72
|
+
"name": ".defaultTime",
|
|
73
|
+
"description": "The time part to set automatically when the user commits a date while\nthe time picker is empty.\n\nSupports same time formats as the `value` property, without the date\npart. Precision exceeding the one defined by `step` is discarded,\ne.g. `09:30:45` is applied as `09:30` with the default `step`.\n\nThe time part is set when a date is committed while the time picker\nis empty — never for programmatic or initial values. A value outside\n`min` / `max` is applied as-is and makes the field invalid.\n\nWhen not set, selecting a date leaves the time part empty. A string\nthat is not a valid ISO 8601 time is ignored and logs a warning.",
|
|
74
|
+
"value": {
|
|
75
|
+
"kind": "expression"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
57
78
|
{
|
|
58
79
|
"name": "?disabled",
|
|
59
80
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -77,7 +98,7 @@
|
|
|
77
98
|
},
|
|
78
99
|
{
|
|
79
100
|
"name": ".i18n",
|
|
80
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-
|
|
101
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n\n```js\n{\n // Accessible label to the date picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n dateLabel: undefined;\n\n // Accessible label to the time picker.\n // The property works in conjunction with label and accessibleName defined on the field.\n // If both properties are defined, then accessibleName takes precedence.\n // Then, the dateLabel value is concatenated with it.\n timeLabel: undefined;\n}\n```\n\nAdditionally, all i18n properties from\n[`<vaadin-date-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-beta1/#/elements/vaadin-time-picker) are supported.",
|
|
81
102
|
"value": {
|
|
82
103
|
"kind": "expression"
|
|
83
104
|
}
|