Idioma

English Gaeilge 简体中文 Español हिन्दी Português বাংলা Русский 日本語廣東話 Tiếng Việt العربية

sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: plain. Idioma: Español.

Fecha y hora

Los cuatro campos que datetime.js mejora, cada uno conservando debajo su control nativo, de modo que quien no tenga scripts obtiene el control sencillo y no uno roto.

Elementos de interfaz ya hechos y coherentes entre sí, renderizados en el servidor.

El vocabulario del propio framework los llama partials: ui.Templates() devuelve partials, y docs/site/templates.md los documenta con ese nombre. La palabra de esta página cambió; la del código, no.

Los enlaces aquí no están activos

Enlaces inactivos; se facilita el código del ejemplo.

Cada ejemplo de abajo va en su propio marco.

El contenido de ejemplo está en inglés. Los armazones de ejemplo sí están traducidos.

field-date

Un campo de fecha nativo, más el combo de lenguaje natural que activa datetime.js salvo que quien lo use pase Plain. Escribe "mañana" en él.

Campo mejorado: escribe "mañana" o "en 3 semanas"

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_live">Publish on</label>
  <input rst-input id="field-date_live" name="field-date_live" type="date" value="2026-09-04" aria-describedby="field-date_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-hint id="field-date_live-hint">The day it goes live.</small>
</div></form></section>

Las palabras que analiza salen en data-rst-date-words, resueltas con el catálogo de esta página: el campo analiza el idioma en el que está la página.

Obligatorio, con un error

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_error">Publish on <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-date_error" name="field-date_error" type="date" required aria-invalid="true" aria-describedby="field-date_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-error id="field-date_error-error">Pick a date after today.</small>
</div></form></section>

Con límites

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_bounded">Within this year</label>
  <input rst-input id="field-date_bounded" name="field-date_bounded" type="date" value="2026-09-04" min="2026-01-01" max="2026-12-31" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div></form></section>

Plain: el campo nativo tal cual

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-date_plain">Publish on</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div></form></section>

Sin ningún atributo de mejora, así que datetime.js no encuentra nada. El selector nativo se sigue abriendo.

field-time

La misma envoltura alrededor de un campo de hora nativo. La mejora lee un reloj en vez de un calendario.

Campo mejorado: escribe "siete y media" o "mediodía"

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_live">Doors open</label>
  <input rst-input id="time_live" name="time_live" type="time" value="19:30" aria-describedby="time_live-hint" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-pick-time="Abrir el reloj" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-hint id="time_live-hint">Local time.</small>
</div></form></section>

Obligatorio, con un error

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_error">Doors open <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="time_error" name="time_error" type="time" required aria-invalid="true" aria-describedby="time_error-error" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-pick-time="Abrir el reloj" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-error id="time_error-error">Pick a time after the sound check.</small>
</div></form></section>

Con límites

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_bounded">Between nine and eleven</label>
  <input rst-input id="time_bounded" name="time_bounded" type="time" value="19:30" min="09:00" max="23:00" data-rst-time data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-pick-time="Abrir el reloj" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div></form></section>

Plain: el campo nativo tal cual

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="time_plain">Doors open</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div></form></section>

field-datetime

Una fecha y una hora en un solo campo, un solo valor.

Campo mejorado: escribe "mañana" o "en 3 semanas"

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_live">Publish on</label>
  <input rst-input id="field-datetime_live" name="field-datetime_live" type="datetime-local" value="2026-09-04T19:30" aria-describedby="field-datetime_live-hint" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-hint id="field-datetime_live-hint">When it goes live.</small>
</div></form></section>

Las palabras que analiza salen en data-rst-date-words, resueltas con el catálogo de esta página: el campo analiza el idioma en el que está la página.

Obligatorio, con un error

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_error">Publish on <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="field-datetime_error" name="field-datetime_error" type="datetime-local" required aria-invalid="true" aria-describedby="field-datetime_error-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-error id="field-datetime_error-error">Pick a date after today.</small>
</div></form></section>

Con límites

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_bounded">Within this year</label>
  <input rst-input id="field-datetime_bounded" name="field-datetime_bounded" type="datetime-local" value="2026-09-04T19:30" min="2026-01-01T00:00" max="2026-12-31T23:59" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div></form></section>

Plain: el campo nativo tal cual

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="field-datetime_plain">Publish on</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div></form></section>

Sin ningún atributo de mejora, así que datetime.js no encuentra nada. El selector nativo se sigue abriendo.

field-daterange

Un inicio y un fin como un solo grupo etiquetado. Los Name deben ser distintos, porque de ellos se derivan los ids.

Fecha y hora, con valores iniciales

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><fieldset rst-field-range>
  <legend>When</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
  <label rst-field-label for="dr_starts_at">Starts</label>
  <input rst-input id="dr_starts_at" name="dr_starts_at" type="datetime-local" value="2026-09-04T19:30" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div>
    <div rst-field>
  <label rst-field-label for="dr_ends_at">Ends</label>
  <input rst-input id="dr_ends_at" name="dr_ends_at" type="datetime-local" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div>
  </div>
</fieldset></form></section>

Confirma el inicio con el fin todavía vacío y el navegador rellena el fin una hora más tarde. No hay nada precargado desde el servidor.

Solo fechas, con un error en el fin

Escritorio Móvil Código

<section rst-box><form rst-form method="post" action="#"><fieldset rst-field-range>
  <legend>Booking</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
  <label rst-field-label for="dr_from">From</label>
  <input rst-input id="dr_from" name="dr_from" type="date" value="2026-09-04" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
</div>
    <div rst-field>
  <label rst-field-label for="dr_to">To</label>
  <input rst-input id="dr_to" name="dr_to" type="date" value="2026-09-01" aria-invalid="true" aria-describedby="dr_to-error" data-rst-date data-rst-date-words="{&#34;ago&#34;:&#34;hace&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;a|las|la&#34;,&#34;day&#34;:&#34;día|dia|días|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;en&#34;,&#34;last&#34;:&#34;pasado|pasada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;medianoche&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|siguiente&#34;,&#34;noon&#34;:&#34;mediodía|mediodia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noche&#34;,&#34;today&#34;:&#34;hoy&#34;,&#34;tomorrow&#34;:&#34;mañana|manana&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ayer&#34;}" data-rst-date-set="Establecer" data-rst-date-hint="Prueba: {example}" data-rst-date-pick="Abrir el calendario" data-rst-date-calendar="Calendario" data-rst-date-prev-month="Mes anterior" data-rst-date-next-month="Mes siguiente" data-rst-date-results="{n} sugerencias" data-rst-date-result-one="1 sugerencia" data-rst-date-quick-today="Hoy" data-rst-date-quick-tomorrow="Mañana" data-rst-date-quick-next-week="Dentro de una semana" data-rst-date-quick-plus-1h="Una hora después" data-rst-date-quick-plus-2h="Dos horas después" data-rst-date-quick-end-of-day="Final de ese día" data-rst-date-quick-next-day="A la misma hora del día siguiente">
  <small rst-field-error id="dr_to-error">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>