Datetime
Date and time picker with calendar, time selection, native input fallback, and sizes.
Basic Datetime Trigger
Preview
Feb 14, 2025
February 2025
Su
Mo
Tu
We
Th
Fr
Sa
<div class="datetime datetime-open">
<label class="datetime-label">Select date</label>
<div class="datetime-trigger">
<span class="datetime-value">Feb 14, 2025</span>
<span class="datetime-icon"><svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></span>
</div>
<div class="datetime-picker">
<div class="calendar-header">
<button class="calendar-nav"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></button>
<span class="calendar-title">February 2025</span>
<button class="calendar-nav"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
<div class="calendar-weekdays">
<span class="calendar-weekday">Su</span>
<span class="calendar-weekday">Mo</span>
<span class="calendar-weekday">Tu</span>
<span class="calendar-weekday">We</span>
<span class="calendar-weekday">Th</span>
<span class="calendar-weekday">Fr</span>
<span class="calendar-weekday">Sa</span>
</div>
<div class="calendar-days">
<button class="calendar-day calendar-day-other">26</button>
<button class="calendar-day calendar-day-other">27</button>
<button class="calendar-day calendar-day-other">28</button>
<button class="calendar-day calendar-day-other">29</button>
<button class="calendar-day calendar-day-other">30</button>
<button class="calendar-day calendar-day-other">31</button>
<button class="calendar-day">1</button>
<button class="calendar-day">2</button>
<button class="calendar-day">3</button>
<button class="calendar-day">4</button>
<button class="calendar-day">5</button>
<button class="calendar-day">6</button>
<button class="calendar-day">7</button>
<button class="calendar-day">8</button>
<button class="calendar-day">9</button>
<button class="calendar-day">10</button>
<button class="calendar-day">11</button>
<button class="calendar-day">12</button>
<button class="calendar-day">13</button>
<button class="calendar-day calendar-day-selected">14</button>
<button class="calendar-day">15</button>
<button class="calendar-day">16</button>
<button class="calendar-day">17</button>
<button class="calendar-day">18</button>
<button class="calendar-day">19</button>
<button class="calendar-day">20</button>
<button class="calendar-day">21</button>
<button class="calendar-day">22</button>
<button class="calendar-day">23</button>
<button class="calendar-day">24</button>
<button class="calendar-day">25</button>
<button class="calendar-day">26</button>
<button class="calendar-day">27</button>
<button class="calendar-day">28</button>
</div>
</div>
</div> Requires: ux.min.css
<div class="relative flex flex-col w-full">
<label class="mb-1 text-sm font-medium text-base-content/60">Select date</label>
<button class="flex items-center w-full px-4 bg-base-100 border border-primary rounded-field" style="min-height: 44px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 15%, transparent);">
<span class="flex-1 text-base text-base-content text-left">Feb 14, 2025</span>
<svg class="size-5 text-base-content/60 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
</button>
<div class="absolute top-full mt-1 left-0 min-w-70 bg-base-100 border border-base-300 rounded-box shadow-xl z-100 overflow-hidden">
<div class="flex items-center justify-between p-3 border-b border-base-300">
<button class="flex items-center justify-center size-9 p-0 bg-transparent border-none rounded-full cursor-pointer text-primary hover:bg-primary/10"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></button>
<span class="text-base font-semibold text-base-content">February 2025</span>
<button class="flex items-center justify-center size-9 p-0 bg-transparent border-none rounded-full cursor-pointer text-primary hover:bg-primary/10"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
<div class="grid grid-cols-7 px-2 py-1 border-b border-base-300">
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Su</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Mo</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Tu</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">We</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Th</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Fr</span>
<span class="flex items-center justify-center h-8 text-xs font-semibold text-base-content/40 uppercase">Sa</span>
</div>
<div class="grid grid-cols-7 p-2 gap-0.5">
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">26</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">27</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">28</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">29</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">30</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content/30 bg-transparent border-none rounded-full">31</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">1</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">2</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">3</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">4</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">5</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">6</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">7</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">8</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">9</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">10</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">11</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">12</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">13</button>
<button class="flex items-center justify-center size-9 text-sm bg-primary text-primary-content rounded-full cursor-pointer">14</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">15</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">16</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">17</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">18</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">19</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">20</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">21</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">22</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">23</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">24</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">25</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">26</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">27</button>
<button class="flex items-center justify-center size-9 text-sm text-base-content bg-transparent border-none rounded-full cursor-pointer hover:bg-base-200">28</button>
</div>
</div>
</div> Requires: tw.min.css
// Open/close: toggle .datetime-open on container
// Day click: add .calendar-day-selected to chosen day
// Month nav: update calendar-title text and re-render days Native Input
Preview
<div class="datetime">
<label class="datetime-label">Date</label>
<input type="date" class="datetime-native" value="2025-02-14" />
</div>
<div class="datetime mt-4">
<label class="datetime-label">Date & Time</label>
<input type="datetime-local" class="datetime-native" value="2025-02-14T10:30" />
</div> Requires: ux.min.css
<input type="date" class="w-full h-11 px-4 bg-base-100 border border-base-300 rounded-field text-base" value="2025-02-14" /> Requires: tw.min.css
// Native date inputs require no JavaScript — the browser provides the picker Time Picker
Preview
Hour
:
Min
<div class="time-picker">
<div class="time-picker-column">
<span class="time-picker-label">Hour</span>
<input class="time-picker-input" type="number" min="1" max="12" value="10" />
</div>
<span class="time-picker-separator">:</span>
<div class="time-picker-column">
<span class="time-picker-label">Min</span>
<input class="time-picker-input" type="number" min="0" max="59" value="30" />
</div>
<div class="time-picker-period">
<button class="time-picker-period-btn time-picker-period-btn-active">AM</button>
<button class="time-picker-period-btn">PM</button>
</div>
</div> Requires: ux.min.css
<div class="flex items-center justify-center gap-2 p-4">
<input class="w-15 h-11 text-xl font-semibold text-center bg-base-200 rounded-field border-none" type="number" value="10" />
<span class="text-xl font-semibold pt-4">:</span>
<input class="w-15 h-11 text-xl font-semibold text-center bg-base-200 rounded-field border-none" type="number" value="30" />
<div class="flex flex-col gap-0.5 ml-2">
<button class="px-2 py-1 text-xs font-semibold bg-primary text-primary-content rounded">AM</button>
<button class="px-2 py-1 text-xs font-semibold text-base-content/60 rounded">PM</button>
</div>
</div> Requires: tw.min.css
// Increment/decrement: constrain input values to valid ranges
// Period toggle: toggle active class between AM/PM buttons | Class | Description |
|---|---|
.datetime | Base container |
.datetime-open | Open state (shows picker) |
.datetime-label | Label text |
.datetime-trigger | Trigger button |
.datetime-value | Selected value text |
.datetime-placeholder | Placeholder text |
.datetime-icon | Calendar icon |
.datetime-native | Native date/time input |
.datetime-picker | Picker dropdown |
.datetime-sm | Small size |
.datetime-lg | Large size |
.datetime-disabled | Disabled state |
.datetime.glass | Glass variant |
.calendar-header | Calendar header |
.calendar-nav | Nav button (prev/next) |
.calendar-title | Month/year title |
.calendar-weekdays | Weekday row |
.calendar-days | Days grid |
.calendar-day | Day button |
.calendar-day-selected | Selected day |
.calendar-day-today | Today highlight |
.calendar-day-other | Other month day |
.calendar-day-disabled | Disabled day |
.time-picker | Time picker row |
.time-picker-input | Hour/minute input |
.time-picker-period-btn | AM/PM button |