Data e hora

Os quatro campos que o datetime.js melhora, cada um mantendo por baixo o seu controlo nativo, para que quem não tenha scripts receba o controlo simples e não um partido.

Cada exemplo funciona de verdade, mas as suas ligações não levam a lado nenhum. HTML mostra a marcação para copiar.

field-date

Um campo de data nativo, mais a caixa de linguagem natural que o datetime.js ativa, a não ser que quem o usa passe Plain. Escreva "amanhã" nele.

Campo melhorado: escreva "amanhã" ou "daqui a 3 semanas"

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_live">Publicar em</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-hint id="field-date_live-hint">O dia em que fica ativo.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "Publicar em"
    "Value" "2026-09-04"
    "Hint" "O dia em que fica ativo."}}

As palavras que analisa saem em data-rst-date-words, resolvidas pelo catálogo desta página: o campo analisa a língua em que a página está.

Obrigatório, com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_error">Publicar em <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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-error id="field-date_error-error">Escolha uma data posterior a hoje.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "Publicar em"
    "Required" true
    "Error" "Escolha uma data posterior a hoje."}}

Com limites

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_bounded">Dentro deste ano</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "Dentro deste ano"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

Plain: o campo nativo tal e qual

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

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

Sem nenhum atributo de melhoria, por isso o datetime.js não encontra nada. O seletor nativo continua a abrir.

field-time

O mesmo invólucro à volta de um campo de hora nativo. A melhoria lê um relógio em vez de um calendário.

Campo melhorado: escreva "sete e meia" ou "meio-dia"

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_live">Abertura de portas</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-pick-time="Abrir o relógio" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-hint id="time_live-hint">Hora local.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

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

Obrigatório, com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_error">Abertura de portas <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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-pick-time="Abrir o relógio" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-error id="time_error-error">Escolha uma hora depois do ensaio de som.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "Abertura de portas"
    "Required" true
    "Error" "Escolha uma hora depois do ensaio de som."}}

Com limites

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_bounded">Entre as nove e as onze</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-pick-time="Abrir o relógio" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "Entre as nove e as onze"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

Plain: o campo nativo tal e qual

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

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

field-datetime

Uma data e uma hora num só campo, um só valor.

Campo melhorado: escreva "amanhã" ou "daqui a 3 semanas"

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_live">Publicar em</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-hint id="field-datetime_live-hint">Quando fica ativo.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "Publicar em"
    "Value" "2026-09-04T19:30"
    "Hint" "Quando fica ativo."}}

As palavras que analisa saem em data-rst-date-words, resolvidas pelo catálogo desta página: o campo analisa a língua em que a página está.

Obrigatório, com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_error">Publicar em <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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
  <small rst-field-error id="field-datetime_error-error">Escolha uma data posterior a hoje.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "Publicar em"
    "Required" true
    "Error" "Escolha uma data posterior a hoje."}}

Com limites

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">Dentro deste ano</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

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

Plain: o campo nativo tal e qual

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

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

Sem nenhum atributo de melhoria, por isso o datetime.js não encontra nada. O seletor nativo continua a abrir.

field-daterange

Um início e um fim como um único grupo com etiqueta. Os Name têm de ser diferentes, porque é deles que derivam os ids.

Data e hora, com valores iniciais

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Quando</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">Começa</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
    </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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
    </div>
  </div>
</fieldset>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Quando"
    "Seed" "session"
    "Start" (dict "Label" "Começa" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "Termina" "Name" "dr_ends_at")}}

Confirme o início com o fim ainda vazio e o navegador preenche o fim uma hora depois. Nada vem preenchido do servidor.

Só datas, com um erro no fim

Computador Telemóvel HTML Template

Coloque isto 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">De</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
    </div>
    <div rst-field>
      <label rst-field-label for="dr_to">Até</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;atrás|atras|há|ha&#34;,&#34;am&#34;:&#34;am|a.m.|manhã|manha&#34;,&#34;at&#34;:&#34;às|as|à|a&#34;,&#34;day&#34;:&#34;dia|dias&#34;,&#34;hour&#34;:&#34;hora|horas|h&#34;,&#34;in&#34;:&#34;em|daqui&#34;,&#34;last&#34;:&#34;passado|passada|último|ultimo|última|ultima|anterior&#34;,&#34;midnight&#34;:&#34;meia-noite|meia noite&#34;,&#34;minute&#34;:&#34;minuto|minutos|min|mins|m&#34;,&#34;month&#34;:&#34;mês|mes|meses&#34;,&#34;next&#34;:&#34;próximo|proximo|próxima|proxima|seguinte&#34;,&#34;noon&#34;:&#34;meio-dia|meio dia&#34;,&#34;pm&#34;:&#34;pm|p.m.|tarde|noite&#34;,&#34;today&#34;:&#34;hoje&#34;,&#34;tomorrow&#34;:&#34;amanhã|amanha&#34;,&#34;week&#34;:&#34;semana|semanas&#34;,&#34;yesterday&#34;:&#34;ontem&#34;}" data-rst-date-set="Definir" data-rst-date-hint="Experimente: {example}" data-rst-date-pick="Abrir o calendário" data-rst-date-calendar="Calendário" data-rst-date-prev-month="Mês anterior" data-rst-date-next-month="Mês seguinte" data-rst-date-results="{n} sugestões" data-rst-date-result-one="1 sugestão" data-rst-date-quick-today="Hoje" data-rst-date-quick-tomorrow="Amanhã" data-rst-date-quick-next-week="Dentro de uma semana" data-rst-date-quick-plus-1h="Uma hora depois" data-rst-date-quick-plus-2h="Duas horas depois" data-rst-date-quick-end-of-day="Fim desse dia" data-rst-date-quick-next-day="À mesma hora no dia seguinte">
      <small rst-field-error id="dr_to-error">O fim vem antes do início.</small>
    </div>
  </div>
</fieldset>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Reserva"
    "Kind" "date"
    "Start" (dict "Label" "De" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "O fim vem antes do início." "Label" "Até" "Name" "dr_to" "Value" "2026-09-01")}}