Date Picker

Basic date picker example demonstrating core behavior.

Package: @solidiom/date-picker
Version: 0.0.1-next.0
Status: stable

Examples

import * as DatePicker from "@solidiom/date-picker"

;<DatePicker.Root onValueChange={(date) => console.log(date)}>
  <DatePicker.Input placeholder="Select a date" />

  <DatePicker.Trigger>📅</DatePicker.Trigger>

  <DatePicker.Content>
    <DatePicker.Calendar>
      <DatePicker.Header />

      <DatePicker.Grid>
        {(weeks) =>
          weeks().map((week, wi) => (
            <tr key={wi}>
              {week.map((day, di) =>
                day > 0 ? (
                  <DatePicker.Cell key={`${wi}-${di}`} day={day} />
                ) : (
                  <td key={`${wi}-${di}`} />
                ),
              )}
            </tr>
          ))
        }
      </DatePicker.Grid>
    </DatePicker.Calendar>
  </DatePicker.Content>
</DatePicker.Root>

The Input displays the selected date as read-only text. The Trigger opens the calendar popup. The Content handles dismissable layer and focus trapping. Use isDateDisabled to restrict selectable dates.

View source

        /**
 * @solidiom/date-picker — Headless date picker primitive with calendar popup.
 *
 * Parts: Root, Input, Trigger, Content, Calendar, Header, Grid, Cell.
 */

export {
  Root,
  Input,
  Trigger,
  Content,
  Calendar,
  Header,
  Grid,
  Cell,
  type DatePickerRootProps,
  type DatePickerInputProps,
  type DatePickerTriggerProps,
  type DatePickerContentProps,
  type DatePickerCalendarProps,
  type DatePickerHeaderProps,
  type DatePickerGridProps,
  type DatePickerCellProps,
} from "./date-picker"

export {
  type DateValue,
  type CalendarDateMathPort,
  type DatePickerContextValue,
} from "./date-picker-context"