Date Pickers
Dates and times with native inputs and the inline calendar behaviour: single dates, ranges, presets, limits, booking forms and business hours.
1Native date input
type="date" opens the device's own date picker and returns yyyy-mm-dd.
<label for="dp-date-373" class="form-label">Delivery date</label>
<input type="date" class="form-control" id="dp-date-373" value="2026-11-01">2Time input
type="time" with a step of 15 minutes for meeting slots.
Times are shown in your local time zone.
<label for="dp-time-374" class="form-label">Meeting time</label>
<input type="time" class="form-control" id="dp-time-374" value="19:15" step="900" aria-describedby="dp-time-help-375">
<div id="dp-time-help-375" class="form-text">
Times are shown in your local time zone.
</div>3Date and time
datetime-local captures a date and time in one control.
<label for="dp-datetime-376" class="form-label">Publish at</label>
<input type="datetime-local" class="form-control" id="dp-datetime-376" value="2026-10-03T15:15">4Month input
type="month" for billing periods and card expiry dates.
<label for="dp-month-377" class="form-label">Billing period</label>
<input type="month" class="form-control" id="dp-month-377" value="2026-01">5Week input
type="week" picks an ISO week, useful for timesheets and sprints.
<label for="dp-week-378" class="form-label">Timesheet week</label>
<input type="week" class="form-control" id="dp-week-378" value="2026-W38">6Date range
Two date inputs side by side for a from / to range.
<fieldset>
<legend class="form-label text-base">Report period</legend>
<div class="row g-2 items-center">
<div class="col">
<label for="dp-from-379" class="sr-only">From</label>
<input type="date" class="form-control" id="dp-from-379" value="2026-09-01">
</div>
<div class="col-auto text-muted">
to
</div>
<div class="col">
<label for="dp-to-380" class="sr-only">To</label>
<input type="date" class="form-control" id="dp-to-380" value="2026-09-30">
</div>
</div>
</fieldset>7Input group with icon
A calendar icon in front of the field signals a date.
<label for="dp-ig-381" class="form-label">Invoice date</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-calendar3-fill" aria-hidden="true"></i></span><input type="date" class="form-control" id="dp-ig-381" value="2026-10-19">
</div>8Inline calendar with target
data-demo-calendar draws a month; the picked day is written into the target input.
Click a day in the calendar.
<div class="row g-3">
<div class="col-md-6">
<div class="border rounded-lg p-2" data-demo-calendar data-demo-calendar-target="#dp-cal-target-382">
</div>
</div>
<div class="col-md-6">
<label for="dp-cal-target-382" class="form-label">Selected date</label>
<input type="text" class="form-control" id="dp-cal-target-382" placeholder="yyyy-mm-dd" readonly>
<div class="form-text">
Click a day in the calendar.
</div>
</div>
</div>9Calendar card
A stand-alone inline calendar inside a card with upcoming events.
Schedule
- Content strategyDec 12, 2026
- Why motion matters for modern brandsJan 25, 2027
<div class="card" style="max-width: 22rem;">
<div class="card-header font-semibold">
<i class="bi bi-calendar-week-fill" aria-hidden="true"></i> Schedule
</div>
<div class="card-body">
<div data-demo-calendar>
</div>
</div>
<ul class="list-group list-group-flush small">
<li class="list-group-item flex justify-between"><span>Content strategy</span><span class="text-muted">Dec 12, 2026</span></li>
<li class="list-group-item flex justify-between"><span>Why motion matters for modern brands</span><span class="text-muted">Jan 25, 2027</span></li>
</ul>
</div>10Range presets
Preset buttons for common periods next to custom from / to dates.
<div class="flex flex-wrap gap-1 mb-4" role="group" aria-label="Date presets">
<input type="radio" class="btn-check" name="dp-preset-383" id="dp-preset-opt-384" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary" for="dp-preset-opt-384">Today</label>
<input type="radio" class="btn-check" name="dp-preset-383" id="dp-preset-opt-385" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary" for="dp-preset-opt-385">Last 7 days</label>
<input type="radio" class="btn-check" name="dp-preset-383" id="dp-preset-opt-386" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary" for="dp-preset-opt-386">Last 30 days</label>
<input type="radio" class="btn-check" name="dp-preset-383" id="dp-preset-opt-387" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary" for="dp-preset-opt-387">This month</label>
<input type="radio" class="btn-check" name="dp-preset-383" id="dp-preset-opt-388" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary" for="dp-preset-opt-388">This year</label>
</div>
<div class="row g-2">
<div class="col-sm-6">
<label for="dp-pre-from-389" class="form-label small">Custom from</label>
<input type="date" class="form-control form-control-sm" id="dp-pre-from-389">
</div>
<div class="col-sm-6">
<label for="dp-pre-to-390" class="form-label small">Custom to</label>
<input type="date" class="form-control form-control-sm" id="dp-pre-to-390">
</div>
</div>11Min and max dates
min and max stop the picker from offering dates outside the booking window.
Bookings open from Oct 16 to Dec 31, 2026.
<label for="dp-minmax-391" class="form-label">Appointment date</label>
<input type="date" class="form-control" id="dp-minmax-391" min="2026-10-16" max="2026-12-31" aria-describedby="dp-minmax-help-392">
<div id="dp-minmax-help-392" class="form-text">
Bookings open from Oct 16 to Dec 31, 2026.
</div>12Disabled and read-only
A locked contract start date and a read-only renewal date.
<div class="row g-3">
<div class="col-sm-6">
<label for="dp-disabled-393" class="form-label">Contract start</label>
<input type="date" class="form-control" id="dp-disabled-393" value="2025-12-01" disabled>
</div>
<div class="col-sm-6">
<label for="dp-readonly-394" class="form-label">Next renewal</label>
<input type="date" class="form-control" id="dp-readonly-394" value="2027-04-01" readonly>
</div>
</div>13Floating label date
A date field with a floating label for compact forms.
<div class="form-floating">
<input type="date" class="form-control" id="dp-floating-395" placeholder="Due date" value="2026-12-08">
<label for="dp-floating-395">Due date</label>
</div>14Floating range
Floating labels on a from / to pair in a grid row.
<div class="row g-2">
<div class="col-sm">
<div class="form-floating">
<input type="date" class="form-control" id="dp-fl-from-396" placeholder="Leave from" value="2026-12-21">
<label for="dp-fl-from-396">Leave from</label>
</div>
</div>
<div class="col-sm">
<div class="form-floating">
<input type="date" class="form-control" id="dp-fl-to-397" placeholder="Back on" value="2027-01-04">
<label for="dp-fl-to-397">Back on</label>
</div>
</div>
</div>15Booking bar
Check-in, check-out and guests in one bar, stacking on small screens.
<form class="row g-2 p-2 border rounded-lg shadow-sm items-end">
<div class="col-md">
<label for="dp-checkin-398" class="form-label small mb-1"><i class="bi bi-box-arrow-in-right" aria-hidden="true"></i> Check-in</label>
<input type="date" class="form-control" id="dp-checkin-398" value="2026-11-02">
</div>
<div class="col-md">
<label for="dp-checkout-399" class="form-label small mb-1"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Check-out</label>
<input type="date" class="form-control" id="dp-checkout-399" value="2026-11-16">
</div>
<div class="col-md-3">
<label for="dp-guests-400" class="form-label small mb-1"><i class="bi bi-people-fill" aria-hidden="true"></i> Guests</label>
<select class="form-select" id="dp-guests-400">
<option>1 guest</option>
<option selected>2 guests</option>
<option>3 guests</option>
<option>4+ guests</option>
</select>
</div>
<div class="col-md-auto">
<button type="submit" class="btn btn-primary w-full">Search Lisbon</button>
</div>
</form>16Appointment slots
A date input with selectable time slots; taken slots are disabled.
Available times
<label for="dp-appt-401" class="form-label">Choose a day for your ux research</label>
<input type="date" class="form-control mb-4" id="dp-appt-401" value="2026-11-10">
<p class="small font-semibold mb-2">Available times</p>
<div class="row row-cols-4 g-2">
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-403" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-403">09:00</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-404" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-404">09:30</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-405" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-405">10:30</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-406" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-406">11:00</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-407" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-407">13:30</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-408" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-408">14:00</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-409" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-409">15:30</label>
</div>
<div class="col">
<input type="radio" class="btn-check" name="dp-slot-402" id="dp-slot-opt-410" autocomplete="off">
<label class="btn btn-outline-primary btn-sm w-full" for="dp-slot-opt-410">16:00</label>
</div>
</div>17Date of birth
max blocks future dates; the help text explains why the date is needed.
You must be 18 or older. We never show your birthday publicly.
<label for="dp-dob-411" class="form-label">Date of birth</label>
<input type="date" class="form-control" id="dp-dob-411" max="2008-10-16" autocomplete="bday" aria-describedby="dp-dob-help-412">
<div id="dp-dob-help-412" class="form-text">
<i class="bi bi-shield-check" aria-hidden="true"></i> You must be 18 or older. We never show your birthday publicly.
</div>18Calendar dropdown
A dropdown button opens an inline calendar that fills the input next to it.
<label for="dp-dd-input-413" class="form-label">Follow-up date</label>
<div class="input-group">
<input type="text" class="form-control" id="dp-dd-input-413" placeholder="yyyy-mm-dd">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false" aria-label="Open calendar"><i class="bi bi-calendar-event-fill" aria-hidden="true"></i></button>
<div class="dropdown-menu dropdown-menu-end p-2" style="min-width: 17rem;">
<div data-demo-calendar data-demo-calendar-target="#dp-dd-input-413">
</div>
</div>
</div>19Report filter bar
Date range, grouping and an update button for analytics pages.
<form class="flex flex-wrap gap-2 items-end p-4 rounded-lg bg-surface-3">
<div>
<label for="dp-rf-from-414" class="form-label small mb-1">From</label>
<input type="date" class="form-control form-control-sm" id="dp-rf-from-414" value="2026-07-01">
</div>
<div>
<label for="dp-rf-to-415" class="form-label small mb-1">To</label>
<input type="date" class="form-control form-control-sm" id="dp-rf-to-415" value="2026-09-30">
</div>
<div>
<label for="dp-rf-group-416" class="form-label small mb-1">Group by</label>
<select class="form-select form-select-sm" id="dp-rf-group-416">
<option>Day</option>
<option selected>Week</option>
<option>Month</option>
</select>
</div>
<button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-arrow-repeat" aria-hidden="true"></i> Update average rating</button>
</form>20Business hours
A weekly table of opening and closing times with an open / closed switch per day.
| Day | Open | Opens | Closes |
|---|---|---|---|
| Monday | |||
| Tuesday | |||
| Wednesday | |||
| Thursday | |||
| Friday | |||
| Saturday | |||
| Sunday |
<div class="table-responsive">
<table class="table table-sm align-middle mb-0">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Open</th>
<th scope="col">Opens</th>
<th scope="col">Closes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-417" checked aria-label="Open on Monday"></div></td>
<td><label for="dp-h-from-418" class="sr-only">Monday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-418" value="09:00"></td>
<td><label for="dp-h-to-419" class="sr-only">Monday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-419" value="18:00"></td>
</tr>
<tr>
<td>Tuesday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-420" checked aria-label="Open on Tuesday"></div></td>
<td><label for="dp-h-from-421" class="sr-only">Tuesday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-421" value="09:00"></td>
<td><label for="dp-h-to-422" class="sr-only">Tuesday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-422" value="18:00"></td>
</tr>
<tr>
<td>Wednesday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-423" checked aria-label="Open on Wednesday"></div></td>
<td><label for="dp-h-from-424" class="sr-only">Wednesday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-424" value="09:00"></td>
<td><label for="dp-h-to-425" class="sr-only">Wednesday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-425" value="18:00"></td>
</tr>
<tr>
<td>Thursday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-426" checked aria-label="Open on Thursday"></div></td>
<td><label for="dp-h-from-427" class="sr-only">Thursday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-427" value="09:00"></td>
<td><label for="dp-h-to-428" class="sr-only">Thursday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-428" value="18:00"></td>
</tr>
<tr>
<td>Friday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-429" checked aria-label="Open on Friday"></div></td>
<td><label for="dp-h-from-430" class="sr-only">Friday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-430" value="09:00"></td>
<td><label for="dp-h-to-431" class="sr-only">Friday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-431" value="18:00"></td>
</tr>
<tr>
<td>Saturday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-432" checked aria-label="Open on Saturday"></div></td>
<td><label for="dp-h-from-433" class="sr-only">Saturday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-433" value="10:00"></td>
<td><label for="dp-h-to-434" class="sr-only">Saturday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-434" value="14:00"></td>
</tr>
<tr>
<td>Sunday</td>
<td><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" role="switch" id="dp-h-open-435" aria-label="Open on Sunday"></div></td>
<td><label for="dp-h-from-436" class="sr-only">Sunday opens</label><input type="time" class="form-control form-control-sm" id="dp-h-from-436" value="09:00" disabled></td>
<td><label for="dp-h-to-437" class="sr-only">Sunday closes</label><input type="time" class="form-control form-control-sm" id="dp-h-to-437" value="18:00" disabled></td>
</tr>
</tbody>
</table>
</div>