All Downloads are FREE. Search and download functionalities are using the official Maven repository.

date-time-pickerpackage.web-types.lit.json Maven / Gradle / Ivy

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"
              }
            }
          ]
        }
      ]
    }
  }
}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy