forms component

DateRangePicker

Reusable date range picker component.

@wrnexus/ui 0.2.674 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>
    }
}