date-time-pickerpackage.web-types.lit.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",
"framework": "lit",
"framework-config": {
"enable-when": {
"node-packages": [
"lit"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-date-time-picker",
"description": "`` is a Web Component providing a date time selection field.\n\n```html\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`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 | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`focused` | Set when the element is focused | :host\n`focus-ring` | Set when the element is keyboard focused | :host\n`readonly` | Set when the element is readonly | :host\n`invalid` | Set when the element is invalid | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\n### Internal components\n\nThe following components are created by `` 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.",
"extension": true,
"attributes": [
{
"name": "?disabled",
"description": "If true, the user cannot interact with this element.",
"value": {
"kind": "expression"
}
},
{
"name": "?invalid",
"description": "Set to true when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": "?required",
"description": "Specifies that the user must fill in a value.",
"value": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"name": "?autoOpenDisabled",
"description": "Set to true to prevent the overlays from opening automatically.",
"value": {
"kind": "expression"
}
},
{
"name": "?readonly",
"description": "Set to true to make this element read-only.",
"value": {
"kind": "expression"
}
},
{
"name": "?autofocus",
"description": "Specify that this control should have input focus when the page loads.",
"value": {
"kind": "expression"
}
},
{
"name": ".label",
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
"value": {
"kind": "expression"
}
},
{
"name": ".errorMessage",
"description": "Error to show when the field is invalid.",
"value": {
"kind": "expression"
}
},
{
"name": ".helperText",
"description": "String used for the helper text.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleName",
"description": "String used to label the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".accessibleNameRef",
"description": "Id of the element used as label of the component to screen reader users.",
"value": {
"kind": "expression"
}
},
{
"name": ".name",
"description": "The name of the control, which is submitted with the form data.",
"value": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"name": ".datePlaceholder",
"description": "A placeholder string for the date field.",
"value": {
"kind": "expression"
}
},
{
"name": ".timePlaceholder",
"description": "A placeholder string for the time field.",
"value": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"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": {
"kind": "expression"
}
},
{
"name": "@validated",
"description": "Fired whenever the field is validated.",
"value": {
"kind": "expression"
}
},
{
"name": "@change",
"description": "Fired when the user commits a value change.",
"value": {
"kind": "expression"
}
},
{
"name": "@value-changed",
"description": "Fired when the `value` property changes.",
"value": {
"kind": "expression"
}
},
{
"name": "@invalid-changed",
"description": "Fired when the `invalid` property changes.",
"value": {
"kind": "expression"
}
}
]
}
]
}
}
}