Idioma

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

sistema de design do rastrillo

Uma visão geral de tudo o que o sistema de design oferece. Tema: signal. Idioma: Português.

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.

Elementos de interface já feitos e coerentes entre si, renderizados no servidor.

O vocabulário do próprio framework chama-lhes partials: ui.Templates() devolve partials e docs/site/templates.md documenta-os com esse nome. A palavra desta página mudou; a do código não.

As ligações aqui não estão ativas

Ligações inativas; o código do exemplo é fornecido.

Cada exemplo abaixo fica na sua própria moldura.

O conteúdo de exemplo está em inglês. Os invólucros de exemplo estão traduzidos.

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 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;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">The day it goes live.</small>
</div></form></section>

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 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;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">Pick a date after today.</small>
</div></form></section>

Com limites

Computador Telemóvel 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;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></form></section>

Plain — o campo nativo tal e qual

Computador Telemóvel 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>

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 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;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">Local time.</small>
</div></form></section>

Obrigatório, com um erro

Computador Telemóvel 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;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">Pick a time after the sound check.</small>
</div></form></section>

Com limites

Computador Telemóvel 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;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></form></section>

Plain — o campo nativo tal e qual

Computador Telemóvel 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

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

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

Computador Telemóvel 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;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">When it goes live.</small>
</div></form></section>

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 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;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">Pick a date after today.</small>
</div></form></section>

Com limites

Computador Telemóvel 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;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></form></section>

Plain — o campo nativo tal e qual

Computador Telemóvel 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>

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 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;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">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;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></form></section>

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 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;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">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;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">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>