Date Picker

A date picker component with range and presets.

Component date-picker-demo not found in registry.

Installation

The Date Picker is built using a composition of the <Popover /> and the <Calendar /> components.

See installation instructions for the Popover and the Calendar components.

Usage

<Calendar mode="single">
  {(props) => (
    <Popover>
      <PopoverTrigger />
      <PopoverPortal>
        <PopoverContent>
          <div>
            <div>
              <CalendarNav action="prev-month" />
              <CalendarLabel />
              <CalendarNav action="next-month" />
            </div>
            <CalendarTable>
              <thead>
                <tr>
                  <Index each={props.weekdays}>
                    {(weekday) => <CalendarHeadCell />}
                  </Index>
                </tr>
              </thead>
              <tbody>
                <Index each={props.weeks}>
                  {(week) => (
                    <tr>
                      <Index each={week()}>
                        {(day) => (
                          <CalendarCell>
                            <CalendarCellTrigger />
                          </CalendarCell>
                        )}
                      </Index>
                    </tr>
                  )}
                </Index>
              </tbody>
            </CalendarTable>
          </div>
        </PopoverContent>
      </PopoverPortal>
    </Popover>
  )}
</Calendar>

Examples

With range

Component date-picker-range-demo not found in registry.

Data TableDialog