Date Picker Component - ShadCn.Blazor

Basic

A simple date picker with popover calendar.

<DatePicker @bind-SelectedDate="selectedDate" />

@code {
    private DateTime? selectedDate;
}

Custom Placeholder

Customize the placeholder text.

<DatePicker @bind-SelectedDate="selectedDate"
            Placeholder="Select your birthday" />

With Form

Using DatePicker in a form context.

Book an Appointment

Choose a date for your appointment.

Name

Appointment Date

<Card>
    <CardHeader>
        <CardTitle>Book an Appointment</CardTitle>
    </CardHeader>
    <CardContent>
        <div class="space-y-4">
            <div class="space-y-2">
                <Label>Name</Label>
                <Input Placeholder="Enter your name" />
            </div>
            <div class="space-y-2">
                <Label>Appointment Date</Label>
                <DatePicker @bind-SelectedDate="appointmentDate"
                            MinDate="@DateTime.Today" />
            </div>
        </div>
    </CardContent>
    <CardFooter>
        <Button>Book Appointment</Button>
    </CardFooter>
</Card>

Date Constraints

Restrict selectable dates.

Future dates only

Past dates only

<DatePicker @bind-SelectedDate="futureDate"
            MinDate="@DateTime.Today.AddDays(1)"
            Placeholder="Select a future date" />

<DatePicker @bind-SelectedDate="pastDate"
            MaxDate="@DateTime.Today.AddDays(-1)"
            Placeholder="Select a past date" />