@vaadin/date-time-picker 25.3.0-dev.3a3c2d7d2a → 25.3.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.
- package/custom-elements.json +197 -36
- package/package.json +12 -12
- package/src/vaadin-date-time-picker-mixin.d.ts +65 -1
- package/src/vaadin-date-time-picker-mixin.js +140 -18
- package/src/vaadin-date-time-picker.js +1 -0
- package/web-types.json +55 -10
- 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",
|
|
@@ -984,41 +1102,25 @@
|
|
|
984
1102
|
"name": "value-changed"
|
|
985
1103
|
}
|
|
986
1104
|
],
|
|
987
|
-
"
|
|
988
|
-
{
|
|
989
|
-
"name": "DateTimePickerMixin",
|
|
990
|
-
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
991
|
-
},
|
|
992
|
-
{
|
|
993
|
-
"name": "ThemableMixin",
|
|
994
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
995
|
-
},
|
|
996
|
-
{
|
|
997
|
-
"name": "ElementMixin",
|
|
998
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
999
|
-
},
|
|
1105
|
+
"attributes": [
|
|
1000
1106
|
{
|
|
1001
|
-
"name": "
|
|
1002
|
-
"
|
|
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
|
+
}
|
|
1003
1117
|
},
|
|
1004
|
-
{
|
|
1005
|
-
"name": "LumoInjectionMixin",
|
|
1006
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1007
|
-
}
|
|
1008
|
-
],
|
|
1009
|
-
"superclass": {
|
|
1010
|
-
"name": "LitElement",
|
|
1011
|
-
"package": "lit"
|
|
1012
|
-
},
|
|
1013
|
-
"tagName": "vaadin-date-time-picker",
|
|
1014
|
-
"customElement": true,
|
|
1015
|
-
"attributes": [
|
|
1016
1118
|
{
|
|
1017
1119
|
"name": "accessible-name",
|
|
1018
1120
|
"type": {
|
|
1019
1121
|
"text": "string"
|
|
1020
1122
|
},
|
|
1021
|
-
"description": "String used to label the component
|
|
1123
|
+
"description": "String used to label the component for screen reader users.",
|
|
1022
1124
|
"fieldName": "accessibleName",
|
|
1023
1125
|
"inheritedFrom": {
|
|
1024
1126
|
"name": "FieldMixin",
|
|
@@ -1030,7 +1132,7 @@
|
|
|
1030
1132
|
"type": {
|
|
1031
1133
|
"text": "string"
|
|
1032
1134
|
},
|
|
1033
|
-
"description": "
|
|
1135
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
1034
1136
|
"fieldName": "accessibleNameRef",
|
|
1035
1137
|
"inheritedFrom": {
|
|
1036
1138
|
"name": "FieldMixin",
|
|
@@ -1061,6 +1163,18 @@
|
|
|
1061
1163
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1062
1164
|
}
|
|
1063
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
|
+
},
|
|
1064
1178
|
{
|
|
1065
1179
|
"name": "date-placeholder",
|
|
1066
1180
|
"type": {
|
|
@@ -1073,6 +1187,18 @@
|
|
|
1073
1187
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1074
1188
|
}
|
|
1075
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
|
+
},
|
|
1076
1202
|
{
|
|
1077
1203
|
"name": "disabled",
|
|
1078
1204
|
"type": {
|
|
@@ -1253,6 +1379,13 @@
|
|
|
1253
1379
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1254
1380
|
}
|
|
1255
1381
|
},
|
|
1382
|
+
{
|
|
1383
|
+
"type": {
|
|
1384
|
+
"text": "string"
|
|
1385
|
+
},
|
|
1386
|
+
"description": "The theme variants to apply to the component.",
|
|
1387
|
+
"name": "theme"
|
|
1388
|
+
},
|
|
1256
1389
|
{
|
|
1257
1390
|
"name": "time-placeholder",
|
|
1258
1391
|
"type": {
|
|
@@ -1277,7 +1410,35 @@
|
|
|
1277
1410
|
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1278
1411
|
}
|
|
1279
1412
|
}
|
|
1280
|
-
]
|
|
1413
|
+
],
|
|
1414
|
+
"mixins": [
|
|
1415
|
+
{
|
|
1416
|
+
"name": "DateTimePickerMixin",
|
|
1417
|
+
"module": "src/vaadin-date-time-picker-mixin.js"
|
|
1418
|
+
},
|
|
1419
|
+
{
|
|
1420
|
+
"name": "ThemableMixin",
|
|
1421
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1422
|
+
},
|
|
1423
|
+
{
|
|
1424
|
+
"name": "ElementMixin",
|
|
1425
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1426
|
+
},
|
|
1427
|
+
{
|
|
1428
|
+
"name": "PolylitMixin",
|
|
1429
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1430
|
+
},
|
|
1431
|
+
{
|
|
1432
|
+
"name": "LumoInjectionMixin",
|
|
1433
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1434
|
+
}
|
|
1435
|
+
],
|
|
1436
|
+
"superclass": {
|
|
1437
|
+
"name": "LitElement",
|
|
1438
|
+
"package": "lit"
|
|
1439
|
+
},
|
|
1440
|
+
"tagName": "vaadin-date-time-picker",
|
|
1441
|
+
"customElement": true
|
|
1281
1442
|
}
|
|
1282
1443
|
],
|
|
1283
1444
|
"exports": [
|
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-rc1",
|
|
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-rc1",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-rc1",
|
|
40
|
+
"@vaadin/date-picker": "25.3.0-rc1",
|
|
41
|
+
"@vaadin/field-base": "25.3.0-rc1",
|
|
42
|
+
"@vaadin/time-picker": "25.3.0-rc1",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
|
|
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-rc1",
|
|
48
|
+
"@vaadin/chai-plugins": "25.3.0-rc1",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.3.0-rc1",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
51
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
|
|
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": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
|
|
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) {
|
|
@@ -502,6 +583,12 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
502
583
|
if (!opened && this.__outsideClickInProgress) {
|
|
503
584
|
this.__commitPendingValueChange();
|
|
504
585
|
}
|
|
586
|
+
|
|
587
|
+
// In fullscreen mode focus does not return to the input on close. Clear the focused state
|
|
588
|
+
// without committing a pending value change, which is handled above on outside click only.
|
|
589
|
+
if (!opened && !this.contains(this.getRootNode().activeElement)) {
|
|
590
|
+
super._setFocused(false);
|
|
591
|
+
}
|
|
505
592
|
}
|
|
506
593
|
|
|
507
594
|
/** @private */
|
|
@@ -544,6 +631,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
544
631
|
this.datePlaceholder = newDatePicker.placeholder;
|
|
545
632
|
this.initialPosition = newDatePicker.initialPosition;
|
|
546
633
|
this.showWeekNumbers = newDatePicker.showWeekNumbers;
|
|
634
|
+
this.dateMetadataProvider = newDatePicker.dateMetadataProvider;
|
|
547
635
|
}
|
|
548
636
|
|
|
549
637
|
// Min and max are always synchronized from date time picker (host) to inner fields because time picker
|
|
@@ -662,6 +750,13 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
662
750
|
}
|
|
663
751
|
}
|
|
664
752
|
|
|
753
|
+
/** @private */
|
|
754
|
+
__dateMetadataProviderChanged(dateMetadataProvider, datePicker) {
|
|
755
|
+
if (datePicker) {
|
|
756
|
+
datePicker.dateMetadataProvider = dateMetadataProvider;
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
|
|
665
760
|
/** @private */
|
|
666
761
|
__invalidChanged(invalid, datePicker, timePicker) {
|
|
667
762
|
if (datePicker) {
|
|
@@ -780,6 +875,16 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
780
875
|
return `${dateValue}T${timeValue}`;
|
|
781
876
|
}
|
|
782
877
|
|
|
878
|
+
/**
|
|
879
|
+
* Time object to string (ISO time)
|
|
880
|
+
* @param {object} timeObj
|
|
881
|
+
* @return {string} e.g. 'hh:mm', 'hh:mm:ss', 'hh:mm:ss.fff' (depending on precision defined by "step" property)
|
|
882
|
+
* @private
|
|
883
|
+
*/
|
|
884
|
+
__formatTimeISO(timeObj) {
|
|
885
|
+
return formatISOTime(validateTime(timeObj, this.step));
|
|
886
|
+
}
|
|
887
|
+
|
|
783
888
|
/**
|
|
784
889
|
* Date object to string (ISO time)
|
|
785
890
|
* @param {Date} date
|
|
@@ -787,17 +892,40 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
787
892
|
* @private
|
|
788
893
|
*/
|
|
789
894
|
__dateToIsoTimeString(date) {
|
|
790
|
-
return
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
895
|
+
return this.__formatTimeISO({
|
|
896
|
+
hours: date.getUTCHours(),
|
|
897
|
+
minutes: date.getUTCMinutes(),
|
|
898
|
+
seconds: date.getUTCSeconds(),
|
|
899
|
+
milliseconds: date.getUTCMilliseconds(),
|
|
900
|
+
});
|
|
901
|
+
}
|
|
902
|
+
|
|
903
|
+
/**
|
|
904
|
+
* `defaultTime` to string (ISO time), or an empty string when unset or unparsable.
|
|
905
|
+
* @return {string}
|
|
906
|
+
* @private
|
|
907
|
+
*/
|
|
908
|
+
__normalizeDefaultTime() {
|
|
909
|
+
if (!this.defaultTime) {
|
|
910
|
+
return '';
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
const timeObj = parseISOTime(this.defaultTime);
|
|
914
|
+
if (!timeObj) {
|
|
915
|
+
issueWarning(
|
|
916
|
+
`<vaadin-date-time-picker> Ignored "defaultTime" that is not a valid ISO 8601 time: ${this.defaultTime}`,
|
|
917
|
+
);
|
|
918
|
+
return '';
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
return this.__formatTimeISO(timeObj);
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
/**
|
|
925
|
+
* Clears the `dateMetadataProvider` cache and reloads the date metadata.
|
|
926
|
+
*/
|
|
927
|
+
clearCache() {
|
|
928
|
+
this.__datePicker?.clearCache();
|
|
801
929
|
}
|
|
802
930
|
|
|
803
931
|
/**
|
|
@@ -969,13 +1097,7 @@ export const DateTimePickerMixin = (superClass) =>
|
|
|
969
1097
|
return;
|
|
970
1098
|
}
|
|
971
1099
|
|
|
972
|
-
[datePicker, timePicker].forEach((picker) =>
|
|
973
|
-
if (theme) {
|
|
974
|
-
picker.setAttribute('theme', theme);
|
|
975
|
-
} else {
|
|
976
|
-
picker.removeAttribute('theme');
|
|
977
|
-
}
|
|
978
|
-
});
|
|
1100
|
+
[datePicker, timePicker].forEach((picker) => setOrRemoveAttribute(picker, 'theme', theme));
|
|
979
1101
|
}
|
|
980
1102
|
|
|
981
1103
|
/** @private */
|
|
@@ -112,6 +112,7 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
|
|
|
112
112
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
113
113
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
114
114
|
*
|
|
115
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
115
116
|
* @customElement vaadin-date-time-picker
|
|
116
117
|
* @extends HTMLElement
|
|
117
118
|
*/
|
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-rc1",
|
|
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-rc1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/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.",
|
|
@@ -186,9 +204,7 @@
|
|
|
186
204
|
"description": "The theme variants to apply to the component.",
|
|
187
205
|
"value": {
|
|
188
206
|
"type": [
|
|
189
|
-
"string"
|
|
190
|
-
"null",
|
|
191
|
-
"undefined"
|
|
207
|
+
"string"
|
|
192
208
|
]
|
|
193
209
|
}
|
|
194
210
|
},
|
|
@@ -213,9 +229,18 @@
|
|
|
213
229
|
],
|
|
214
230
|
"js": {
|
|
215
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
|
+
},
|
|
216
241
|
{
|
|
217
242
|
"name": "accessibleName",
|
|
218
|
-
"description": "String used to label the component
|
|
243
|
+
"description": "String used to label the component for screen reader users.",
|
|
219
244
|
"value": {
|
|
220
245
|
"type": [
|
|
221
246
|
"string"
|
|
@@ -224,7 +249,7 @@
|
|
|
224
249
|
},
|
|
225
250
|
{
|
|
226
251
|
"name": "accessibleNameRef",
|
|
227
|
-
"description": "
|
|
252
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
228
253
|
"value": {
|
|
229
254
|
"type": [
|
|
230
255
|
"string"
|
|
@@ -249,6 +274,17 @@
|
|
|
249
274
|
]
|
|
250
275
|
}
|
|
251
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
|
+
},
|
|
252
288
|
{
|
|
253
289
|
"name": "datePlaceholder",
|
|
254
290
|
"description": "A placeholder string for the date field.",
|
|
@@ -258,6 +294,15 @@
|
|
|
258
294
|
]
|
|
259
295
|
}
|
|
260
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
|
+
},
|
|
261
306
|
{
|
|
262
307
|
"name": "disabled",
|
|
263
308
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -287,7 +332,7 @@
|
|
|
287
332
|
},
|
|
288
333
|
{
|
|
289
334
|
"name": "i18n",
|
|
290
|
-
"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-rc1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-time-picker) are supported.",
|
|
291
336
|
"value": {
|
|
292
337
|
"type": [
|
|
293
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-rc1",
|
|
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-rc1/#/elements/vaadin-date-picker).\n- [`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/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-rc1/#/elements/vaadin-date-picker) and\n[`<vaadin-time-picker>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-rc1/#/elements/vaadin-time-picker) are supported.",
|
|
81
102
|
"value": {
|
|
82
103
|
"kind": "expression"
|
|
83
104
|
}
|