{"name":"date-input","title":"Date Input","description":"A segmented date input with keyboard editing and locale-aware formatting.","installCommand":"bunx marko-ui add date-input -y","usageTags":"","importSnippet":"import DateInput from \"@/components/ui/date-input/date-input.marko\";","usageSnippet":"\n\n","tags":["DateInput"],"parts":[],"props":[{"name":"allSegments","type":"Segments | undefined","required":false,"description":"The computed segments map for the formatter."},{"name":"createCalendar","type":"((identifier: CalendarIdentifier) => Calendar) | undefined","required":false,"description":"A function that creates a calendar object for a given calendar identifier.\nUse this to support non-Gregorian calendars (e.g., Persian, Islamic, Buddhist)."},{"name":"defaultPlaceholderValue","type":"string","required":false},{"name":"defaultValue","type":"string[]","required":false},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the date input is disabled."},{"name":"form","type":"string | undefined","required":false,"description":"The `form` attribute of the hidden input element."},{"name":"format","type":"((date: DateValue, details: FormatDateDetails) => string) | undefined","required":false,"description":"The format function for converting a DateValue to a string."},{"name":"formatter","type":"DateFormatter | undefined","required":false,"description":"The date formatter to use."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"granularity","type":"DateGranularity | undefined","required":false,"default":"day","description":"Determines the smallest unit that is displayed in the date input."},{"name":"hideTimeZone","type":"boolean | undefined","required":false,"default":"false","description":"Whether to hide the time zone segment when the value is a `ZonedDateTime`.\nHas no effect for values without a time zone."},{"name":"hourCycle","type":"HourCycle | undefined","required":false,"description":"Whether to use 12-hour or 24-hour time format.\nBy default, this is determined by the locale."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the date input. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"Whether the date input is invalid"},{"name":"isDateUnavailable","type":"((date: DateValue, locale: string) => boolean) | undefined","required":false,"description":"Returns whether a date is unavailable.\nWhen a committed date matches, the input is marked as invalid."},{"name":"locale","type":"string | undefined","required":false,"default":"en-US","description":"The locale (BCP 47 language tag) to use when formatting the date."},{"name":"max","type":"DateValue | undefined","required":false,"description":"The maximum date that can be selected."},{"name":"min","type":"DateValue | undefined","required":false,"description":"The minimum date that can be selected."},{"name":"name","type":"string | undefined","required":false,"description":"The `name` attribute of the input element."},{"name":"placeholderValue","type":"string","required":false},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the date input is read-only."},{"name":"required","type":"boolean | undefined","required":false,"description":"Whether the date input is required"},{"name":"selectionMode","type":"SelectionMode | undefined","required":false,"default":"single","description":"The selection mode of the date input.\n- `single` - only one date can be entered\n- `range` - a range of dates can be entered (start and end)"},{"name":"shouldForceLeadingZeros","type":"boolean | undefined","required":false,"default":"false","description":"Whether to always show leading zeros in month, day, and hour fields.\nWhen false, formatting follows the locale default (e.g. \"1\" instead of \"01\")."},{"name":"timeZone","type":"string | undefined","required":false,"default":"UTC","description":"The time zone to use"},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."},{"name":"value","type":"string[]","required":false}],"events":[{"name":"focusChange","arg":"boolean"},{"name":"onFocusChange","arg":"FocusChangeDetails","description":"A function called when the date input gains or loses focus."},{"name":"onPlaceholderChange","arg":"PlaceholderChangeDetails","description":"A function called when the placeholder value changes."},{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function called when the value changes."},{"name":"placeholderValueChange","arg":"string"},{"name":"valueChange","arg":"string[]"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"date-input-demo","title":"Basic","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n","description":"A date input with empty segments, ready for keyboard entry."},{"id":"date-input-value","title":"With value","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n","description":"Pass `value` as an array of ISO date strings to pre-fill the segments."},{"id":"date-input-locale","title":"Custom locale","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n","description":"Pass `locale` to change segment order and formatting, e.g. `fr-FR`."},{"id":"date-input-disabled","title":"Disabled","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n","description":"A disabled date input is skipped by the tab order and ignores input."},{"id":"date-input-range","title":"Date range","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n","description":"Set `selectionMode=\"range\"` to render two segment groups for a start and end date."},{"id":"date-input-controlled","title":"Controlled","source":"import DateInput from \"@marko-ui/shadcn/ui/date-input/date-input.marko\";\n\n\n\n
\n \n \n value: ${value.join(\", \") || \"(empty)\"}\n \n
","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}