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.

Cada ejemplo funciona de verdad, pero sus enlaces no llevan a ninguna parte. HTML muestra el marcado para copiar.

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_live">Publicar el</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">El día en que se publica.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "Publicar el"
    "Value" "2026-09-04"
    "Hint" "El día en que se publica."}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_error">Publicar el <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">Elige una fecha posterior a hoy.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "Publicar el"
    "Required" true
    "Error" "Elige una fecha posterior a hoy."}}

Con límites

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_bounded">Dentro de este año</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>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "Dentro de este año"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

Plain: el campo nativo tal cual

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_plain">Publicar el</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_plain"
    "Label" "Publicar el"
    "Value" "2026-09-04"
    "Plain" true}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_live">Apertura de puertas</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">Hora local.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_live"
    "Label" "Apertura de puertas"
    "Value" "19:30"
    "Hint" "Hora local."}}

Obligatorio, con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_error">Apertura de puertas <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">Elige una hora posterior a la prueba de sonido.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "Apertura de puertas"
    "Required" true
    "Error" "Elige una hora posterior a la prueba de sonido."}}

Con límites

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_bounded">Entre las nueve y las once</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>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "Entre las nueve y las once"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

Plain: el campo nativo tal cual

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_plain">Apertura de puertas</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "Apertura de puertas"
    "Value" "19:30"
    "Plain" true}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_live">Publicar el</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">Cuándo se publica.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "Publicar el"
    "Value" "2026-09-04T19:30"
    "Hint" "Cuándo se publica."}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_error">Publicar el <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">Elige una fecha posterior a hoy.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "Publicar el"
    "Required" true
    "Error" "Elige una fecha posterior a hoy."}}

Con límites

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">Dentro de este año</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>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_bounded"
    "Label" "Dentro de este año"
    "Value" "2026-09-04T19:30"
    "Min" "2026-01-01T00:00"
    "Max" "2026-12-31T23:59"}}

Plain: el campo nativo tal cual

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_plain">Publicar el</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_plain"
    "Label" "Publicar el"
    "Value" "2026-09-04T19:30"
    "Plain" true}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Cuándo</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">Empieza</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">Termina</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>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Cuándo"
    "Seed" "session"
    "Start" (dict "Label" "Empieza" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "Termina" "Name" "dr_ends_at")}}

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 HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Reserva</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
      <label rst-field-label for="dr_from">Desde</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">Hasta</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">El final es anterior al inicio.</small>
    </div>
  </div>
</fieldset>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Reserva"
    "Kind" "date"
    "Start" (dict "Label" "Desde" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "El final es anterior al inicio." "Label" "Hasta" "Name" "dr_to" "Value" "2026-09-01")}}