Datetime

Date and time picker with calendar, time selection, native input fallback, and sizes.

Basic Datetime Trigger

Preview

Select date

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

Date

Date & Time

<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