forms component

DateRangePicker

Reusable date range picker component.

@wrnexus/ui 0.2.654 props0 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<DateRangePicker label="Date range" startName="startDate" endName="endDate" />

Legacy mount name: data-component="DateRangePicker".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`label`	`string`	Optional	`"Date range"`
`startName`	`string`	Optional	`"startDate"`
`endName`	`string`	Optional	`"endDate"`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/DateRangePicker.wrn

component DateRangePicker {
  props {
    class = ""
    label = "Date range"
    startName = "startDate"
    endName = "endDate"
  }
  view {
    <fieldset class="{class}"><legend class="mb-2 text-sm font-semibold">{label}</legend><div class="grid gap-3 sm:grid-cols-2"><DateInput id="{startName}" name="{startName}" label="Start date" /><DateInput id="{endName}" name="{endName}" label="End date" /></div></fieldset>
  }
}