The DatePicker component combines a button trigger with a calendar popup for selecting dates. It supports two-way binding, placeholder text, clear functionality, and disabled state.

Installation

shellui add date-picker

Basic Usage

<DatePicker @bind-Value="selectedDate" />

@code {
    private DateTime? selectedDate;
}

With Placeholder

<div class="space-y-2">
  <Label>Date of Birth</Label>
  <DatePicker @bind-Value="dateOfBirth"
              Placeholder="Pick a date" />
</div>

@code {
    private DateTime? dateOfBirth;
}

With Clear Button

Allow users to clear the selected date (enabled by default):

<DatePicker @bind-Value="selectedDate"
            AllowClear="true"
            Placeholder="Select a date" />

@code {
    private DateTime? selectedDate = DateTime.Today;
}

To disable clearing:

<DatePicker @bind-Value="selectedDate"
            AllowClear="false" />

Disabled State

<DatePicker @bind-Value="selectedDate"
            Disabled="true"
            Placeholder="Not available" />

In a Form

<EditForm Model="@model" OnValidSubmit="HandleSubmit">
  <div class="grid gap-4">
    <div class="space-y-2">
      <Label>Event Name</Label>
      <Input @bind-Value="model.Name" />
    </div>
    <div class="space-y-2">
      <Label>Event Date</Label>
      <DatePicker @bind-Value="model.Date"
                  Placeholder="Pick event date" />
    </div>
    <Button Type="submit">Create Event</Button>
  </div>
</EditForm>

@code {
    private EventModel model = new();

    private void HandleSubmit()
    {
        // Handle submission
    }

    class EventModel
    {
        public string Name { get; set; } = "";
        public DateTime? Date { get; set; }
    }
}

Controlled State

<div class="flex items-center gap-4">
  <DatePicker @bind-Value="selectedDate" />
  <p class="text-sm text-muted-foreground">
    Selected: @(selectedDate?.ToString("MMM dd, yyyy") ?? "None")
  </p>
</div>

@code {
    private DateTime? selectedDate;
}

Side-by-Side Date Range

Use two DatePicker components for a date range:

<div class="flex items-center gap-2">
  <DatePicker @bind-Value="startDate" Placeholder="Start date" />
  <span class="text-muted-foreground">to</span>
  <DatePicker @bind-Value="endDate" Placeholder="End date" />
</div>

@code {
    private DateTime? startDate;
    private DateTime? endDate;
}

API Reference

Property	Type	Default	Description
`Value`	`DateTime?`	`null`	Selected date value
`ValueChanged`	`EventCallback<DateTime?>`	—	Two-way binding callback
`Placeholder`	`string`	`"Pick a date"`	Text shown when no date is selected
`Disabled`	`bool`	`false`	Disable the date picker
`AllowClear`	`bool`	`true`	Show a clear button when a date is selected
`Class`	`string?`	`null`	Additional CSS classes

Display Format

The selected date is displayed as "MMM dd, yyyy" (e.g., "Feb 08, 2026"). The calendar popup provides month navigation with Previous/Next buttons.

Accessibility

The DatePicker component includes:

Calendar popup as an overlay with click-outside dismiss
Keyboard navigation within the calendar grid
Month navigation via Previous/Next buttons
Clear button with proper labeling
aria-label on the trigger button

Date Picker