Filtro de fechas compacto
Un calendario de un mes donde tocas el día de entrada y el de salida y se marcan las noches entre medias.
Ajustes
Código
<div class="uv-fmd"><div class="ph"><div class="cal"><div class="hd"><b>Junio</b><span class="out">Elige fechas</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Pensado para filtros de reserva en pantallas pequeñas. Una web de casas rurales, un camping o un alquiler de barcos donde se elige llegada y salida en dos toques. Los días intermedios se sombrean y la cabecera escribe el rango, así no hay dudas con las fechas. Se busca como selector de rango de fechas o calendario de reservas.
La demo enseña un solo mes. Para reservas reales, añade flechas para cambiar de mes y apaga los días ya ocupados. Marca el día de hoy de alguna forma, aunque sea con un punto, para que la gente se ubique rápido.