Date Range Picker

Dual calendar picker with preset ranges, range highlighting, and responsive mobile layout.

Basic Date Range

Preview

January 2025

SuMoTuWeThFrSa

<div class="date-range date-range-open">
  <button class="date-range-trigger">
    <svg class="date-range-trigger-icon" xmlns="http://www.w3.org/2000/svg" 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 class="date-range-trigger-text">Jan 15 — Jan 22, 2025</span>
    <svg class="date-range-trigger-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="date-range-panel">
    <div class="date-range-presets">
      <button class="date-range-preset">Today</button>
      <button class="date-range-preset date-range-preset-active">Last 7 days</button>
      <button class="date-range-preset">Last 30 days</button>
      <button class="date-range-preset">This month</button>
      <button class="date-range-preset">Last month</button>
      <button class="date-range-preset">Custom</button>
    </div>
    <div class="date-range-calendars">
      <div class="date-range-calendar">
        <div class="date-range-calendar-header">
          <span class="date-range-calendar-title">January 2025</span>
          <div class="date-range-calendar-nav">
            <button class="date-range-nav-btn"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></button>
          </div>
        </div>
        <div class="date-range-weekdays">
          <span class="date-range-weekday">Su</span><span class="date-range-weekday">Mo</span><span class="date-range-weekday">Tu</span><span class="date-range-weekday">We</span><span class="date-range-weekday">Th</span><span class="date-range-weekday">Fr</span><span class="date-range-weekday">Sa</span>
        </div>
        <div class="date-range-days">
          <button class="date-range-day date-range-day-outside">29</button>
          <button class="date-range-day date-range-day-outside">30</button>
          <button class="date-range-day date-range-day-outside">31</button>
          <button class="date-range-day">1</button><button class="date-range-day">2</button><button class="date-range-day">3</button><button class="date-range-day">4</button>
          <button class="date-range-day">5</button><button class="date-range-day">6</button><button class="date-range-day">7</button><button class="date-range-day">8</button>
          <button class="date-range-day">9</button><button class="date-range-day">10</button><button class="date-range-day">11</button>
          <button class="date-range-day">12</button><button class="date-range-day">13</button><button class="date-range-day">14</button>
          <button class="date-range-day date-range-day-start">15</button>
          <button class="date-range-day date-range-day-in-range">16</button>
          <button class="date-range-day date-range-day-in-range">17</button>
          <button class="date-range-day date-range-day-in-range">18</button>
          <button class="date-range-day date-range-day-in-range">19</button>
          <button class="date-range-day date-range-day-in-range">20</button>
          <button class="date-range-day date-range-day-in-range">21</button>
          <button class="date-range-day date-range-day-end">22</button>
          <button class="date-range-day">23</button><button class="date-range-day">24</button><button class="date-range-day">25</button>
          <button class="date-range-day">26</button><button class="date-range-day">27</button><button class="date-range-day">28</button>
          <button class="date-range-day">29</button><button class="date-range-day">30</button><button class="date-range-day">31</button>
        </div>
      </div>
    </div>
    <div class="date-range-footer">
      <span class="date-range-selected">Jan 15 — Jan 22</span>
      <div class="date-range-actions">
        <button class="date-range-btn date-range-btn-cancel">Cancel</button>
        <button class="date-range-btn date-range-btn-apply">Apply</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative inline-block">
  <button class="inline-flex items-center gap-2 min-w-70 h-11 px-3 bg-base-100 border border-base-300 rounded-field text-base text-base-content cursor-pointer hover:border-base-content/30">
    <svg class="size-4.5 text-base-content/60 shrink-0" xmlns="http://www.w3.org/2000/svg" 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 class="flex-1 text-left truncate">Jan 15 &mdash; Jan 22, 2025</span>
    <svg class="size-4 text-base-content/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div class="absolute top-full mt-1 left-0 z-100 flex bg-base-100 border border-base-300 rounded-box shadow-lg overflow-hidden">
    <!-- Presets sidebar -->
    <div class="w-40 p-2 bg-base-200/50 border-r border-base-300">
      <button class="block w-full px-3 py-2 text-sm text-base-content bg-transparent border-none rounded text-left cursor-pointer hover:bg-base-100">Today</button>
      <button class="block w-full px-3 py-2 text-sm text-primary-content bg-primary border-none rounded text-left cursor-pointer">Last 7 days</button>
      <button class="block w-full px-3 py-2 text-sm text-base-content bg-transparent border-none rounded text-left cursor-pointer hover:bg-base-100">Last 30 days</button>
      <button class="block w-full px-3 py-2 text-sm text-base-content bg-transparent border-none rounded text-left cursor-pointer hover:bg-base-100">This month</button>
      <button class="block w-full px-3 py-2 text-sm text-base-content bg-transparent border-none rounded text-left cursor-pointer hover:bg-base-100">Last month</button>
      <button class="block w-full px-3 py-2 text-sm text-base-content bg-transparent border-none rounded text-left cursor-pointer hover:bg-base-100">Custom</button>
    </div>
    <!-- Calendar -->
    <div class="flex p-4">
      <div class="w-70">
        <div class="flex items-center justify-between mb-3">
          <span class="text-[0.9375rem] font-semibold text-base-content">January 2025</span>
          <button class="flex items-center justify-center size-7 bg-transparent border-none rounded text-base-content/60 cursor-pointer hover:bg-base-200"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg></button>
        </div>
        <div class="grid grid-cols-7 mb-1">
          <span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Su</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Mo</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Tu</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">We</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Th</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Fr</span><span class="py-2 text-xs font-medium text-base-content/40 text-center uppercase">Sa</span>
        </div>
        <div class="grid grid-cols-7">
          <button class="flex items-center justify-center h-9 text-sm text-base-content/30 bg-transparent border-none">29</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content/30 bg-transparent border-none">30</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content/30 bg-transparent border-none">31</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">1</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">2</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">3</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">4</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">5</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">6</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">7</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">8</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">9</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">10</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">11</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">12</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">13</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">14</button>
          <button class="flex items-center justify-center h-9 text-sm bg-primary text-primary-content rounded-l-field z-1">15</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">16</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">17</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">18</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">19</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">20</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-primary/10 border-none">21</button>
          <button class="flex items-center justify-center h-9 text-sm bg-primary text-primary-content rounded-r-field z-1">22</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">23</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">24</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">25</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">26</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">27</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">28</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">29</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">30</button>
          <button class="flex items-center justify-center h-9 text-sm text-base-content bg-transparent border-none cursor-pointer hover:bg-base-200 hover:rounded">31</button>
        </div>
      </div>
    </div>
    <!-- Footer -->
    <div class="flex items-center justify-between px-4 py-3 bg-base-200/50 border-t border-base-300">
      <span class="text-sm text-base-content/60">Jan 15 &mdash; Jan 22</span>
      <div class="flex gap-2">
        <button class="px-4 py-2 text-sm font-medium text-base-content/60 bg-transparent border border-base-300 rounded-field cursor-pointer hover:bg-base-100">Cancel</button>
        <button class="px-4 py-2 text-sm font-medium bg-primary text-primary-content border border-primary rounded-field cursor-pointer">Apply</button>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// Toggle: add/remove .date-range-open on container
// Day click: set start/end, highlight in-range days
// Preset click: set active preset, update calendar selection
// Apply: close picker and update trigger text

Class	Description
`.date-range`	Container
`.date-range-open`	Open state
`.date-range-trigger`	Trigger button
`.date-range-trigger-icon`	Calendar icon
`.date-range-trigger-text`	Selected range text
`.date-range-panel`	Dropdown panel
`.date-range-panel-right`	Right-aligned panel
`.date-range-presets`	Presets sidebar
`.date-range-preset`	Preset button
`.date-range-preset-active`	Active preset
`.date-range-calendars`	Calendars container
`.date-range-calendar`	Single calendar (280px)
`.date-range-day-start`	Range start day
`.date-range-day-end`	Range end day
`.date-range-day-in-range`	Day within range
`.date-range-footer`	Footer with actions
`.date-range-btn-apply`	Apply button
`.date-range-btn-cancel`	Cancel button
`.date-range-single`	Single calendar mode
`.date-range-no-presets`	Hide presets sidebar
`.date-range-sm`	Small trigger
`.date-range-lg`	Large trigger
`.date-range.glass`	Glass variant