Compact date range picker
A one-month calendar: tap a check-in day and a check-out day, and the nights in between fill in.
Settings
Code
<div class="uv-fmd"><div class="ph"><div class="cal"><div class="hd"><b>June</b><span class="out">Choose dates</span></div><div class="wk"><span>L</span><span>M</span><span>X</span><span>J</span><span>V</span><span>S</span><span>D</span></div><div class="gd"><button data-d="1">1</button><button data-d="2">2</button><button data-d="3">3</button><button data-d="4">4</button><button data-d="5">5</button><button data-d="6">6</button><button data-d="7">7</button><button data-d="8">8</button><button data-d="9">9</button><button data-d="10">10</button><button data-d="11">11</button><button data-d="12">12</button><button data-d="13">13</button><button data-d="14">14</button><button data-d="15">15</button><button data-d="16">16</button><button data-d="17">17</button><button data-d="18">18</button><button data-d="19">19</button><button data-d="20">20</button><button data-d="21">21</button><button data-d="22">22</button><button data-d="23">23</button><button data-d="24">24</button><button data-d="25">25</button><button data-d="26">26</button><button data-d="27">27</button><button data-d="28">28</button><button data-d="29">29</button><button data-d="30">30</button></div></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Made for booking filters on small screens. A rural cottage site, a campsite or a boat rental where guests pick arrival and departure in two taps. The days in between are shaded and the header spells out the range, so there's no doubt about the dates. People search for this as a date range picker or booking calendar in CSS.
The demo shows a single month. For real bookings, add arrows to move between months and grey out days that are already taken. Mark today somehow, even with just a dot, so people get their bearings fast.