date-picker component
Drop-in semantic component. See examples, sizes, variants, and source.
Date selection with a popover calendar. Compose a date-picker
wrapping a date-input, a calendar-trigger
button, and a calendar-dropdown. Add range
for a two-month range picker, primary/positive/etc.
for accent color, or the size modifiers (xs sm xl lg). Behaviour
(month navigation, date selection, range mode, preset chips) is wired by
date-picker.js.
Date Picker
Single Date Selection
<div class="date-picker-container">
<label class="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
<div class="date-picker">
<input type="text" class="date-input" placeholder="Select date" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select">
<!-- Years will be populated by JS -->
</select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates">
<!-- Dates will be populated by JS -->
</div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
</div>
Sizes
<div class="stack">
<div class="date-picker xs">
<input type="text" class="date-input" placeholder="Tiny date picker" readonly />
<button class="calendar-trigger">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker sm">
<input type="text" class="date-input" placeholder="Small date picker" readonly />
<button class="calendar-trigger">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker">
<input type="text" class="date-input" placeholder="Default date picker" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker xl">
<input type="text" class="date-input" placeholder="Large date picker" readonly />
<button class="calendar-trigger">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker lg">
<input type="text" class="date-input" placeholder="Big date picker" readonly />
<button class="calendar-trigger">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
</div>
Colors
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="date-picker primary">
<input type="text" class="date-input" placeholder="Primary" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker positive">
<input type="text" class="date-input" placeholder="Positive" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker negative">
<input type="text" class="date-input" placeholder="Negative" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker warning">
<input type="text" class="date-input" placeholder="Warning" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker info">
<input type="text" class="date-input" placeholder="Info" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
</div>
Date Range Picker
Date Range Selection
<div class="date-picker-container">
<label class="block text-sm font-medium text-gray-700 mb-1">Select Date Range</label>
<div class="date-picker range">
<input type="text" class="date-input" placeholder="Start date - End date" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="flex gap-4">
<div class="calendar-month">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<span class="month-year-label">December 2024</span>
</div>
<button class="invisible">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
</div>
<div class="calendar-month">
<div class="calendar-header">
<button class="invisible">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<span class="month-year-label">January 2025</span>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
</div>
</div>
<div class="calendar-footer">
<button class="cancel-btn">Cancel</button>
<button class="apply-btn">Apply</button>
</div>
</div>
</div>
</div>
Preset Date Ranges
Today
Yesterday
Last 7 Days
Last 30 Days
This Month
Last Month
<div class="preset-ranges">
<button
data-range="today"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
Today
</button>
<button
data-range="yesterday"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
Yesterday
</button>
<button
data-range="last7"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
Last 7 Days
</button>
<button
data-range="last30"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
Last 30 Days
</button>
<button
data-range="thisMonth"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
This Month
</button>
<button
data-range="lastMonth"
class="px-3 py-1.5 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 transition-colors"
>
Last Month
</button>
</div>
States & Validation
Input States
<div class="stack">
<div class="date-picker">
<input type="text" class="date-input" value="12/25/2024" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<div class="date-picker disabled">
<input type="text" class="date-input" placeholder="Disabled" disabled />
<button class="calendar-trigger" disabled>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
</div>
<div class="date-picker error">
<input type="text" class="date-input" placeholder="Error state" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
<span class="error-message">Please select a valid date</span>
</div>
</div>
Common Patterns
Form Integration
<div class="stack max-w-md">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
<div class="date-picker">
<input type="text" class="date-input" placeholder="MM/DD/YYYY" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
<div class="date-picker">
<input type="text" class="date-input" placeholder="MM/DD/YYYY" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
</div>
</div>
With Help Text
Date of Birth
Must be 18 years or older
<div class="max-w-md">
<label class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
<div class="date-picker">
<input type="text" class="date-input" placeholder="Select your birth date" readonly />
<button class="calendar-trigger">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
</button>
<div class="calendar-dropdown hidden">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<select class="month-select">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select class="year-select"></select>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates"></div>
<div class="calendar-footer">
<button class="today-btn">Today</button>
<button class="clear-btn">Clear</button>
</div>
</div>
</div>
<p class="mt-1 text-sm text-gray-500">Must be 18 years or older</p>
</div>
Inline Calendar
Always Visible Calendar
<div class="inline-calendar">
<div class="calendar-header">
<button class="prev-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 19l-7-7 7-7"
></path>
</svg>
</button>
<div class="month-year">
<span class="month-year-label">December 2024</span>
</div>
<button class="next-month">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
></path>
</svg>
</button>
</div>
<div class="calendar-weekdays">
<div>Su</div>
<div>Mo</div>
<div>Tu</div>
<div>We</div>
<div>Th</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="calendar-dates">
<!-- Will be populated by JS -->
</div>
</div>
Class API Reference
Type
Class
Usage
Notes
Base
date-pickerRequired wrapper for trigger + dropdown
Always required
date-inputThe input element that displays the value
Use readonly to disable typing
calendar-triggerThe calendar icon button that opens the dropdown
Sits inside date-picker
calendar-dropdownThe popover calendar panel
Toggle hidden to show / hide
Calendar Parts
calendar-headerTop bar with month / year nav
Contains prev-month, month-year, next-month
month-select / year-selectDropdowns for jumping months / years
Or use month-year-label for static text
calendar-weekdaysHeader row of day names
7 child <div>s
calendar-datesGrid of date cells
Populated by JS as date-cell children
calendar-footerBottom action row
Hosts today-btn, clear-btn, cancel-btn, apply-btn
inline-calendarAlways-visible calendar (no input/dropdown)
Standalone — replaces date-picker
Date Cell
date-cellSingle day cell (set by JS)
Inside calendar-dates
todayToday's date — accent color, bold
Modifier on date-cell
selectedSelected date — filled background
Modifier on date-cell
in-rangeDay inside a selected range
Tinted background
range-start / range-endBoundary days of a range
Rounded on the outer corner
other-month / disabledGreyed-out days
Outside current month / not selectable
Sizes
xsTiny — 24px input, 12px text
Modifier on date-picker
smSmall
Modifier on date-picker
(default) Medium
No size class needed
xlLarge
Modifier on date-picker
lgBig
Modifier on date-picker
Variant
rangeTwo-month range picker
Pair with preset-ranges chips
preset-rangesContainer of quick-pick range buttons
Children use data-range="today|last7|..."
Color
primaryBlue accent
Modifier on date-picker
positiveGreen accent
Modifier on date-picker
negativeRed accent
Modifier on date-picker
warningYellow accent
Modifier on date-picker
infoLight-blue accent
Modifier on date-picker
States
disabledDisables input + trigger
Modifier on date-picker
errorRed border + reveals error-message
Modifier on date-picker
hiddenHides the dropdown
Toggled by JS on calendar-dropdown