Kompakter Datumsbereich
Ein Monatskalender: Anreise und Abreise antippen, die Nächte dazwischen werden markiert.
Einstellungen
Code
<div class="uv-fmd"><div class="ph"><div class="cal"><div class="hd"><b>Juni</b><span class="out">Daten wählen</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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Wofür du ihn nutzen kannst
Gemacht für Buchungsfilter auf kleinen Bildschirmen. Eine Seite für Ferienhäuser auf dem Land, ein Campingplatz oder ein Bootsverleih, bei dem Gäste An- und Abreise mit zwei Tipps wählen. Die Tage dazwischen werden eingefärbt, die Kopfzeile nennt den Zeitraum, Missverständnisse sind ausgeschlossen. Gesucht als Date Range Picker oder Buchungskalender in CSS.
Die Demo zeigt einen einzelnen Monat. Für echte Buchungen brauchst du Pfeile zum Blättern und ausgegraute Tage, die schon belegt sind. Markiere den heutigen Tag irgendwie, und sei es nur mit einem Punkt, damit man sich schnell orientiert.