{ "tag": "ed-date-picker", "kind": "component", "summary": "Date pickers let users choose a point on the calendar or the clock — a day, a time, both\nat once, or a week, month, quarter, half-year or year — by typing it into a segmented field or\npicking it from a calendar.", "status": "experimental", "since": "1.0", "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/date-picker/", "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/date-picker/usage/", "playwright": "getByTestId('…')", "dependencies": [ "ed-button", "ed-calendar", "ed-icon", "ed-popup" ], "use": [ "Entering a posting date, invoice date or due date in a form, by typing it or picking it from a calendar", "Selecting a reporting period — a month, quarter, half-year or year — for a report or filter", "Choosing a start and end date, such as a payroll or accounting period, in one field", "Entering a date and a time together, such as a deadline or an appointment" ], "notFor": [ { "when": "The calendar grid should stay permanently visible inline rather than in a panel", "instead": "[Calendar](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/calendar)" }, { "when": "Choosing from a few fixed dates such as month-end or quarter-end", "instead": "a [Select](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/select)" } ], "rules": [ { "id": "date-picker/keep-typing-and-panel", "rule": "Keep typing enabled, so users can enter distant or already-known values without paging through the panel. Lock typing off with `picker-only` only when free-form entry genuinely cannot be allowed, and take the panel away with `input-only` only when the values are always known by heart — reach for either only when that route genuinely must not exist.", "why": "The picker's value is that a user can either type a value (fastest for far-off or well-known dates) or browse the panel (best for nearby dates they need to see in context).", "check": "warning" }, { "id": "date-picker/type-matches-the-figure", "rule": "Set `type` to what is actually being reported — a month picker for a monthly figure, a quarter picker for a quarterly one — rather than a day picker whose day nobody reads." }, { "id": "date-picker/range-only-for-dates", "rule": "Use `range` only with `type=\"date\"` — elsewhere the attribute is ignored with a warning.", "why": "A span of quarters and a span of clock times are each their own question.", "check": "error", "covered": true }, { "id": "date-picker/bounds-in-the-value-form", "rule": "Restrict selection with `min` and `max`, in the same form as the value — a month picker takes `min=\"2026-03\"`, not a day.", "check": "error", "covered": true }, { "id": "date-picker/bounds-per-half", "rule": "Give a range's halves their own bounds with `start-min` / `start-max` / `end-min` / `end-max` when the two ends follow different rules, such as a booking window that opens later than it closes." }, { "id": "date-picker/is-disabled-for-exceptions", "rule": "Disable individual values with `isDisabled` when no interval expresses the rule — weekends, holidays, days already booked." }, { "id": "date-picker/default-month", "rule": "Open the panel on a sensible month with `default-month` when the field is empty and the form knows the likely choice better than today does." }, { "id": "date-picker/visible-label", "rule": "Give the field a persistent, visible label — never rely on the segment placeholders alone.", "check": "error" }, { "id": "date-picker/name-the-halves", "rule": "Name a range's halves with `label-start` / `label-end` when \"from\" and \"until\" are not what your users call them — check-in and check-out, agreed and expiry." }, { "id": "date-picker/required", "rule": "Set `required` on mandatory fields, and `start-required` / `end-required` when only one half is mandatory." }, { "id": "date-picker/specific-errors", "rule": "Override the validation message with one that names the broken rule when precision helps, and never write vague error messages such as \"Invalid date\" or \"Error\".", "why": "The built-in messages cover every standard violation but stay generic.", "check": "error" }, { "id": "date-picker/error-timing", "rule": "Never show a validation error before the user has interacted with the field — on page load or on focus alone. Don't add your own timing — the component surfaces errors on blur or on submit.", "check": "error" }, { "id": "date-picker/confirm-high-stakes", "rule": "Use `confirm` for high-stakes values, so a stray click does not commit immediately. A clock confirms by default, because one pick cannot finish an hour and a minute." }, { "id": "date-picker/readonly-not-disabled", "rule": "Use `readonly` for a value the user can never change, and `disabled` only when it could become editable under some condition — `disabled` implies it could be unlocked. `start-readonly` / `end-readonly` fix one half of a range while the other stays editable. Never switch a half off with `start-disabled` when the value should still reach the server.", "why": "A disabled half submits nothing, which is what the platform does; `start-readonly` submits it." }, { "id": "date-picker/warning-for-advice", "rule": "Use the advisory warning state for a \"double-check this\" note that should not block submission." }, { "id": "date-picker/ai-suggested", "rule": "Use the AI-suggested state to flag a value the system pre-filled, so users can tell it apart from their own entries." }, { "id": "date-picker/value-is-a-string", "rule": "Never write a `Date` into `value` — the value is a string in the form its type writes, exactly as `input.value` is always a string. Read `valueAsDate` when you need an instant.", "check": "error" }, { "id": "date-picker/min-width", "rule": "Keep the field at least 8.75rem (140px) wide, and a range at least 12.5rem (200px).", "why": "Below that a range's two fields spill past their border.", "check": "error" }, { "id": "date-picker/default-density", "rule": "Keep `density` at its default, and the same for every control in one row or form. Choose `compact` for a control in a [Data Grid](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/data-grid) cell — never in the grid's toolbar, which keeps the default of the grid's own search. Elsewhere choose `compact` or `spacious` only deliberately, for a whole layout that is tighter or looser — never to fine-tune spacing case by case.", "why": "The default suits standard forms; it is the intended spacing for almost every screen.", "check": "warning" } ], "api": { "attributes": [ { "name": "value", "property": "defaultValue", "type": "string", "description": "The default value used for form reset." }, { "name": "type", "property": "type", "type": "'datetime' | 'year' | 'month' | 'quarter' | 'week' | 'date' | 'halfyear' | 'time'", "default": "'date'", "description": "What is being chosen. It decides which segments the field shows, what the calendar renders, and\nwhich wire format value is written in — not how the value is shaped in the DOM, which is\nalways a string.\n\nChanging it drops a value the new type cannot read, which is what a native field does on the\nsame change: measured in Chromium, `` switched to\n`type=\"month\"` reports `''`." }, { "name": "required", "property": "required", "type": "boolean", "default": "false", "description": "Makes the picker required for form submission." }, { "name": "readonly", "property": "readonly", "type": "boolean", "default": "false", "description": "Allows the calendar to open but blocks typing and stepping." }, { "name": "with-clear", "property": "withClear", "type": "boolean", "default": "false", "description": "Adds a button that empties the field, and makes Escape empty it." }, { "name": "density", "property": "density", "type": "'compact' | 'default' | 'spacious'", "default": "'default'", "description": "Controls the component's spacing density without affecting font-size." }, { "name": "pill", "property": "pill", "type": "boolean", "default": "false", "description": "Draws a pill-style field with rounded edges." }, { "name": "label", "property": "label", "type": "string", "default": "''", "description": "The picker's label. If you need to display HTML, use the `label` slot instead." }, { "name": "min", "property": "min", "type": "string", "default": "''", "description": "Earliest selectable value, in the same form as value. A bound of a different kind is\nignored rather than approximated — measured, that is what a native field does." }, { "name": "max", "property": "max", "type": "string", "default": "''", "description": "Latest selectable value, in the same form as value." }, { "name": "start-min", "property": "startMin", "type": "string", "default": "''", "description": "The earliest value the first half of a range accepts, where it differs from `min`.\n\nTwo halves of one control can carry different rules — a booking window that opens later than\nit closes, a contract that may not start before today. A half that says nothing of its own is\njudged by `min` and `max`, so the shared pair stays the floor and the ceiling for both.\n\nRead only with `range` set, and only in the wire form the current `type` writes." }, { "name": "start-max", "property": "startMax", "type": "string", "default": "''", "description": "The latest value the first half accepts. See startMin." }, { "name": "end-min", "property": "endMin", "type": "string", "default": "''", "description": "The earliest value the second half accepts. See startMin." }, { "name": "end-max", "property": "endMax", "type": "string", "default": "''", "description": "The latest value the second half accepts. See startMin." }, { "name": "start-required", "property": "startRequired", "type": "boolean", "default": "false", "description": "Ask for the first half of a range on its own.\n\n`required` asks for the value the control reports, which for a range is its start. The second\nhalf is its own question: \"valid from X, indefinitely\" is an ordinary value in one form and a\nmissing entry in the next, and only the form knows which." }, { "name": "end-required", "property": "endRequired", "type": "boolean", "default": "false", "description": "Ask for the second half of a range on its own. See startRequired." }, { "name": "start-disabled", "property": "startDisabled", "type": "boolean", "default": "false", "description": "Switch the first half of a range off: no typing, out of the tab order, its own panel button\ndisabled, and — as a native disabled control does — nothing submitted for it and nothing\nvalidated against it.\n\nFor a span with one end that is not in play. Where the end is fixed rather than absent, reach\nfor startReadonly instead: that one is still submitted." }, { "name": "end-disabled", "property": "endDisabled", "type": "boolean", "default": "false", "description": "Switch the second half of a range off. See startDisabled." }, { "name": "start-readonly", "property": "startReadonly", "type": "boolean", "default": "false", "description": "Fix the first half of a range: it is shown and submitted, but not editable and not open to a pick —\nthe other native half of the pair, for a start that is already agreed while the end is still\nbeing negotiated." }, { "name": "end-readonly", "property": "endReadonly", "type": "boolean", "default": "false", "description": "Fix the second half of a range. See startReadonly." }, { "name": "label-start", "property": "labelStart", "type": "string", "default": "''", "description": "What the first half of a range is called, for assistive technology.\n\nWithout it the halves are named \"from\" and \"until\" in the field's own language, which is right\nuntil the two ends have names of their own — check-in and check-out, agreed and expiry. Not\nrendered as visible text: the visible label is `label`, and it names the pair." }, { "name": "label-end", "property": "labelEnd", "type": "string", "default": "''", "description": "What the second half is called. See labelStart." }, { "name": "step", "property": "step", "type": "number | 'any'", "default": "60", "description": "Granularity of the time in **seconds**, as HTML defines it, or `'any'` for every second. It\ndecides two things: whether the field shows a seconds segment, and which values the popup's\ncolumns offer.\n\nThe grid is counted from `min` where there is one, otherwise from the `value` attribute,\notherwise from midnight — the platform's own rule, so `min=\"09:07\"` with `step=\"900\"` offers\n09:07, 09:22, 09:37 and 09:52 rather than the quarter hours. Only read by `time` and\n`datetime`." }, { "name": "hour-format", "property": "hourFormat", "type": "'auto' | '12' | '24'", "default": "'auto'", "description": "How the hour is written. `auto` asks the locale, which is what a native field does." }, { "name": "range", "property": "range", "type": "boolean", "default": "false", "description": "Picks a stretch rather than a point: two fields sharing one calendar.\n\nstart and end are the two values, each in the form `type` writes, and **`end`\nmay stand empty** — \"from here on, open\" is the ordinary case for a contract or a tariff, and\none that a single field holding both ends cannot express at all. value is not used in\nthis mode.\n\nOnly for `type=\"date\"` so far. A range of quarters and a span of clock times are each their own\nquestion — \"from 14:00 until 09:00\" has no meaning without one being settled." }, { "name": "start", "property": "start", "type": "string", "default": "''", "description": "The first end of a range, in the form type writes. Only read while range is set." }, { "name": "end", "property": "end", "type": "string", "default": "''", "description": "The second end. May stand empty, which is an open-ended period rather than an unfinished one." }, { "name": "open", "property": "open", "type": "boolean", "default": "false", "description": "The calendar's open state. Reflected, so `[open]` styles the field while it is showing." }, { "name": "placement", "property": "placement", "type": "'top' | 'bottom'", "default": "'bottom'", "description": "Where the calendar is placed relative to the field." }, { "name": "locale", "property": "locale", "type": "string", "default": "''", "description": "BCP-47 locale override for the **order of the segments** and the separators between them. When\nempty, the inherited `lang` attribute is used.\n\nThe wording of everything else — the segment labels, the placeholders, the calendar's month\nnames — follows `lang`, because that is what `LocalizeController` reads. Set both to move the\ntwo together." }, { "name": "format", "property": "format", "type": "string", "default": "''", "description": "The order the field draws its segments in, and what sits between them — `\"DD.MM.YYYY\"`,\n`\"YYYY-MM-DD\"`, `\"M/D/YYYY\"`. Empty asks the locale, which is the default.\n\nThe vocabulary is Moment's, in the cut dayjs ships: `DD`/`D` for the day, `MM`/`M` for the month\nas digits, `MMMM`/`MMM` for its name, `YYYY`/`YY` for the year, and `[…]` around text that would\notherwise read as tokens. It is **not** Unicode LDML, whose lowercase spellings are refused\nrather than misread.\n\n`YY` draws two digits and changes nothing else: the value keeps all four, and a typed pair reads\nthrough Moment's pivot — `00`–`68` forward, `69`–`99` back.\n\nA named month is as wide as its word, so what sits beside it shifts as the month changes. Its\nplaceholder stays `mm`: the placeholder names the field, and predicting the word's width is not\nits job.\n\n`type` decides *which* segments there are; this decides only how they are drawn. A format naming\nanything else is ignored with a warning and the locale is used — a consumer who wants a month\nand a year asks for `type=\"month\"`. On `type=\"quarter\"`, `\"halfyear\"`, `\"week\"` and `\"time\"`\nthere is nothing to reorder, and a format is ignored in silence so that a wrapper may pass one\nto every picker it renders.\n\nThe value never moves: `type` alone decides the wire format a consumer reads and submits." }, { "name": "first-day-of-week", "property": "firstDayOfWeek", "type": "1 | 2 | 3 | 4 | 5 | 6 | 7 | 'auto'", "default": "'auto'", "description": "The first day of the week in the calendar, ISO-numbered: 1 is Monday, 7 is Sunday. `auto` reads\nthe locale, falling back to Monday where the browser cannot answer — `getWeekInfo()` does not\nexist in Firefox." }, { "name": "show-week-numbers", "property": "showWeekNumbers", "type": "boolean", "default": "false", "description": "Shows the ISO week number beside each row of the calendar." }, { "name": "default-month", "property": "defaultMonth", "type": "string", "default": "''", "description": "The page the calendar opens on while nothing is selected, as `YYYY-MM` or a full day. A\nselected value always wins — it is the page the user is looking for.\n\nToday is only the right guess where the consumer has none: a booking form knows the season, a\npayroll form knows the period. There is no native counterpart to follow here — `` gives no say over the picker it opens — so this is the calendar's own attribute,\npassed through." }, { "name": "panels", "property": "panels", "type": "number", "default": "2", "description": "How many month panels the calendar shows, `1` or `2`. Only a live range reads it, because two\nlinked months are what make both ends of a span that crosses a month boundary reachable\nwithout paging; everything else shows one." }, { "name": "confirm", "property": "confirm", "type": "'auto' | 'always' | 'never'", "default": "'auto'", "description": "Whether the panel ends with an OK/Cancel row.\n\n`auto` lets the type decide, which is the reason the row exists: a clock cannot be finished in\none pick, so `time` and `datetime` confirm, while a single pick already is the value everywhere\nelse — and a native `` closes its picker on that pick. `always` and `never`\noverrule it, for a form that wants every entry acknowledged or one that wants none.\n\nWhile the row is showing, a pick leaves the panel open: otherwise the OK it offers could never\nbe reached." }, { "name": "picker-only", "property": "pickerOnly", "type": "boolean", "default": "false", "description": "Set the value from the panel only: the segments take no digits and report themselves as not\neditable, while the panel stays open for business — a press anywhere on the field opens it,\nsince there is no caret to place.\n\nFor a field where only some values are allowed and the panel is what shows which. Distinct\nfrom `readonly`, which makes the value unchangeable altogether." }, { "name": "input-only", "property": "inputOnly", "type": "boolean", "default": "false", "description": "The other way round: the field is typed into and there is no panel at all — no button, and\nAlt + ↓ opens nothing.\n\nFor entry by keyboard, where reaching for a panel costs more than typing four digits." }, { "name": "autofocus", "property": "autofocus", "type": "boolean", "default": "false", "description": "Take the focus on load, on the segment the field is entered through — the same one a\nTab reaches.\n\nThe attribute is passed to that segment, so the platform decides when it applies, exactly as\nit does for `ed-input`'s inner ``. That means it holds on load and is ignored when set\nlater, which is what a native `autofocus` does." }, { "name": "with-label", "property": "withLabel", "type": "boolean", "default": "false", "description": "Only required for SSR. Set to `true` if you're slotting in a `label` element." }, { "name": "with-hint", "property": "withHint", "type": "boolean", "default": "false", "description": "Only required for SSR. Set to `true` if you're slotting in a `hint` element." }, { "name": "error", "property": "error", "type": "null | string", "default": "null", "description": "Draws an error-style input with danger colored border and icon. Set to an empty string (or use the bare attribute ``) to render error styling without a visible message; submission is still blocked with a localized fallback validation message. Set to a non-empty string to additionally display that message in the message area, above the hint, and use it as the validation message. Set to `null` (the default) or remove the attribute to clear the error." }, { "name": "warning", "property": "warning", "type": "null | string", "default": "null", "description": "Draws a warning-style input with warning colored border and icon. Set to an empty string (or use the bare attribute ``) to render warning styling without a visible message. Set to a non-empty string to additionally display that message in the message area, above the hint. Warnings do not block form submission. Set to `null` (the default) or remove the attribute to clear the warning." }, { "name": "ai", "property": "ai", "type": "boolean", "default": "false", "description": "Draws an ai-style input with AI colored border and icon. Suppressed visually once\n`hasInteracted` flips, but the property and attribute are preserved so the styling\nreturns after `formResetCallback` clears `hasInteracted`." }, { "name": "hint", "property": "hint", "type": "string", "default": "''", "description": "The form control's hint text. If you need to display HTML, use the `hint` slot instead." }, { "name": "name", "property": "name", "type": "null | string", "default": "null", "description": "The name of the input, submitted as a name/value pair with form data." }, { "name": "disabled", "property": "disabled", "type": "boolean", "description": "Disables the form control. HTML treats a control as disabled when either its own `disabled` is\nset or an ancestor `
` is disabled, so reading this reports the combined state while\nwriting it sets only this element's own. Keeping the two apart is what lets a fieldset be\nre-enabled without clearing a disabled state the consumer set in the meantime." }, { "name": "dir", "property": "dir", "type": "string" }, { "name": "lang", "property": "lang", "type": "string" } ], "properties": [ { "name": "value", "type": "string", "description": "The committed value in the form type writes — never a `Date`, exactly as `input.value`\nis always a string. Empty while nothing is chosen or the entry is only partly filled.\n\nFor a `Date`, use valueAsDate, which is UTC. Keeping `Date` out of `value` is what keeps\nthat a property of one named accessor instead of a contract the whole element has to restate." }, { "name": "isDisabled", "type": "(value: string) => boolean | undefined", "description": "Decides per value whether it can be chosen. Receives the value in wire form, so the same\nfunction serves a day, a quarter and a time. Set as a property, not an attribute.\n\nFor `datetime` it is asked twice with two different shapes: once per day in the calendar\n(`2026-08-15`) and once per candidate time in the columns (`2026-08-15T09:00`). A function that\nonly means to filter days can return `false` for anything holding a `T`." }, { "name": "valueAsDate", "type": "Date | null", "description": "The committed value as **UTC midnight** — the first instant of what is chosen, which for a week\nis its Monday and for a quarter its first day. `null` while the value is empty or incomplete.\n\nThat is the instant a native `` and `` give, measured in\nChromium and Firefox. Anything that formats in local time has to read it in UTC, or it names\nthe previous day west of Greenwich; passing value skips the question entirely." }, { "name": "periodStart", "type": "Date | null", "description": "The first instant of the **period** chosen, as UTC midnight.\n\nFor every type that names a span of days — a day, a week, a month, a quarter, a half-year, a\nyear — this is the same instant valueAsDate reports, and it carries its own name so\nthat reading a span does not depend on knowing the two coincide.\n\n`null` for `type=\"time\"`, which names no period: a clock time has no first day. `valueAsDate`\nanswers there, as the time of day on the epoch. `null` as well while the value is empty and\nthroughout `range` mode, where the value lives in `start` and `end`." }, { "name": "periodEnd", "type": "Date | null", "description": "The **last** instant of what is chosen: UTC midnight of the final day, so the span is inclusive\nat both ends. `null` while the value is empty.\n\nDerived rather than stored, because a stored span cannot be told apart from a freely chosen one\nthat happens to line up: `2026-07-01`–`2026-09-30` is only recognizable as Q3 by arithmetic." }, { "name": "form", "type": "HTMLFormElement | null", "description": "By default, form controls are associated with the nearest containing `
` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work." }, { "name": "validationTarget", "type": "undefined | HTMLElement", "description": "Override this to change where constraint validation popups are anchored." } ], "methods": [ { "name": "focus", "parameters": [ { "name": "options", "type": "FocusOptions", "optional": true } ], "description": "Focuses the first empty segment, or the first segment when all are filled.\n\nThe predicate has to read the group as well as the field: for a filled `datetime` the date\nstore holds no `hour`, so a group-blind check reported the hour as the first empty segment and\nput the focus there." }, { "name": "blur", "description": "Removes focus from the picker." }, { "name": "show", "returns": "Promise", "description": "Opens the calendar. Resolves once it has finished animating.\n\nNothing happens while the control is disabled or readonly: both make it immutable, and a panel\nwhose picks cannot land is a panel with nothing to do. The platform is stricter still —\n`showPicker()` on an immutable input throws — but this method resolves rather than throws\neverywhere else in the library, so it stays quiet here too." }, { "name": "hide", "returns": "Promise", "description": "Closes the calendar. Resolves once it has finished animating." }, { "name": "setValue", "parameters": [ { "name": "args", "type": "Parameters" } ], "description": "Every write of the form value goes through here, so a range rewrites it in one place rather\nthan at each of the call sites the base class and this element have between them.\n\nThe **state** is a single `start/end` string rather than the `FormData`, because that is what\ncomes back through `formStateRestoreCallback` after a navigation, where a `FormData` would have\nto be guessed at." }, { "name": "setCustomValidity", "parameters": [ { "name": "message", "type": "string" } ], "description": "Do not use this when creating a \"Validator\". This is intended for end users of components.\nWe track manually defined custom errors so we don't clear them on accident in our validators." }, { "name": "resetValidity", "description": "Reset validity is a way of removing manual custom errors and native validation." } ], "events": [ { "name": "input", "react": "onInput", "type": "InputEvent", "description": "Emitted as the user types in any segment." }, { "name": "change", "react": "onChange", "type": "Event", "description": "Emitted when the committed value transitions to a new one." }, { "name": "blur", "react": "onBlur", "description": "Emitted when the control loses focus." }, { "name": "focus", "react": "onFocus", "description": "Emitted when the control gains focus." }, { "name": "ed-calendar-page-change", "react": "onEdCalendarPageChange", "type": "EdCalendarPageChangeEvent", "description": "Passed on from the calendar in the panel: the page on screen moved. The detail carries `page` as a wire string. Useful for loading what belongs to the month being looked at." }, { "name": "ed-clear", "react": "onEdClear", "description": "Emitted when the value is cleared through the clear button or Escape." }, { "name": "ed-invalid", "react": "onEdInvalid", "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied." }, { "name": "ed-show", "react": "onEdShow", "description": "Emitted when the panel opens. Cancelable; calling `preventDefault()` keeps it closed." }, { "name": "ed-after-show", "react": "onEdAfterShow", "description": "Emitted after the panel opens and its animation has finished." }, { "name": "ed-hide", "react": "onEdHide", "description": "Emitted when the panel closes. Cancelable; calling `preventDefault()` keeps it open." }, { "name": "ed-after-hide", "react": "onEdAfterHide", "description": "Emitted after the panel closes and its animation has finished." } ], "slots": [ { "name": "label", "description": "The picker's label. Alternatively, use the `label` attribute." }, { "name": "hint", "description": "Text that describes how to use the picker. Alternatively, use the `hint` attribute." }, { "name": "start", "description": "An element placed before the segments, inside the field." }, { "name": "footer", "description": "A row inside the panel, below the calendar and the columns: a note, a legend, a hint about what is barred. Nothing is rendered by default." }, { "name": "footer-controls", "description": "A second row for controls, e.g. a \"Today\" button. Nothing is wired — what a control does, and whether the panel closes, is the consumer's own listener." }, { "name": "trigger-icon", "description": "The glyph on the button that opens the panel. Defaults to a calendar icon, or a clock for `type=\"time\"`." }, { "name": "clear-icon", "description": "The glyph on the clear button. Defaults to an ✕ icon." } ], "cssProperties": [ { "name": "--ed-date-picker-width", "description": "The width of the field. Defaults to `100%`." }, { "name": "--ed-date-picker-column-height", "description": "How tall the time columns are before they scroll." } ], "parts": [ { "name": "form-control", "description": "The form control's outer wrapper." }, { "name": "form-control-label", "description": "The label's wrapper." }, { "name": "form-control-input", "description": "The wrapper around the field." }, { "name": "message", "description": "The state message: an error, a warning, or the AI note." }, { "name": "hint", "description": "The hint's wrapper." }, { "name": "base", "description": "The field itself, holding the segments and both buttons. A range renders two." }, { "name": "base-start", "description": "Added to the first field of a range." }, { "name": "base-end", "description": "Added to the second field of a range." }, { "name": "start", "description": "The wrapper around the `start` slot." }, { "name": "range", "description": "The wrapper holding both fields of a range." }, { "name": "range-separator", "description": "The dash between them." }, { "name": "segments", "description": "The row of segments and separators. A range renders two." }, { "name": "segment", "description": "Any editable segment." }, { "name": "segment-day", "description": "Added to the day segment." }, { "name": "segment-month", "description": "Added to the month segment." }, { "name": "segment-year", "description": "Added to the year segment." }, { "name": "segment-week", "description": "Added to the week segment." }, { "name": "segment-quarter", "description": "Added to the quarter segment." }, { "name": "segment-half-year", "description": "Added to the half-year segment." }, { "name": "segment-hour", "description": "Added to the hour segment." }, { "name": "segment-minute", "description": "Added to the minute segment." }, { "name": "segment-second", "description": "Added to the second segment." }, { "name": "segment-day-period", "description": "Added to the AM/PM segment." }, { "name": "separator", "description": "Inert text between two segments." }, { "name": "separator-gap", "description": "Added to a separator that carries no glyph, only space — between a quarter and its year, or before AM/PM. It is sized as a box, since a span holding one space is a flex item of zero width." }, { "name": "clear-button", "description": "The button that empties the field." }, { "name": "trigger", "description": "The button that opens the calendar." }, { "name": "panel", "description": "The floating surface holding the calendar. Carries the frame, background and shadow." }, { "name": "surfaces", "description": "The row inside the panel holding the calendar, the time columns, or both." }, { "name": "footer", "description": "The consumer's own note row under the panel. Always in the DOM, and hidden while the `footer` slot is empty." }, { "name": "footer-controls", "description": "The consumer's own control row under it. Always in the DOM, and hidden while the `footer-controls` slot is empty." }, { "name": "panel-footer", "description": "The OK/Cancel row below them. Rendered for `type=\"time\"` and `type=\"datetime\"`, where one pick cannot finish the value." }, { "name": "footer-ok", "description": "The button that accepts the entry and closes the panel. Disabled while the value is incomplete." }, { "name": "footer-cancel", "description": "The button that puts back the value the field held when the panel opened." }, { "name": "calendar", "description": "The `` inside the panel." }, { "name": "calendar__base", "description": "The calendar's exported `base` part. Prefixed because the field already owns `base`." }, { "name": "calendar__panel", "description": "The calendar's exported `panel` part, one wrapper per month shown. Prefixed because the floating surface already owns `panel`." }, { "name": "calendar__footer", "description": "The calendar's exported `footer` part. Prefixed because the note row already owns `footer`." }, { "name": "time-columns", "description": "The row of listboxes a time or datetime shows in the panel." }, { "name": "time-column", "description": "One of those listboxes." }, { "name": "time-column-hour", "description": "Added to the hour column." }, { "name": "time-column-minute", "description": "Added to the minute column." }, { "name": "time-column-second", "description": "Added to the second column." }, { "name": "time-column-day-period", "description": "Added to the AM/PM column." }, { "name": "time-option", "description": "One value in a column." }, { "name": "time-option-selected", "description": "The chosen value in a column." } ], "states": [ { "name": "blank", "description": "The picker has no committed value." }, { "name": "range", "description": "The picker is picking a stretch rather than a point." }, { "name": "disabled", "description": "The picker is disabled." }, { "name": "open", "description": "The calendar is open." }, { "name": "required", "description": "The control is required." }, { "name": "optional", "description": "The control is not required." }, { "name": "invalid", "description": "The value fails constraint validation, whether or not the user has touched the control yet." }, { "name": "valid", "description": "The value passes constraint validation." }, { "name": "user-invalid", "description": "Invalid, and the user has interacted with the control. This is the one to style for an error: it behaves like the platform's `:user-invalid`, so an untouched field is not marked wrong before the user has had a chance to fill it in." }, { "name": "user-valid", "description": "Valid, and the user has interacted with the control." }, { "name": "dirty", "description": "The user has interacted with the control." }, { "name": "error", "description": "The `error` property is set, or the control is `user-invalid`." }, { "name": "warning", "description": "The `warning` property is set." }, { "name": "ai", "description": "The `ai` property is set and the user has not interacted with the control yet." } ] }, "import": "import '@eurodata/eurodata-ui/dist/components/date-picker/date-picker.js';", "react": { "component": "EdDatePicker", "import": "import EdDatePicker from '@eurodata/eurodata-ui/dist/react/date-picker/index.js';" } }