IxDF UI Kit

“Date Picker” Component

Design: zeplin.

The IxDF UI Kit has 1 type of date picker. When a form (e.g. create an event form) has a date range (start and end date), the IxDF UI Kit uses two date pickers instead of a separate component.

Single Date Picker

Usage

// minimal usage
<x-date-picker/>
// regular usage
<x-date-picker :value="now()" name="date" id="date_picker"/>

Single Date Picker with Date Limitations

Usage

<x-date-picker :value="now()" name="start_at" id="start_at" :min="now()->subDays(5)" :max="now()->addDays(5)"/>

Props

  • value
    DateTime|string

    Initial date in date selector.

    Default Value: DateTime('now')

  • min
    DateTime|string

    The oldest selectable date-time.

  • max
    DateTime|string

    The most advanced selectable date-time.