date-time-pickerpackage.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/date-time-picker",
"version": "24.5.3",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-date-time-picker",
"description": "`` is a Web Component providing a date time selection field.\n\n```html\n` and placed in light DOM:\n\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-date-picker).\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-time-picker).\n\nNote: the `theme` attribute value set on `` is\npropagated to these components.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helper-text",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessible-name-ref",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of the control, which is submitted with the form data.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string"
]
}
},
{
"name": "min",
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string",
"undefined"
]
}
},
{
"name": "max",
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string",
"undefined"
]
}
},
{
"name": "date-placeholder",
"description": "A placeholder string for the date field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "time-placeholder",
"description": "A placeholder string for the time field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "step",
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "initial-position",
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "show-week-numbers",
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "auto-open-disabled",
"description": "Set to true to prevent the overlays from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "Set to true to make this element read-only.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "overlay-class",
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the ``:\n\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-date-picker#property-overlayClass)\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-time-picker#property-overlayClass)",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "invalid",
"description": "Set to true when the field is invalid.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "required",
"description": "Specifies that the user must fill in a value.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "helperText",
"description": "String used for the helper text.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "name",
"description": "The name of the control, which is submitted with the form data.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "value",
"description": "The value for this element.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"` (default)\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string"
]
}
},
{
"name": "min",
"description": "The earliest allowed value (date and time) that can be selected. All earlier values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string",
"undefined"
]
}
},
{
"name": "max",
"description": "The latest value (date and time) that can be selected. All later values will be disabled.\n\nSupported date time format is based on ISO 8601 (without a time zone designator):\n- Minute precision `\"YYYY-MM-DDThh:mm\"`\n- Second precision `\"YYYY-MM-DDThh:mm:ss\"`\n- Millisecond precision `\"YYYY-MM-DDThh:mm:ss.fff\"`",
"value": {
"type": [
"string",
"undefined"
]
}
},
{
"name": "datePlaceholder",
"description": "A placeholder string for the date field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "timePlaceholder",
"description": "A placeholder string for the time field.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "step",
"description": "Defines the time interval (in seconds) between the items displayed\nin the time selection box. The default is 1 hour (i.e. `3600`).\n\nIt also configures the precision of the time part of the value string. By default\nthe component formats time values as `hh:mm` but setting a step value\nlower than one minute or one second, format resolution changes to\n`hh:mm:ss` and `hh:mm:ss.fff` respectively.\n\nUnit must be set in seconds, and for correctly configuring intervals\nin the dropdown, it need to evenly divide a day.\n\nNote: it is possible to define step that is dividing an hour in inexact\nfragments (i.e. 5760 seconds which equals 1 hour 36 minutes), but it is\nnot recommended to use it for better UX.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "initialPosition",
"description": "Date which should be visible in the date picker overlay when there is no value selected.\n\nThe same date formats as for the `value` property are supported but without the time part.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "showWeekNumbers",
"description": "Set true to display ISO-8601 week numbers in the calendar. Notice that\ndisplaying week numbers is only supported when `i18n.firstDayOfWeek`\nis 1 (Monday).",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "autoOpenDisabled",
"description": "Set to true to prevent the overlays from opening automatically.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "readonly",
"description": "Set to true to make this element read-only.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "i18n",
"description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object or just the properties you want to modify.\n\nThe object is a combination of the i18n properties supported by\n[``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-date-picker) and\n[``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-time-picker).",
"value": {
"type": [
"DateTimePickerI18n"
]
}
},
{
"name": "overlayClass",
"description": "A space-delimited list of CSS class names to set on the overlay elements\nof the internal components controlled by the ``:\n\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-date-picker#property-overlayClass)\n- [``](https://cdn.vaadin.com/vaadin-web-components/24.5.3/#/elements/vaadin-time-picker#property-overlayClass)",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "validated",
"description": "Fired whenever the field is validated."
},
{
"name": "change",
"description": "Fired when the user commits a value change."
},
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
},
{
"name": "invalid-changed",
"description": "Fired when the `invalid` property changes."
}
]
}
}
]
}
}
}