Date and time

The four fields datetime.js enhances, each keeping its native input underneath, so a reader with no script gets the plain control and not a broken one.

Each example is live, but its links go nowhere. HTML shows the markup to copy.

field-date

A native date input, plus the natural-language combobox datetime.js arms unless the caller passes Plain. Type "tomorrow" into it.

Enhanced input: type "tomorrow", or "in 3 weeks"

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-hint id="field-date_live-hint">The day it goes live.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "Publish on"
    "Value" "2026-09-04"
    "Hint" "The day it goes live."}}

The words it parses ride out on data-rst-date-words, resolved through this page's catalog: the field parses the language the page is in.

Required, with an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-error id="field-date_error-error">Pick a date after today.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "Publish on"
    "Required" true
    "Error" "Pick a date after today."}}

Bounded

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "Within this year"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

Plain: the bare native input

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

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

Put this inside <section rst-box><form rst-form>.

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

No enhancement attributes at all, so datetime.js has nothing to find. The native picker still opens.

field-time

The same envelope around a native time input. The enhancement reads a clock rather than a calendar.

Enhanced input: type "half seven", or "noon"

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-pick-time="Open the clock" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-hint id="time_live-hint">Local time.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_live"
    "Label" "Doors open"
    "Value" "19:30"
    "Hint" "Local time."}}

Required, with an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-pick-time="Open the clock" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-error id="time_error-error">Pick a time after the sound check.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "Doors open"
    "Required" true
    "Error" "Pick a time after the sound check."}}

Bounded

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-pick-time="Open the clock" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "Between nine and eleven"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

Plain: the bare native input

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

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

Put this inside <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "Doors open"
    "Value" "19:30"
    "Plain" true}}

field-datetime

A date and a time in one input, one value.

Enhanced input: type "tomorrow", or "in 3 weeks"

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-hint id="field-datetime_live-hint">When it goes live.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "Publish on"
    "Value" "2026-09-04T19:30"
    "Hint" "When it goes live."}}

The words it parses ride out on data-rst-date-words, resolved through this page's catalog: the field parses the language the page is in.

Required, with an error

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
  <small rst-field-error id="field-datetime_error-error">Pick a date after today.</small>
</div>

Put this inside <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "Publish on"
    "Required" true
    "Error" "Pick a date after today."}}

Bounded

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
</div>

Put this inside <section rst-box><form rst-form>.

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

Plain: the bare native input

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

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

Put this inside <section rst-box><form rst-form>.

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

No enhancement attributes at all, so datetime.js has nothing to find. The native picker still opens.

field-daterange

A start and an end as one labelled. Names must be unique since IDs are derived.

Date and time, seeded

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
    </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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
    </div>
  </div>
</fieldset>

Put this inside <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "When"
    "Seed" "session"
    "Start" (dict "Label" "Starts" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "Ends" "Name" "dr_ends_at")}}

Commit the start with the end still empty and the browser fills the end in an hour later. Nothing is seeded server-side.

Dates only, with an error on the end

Desktop Mobile HTML Template

Put this inside <section rst-box><form rst-form>.

<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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
    </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;ago&#34;,&#34;am&#34;:&#34;am|a.m.&#34;,&#34;at&#34;:&#34;at&#34;,&#34;day&#34;:&#34;day|days&#34;,&#34;hour&#34;:&#34;hour|hours|h&#34;,&#34;in&#34;:&#34;in&#34;,&#34;last&#34;:&#34;last&#34;,&#34;midnight&#34;:&#34;midnight&#34;,&#34;minute&#34;:&#34;minute|minutes|min|mins|m&#34;,&#34;month&#34;:&#34;month|months&#34;,&#34;next&#34;:&#34;next&#34;,&#34;noon&#34;:&#34;noon|midday&#34;,&#34;pm&#34;:&#34;pm|p.m.&#34;,&#34;today&#34;:&#34;today&#34;,&#34;tomorrow&#34;:&#34;tomorrow&#34;,&#34;week&#34;:&#34;week|weeks&#34;,&#34;yesterday&#34;:&#34;yesterday&#34;}" data-rst-date-set="Set" data-rst-date-hint="Try: {example}" data-rst-date-pick="Open the calendar" data-rst-date-calendar="Calendar" data-rst-date-prev-month="Previous month" data-rst-date-next-month="Next month" data-rst-date-results="{n} suggestions" data-rst-date-result-one="1 suggestion" data-rst-date-quick-today="Today" data-rst-date-quick-tomorrow="Tomorrow" data-rst-date-quick-next-week="In a week" data-rst-date-quick-plus-1h="An hour later" data-rst-date-quick-plus-2h="Two hours later" data-rst-date-quick-end-of-day="End of that day" data-rst-date-quick-next-day="Same time next day">
      <small rst-field-error id="dr_to-error">The end comes before the start.</small>
    </div>
  </div>
</fieldset>

Put this inside <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Booking"
    "Kind" "date"
    "Start" (dict "Label" "From" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "The end comes before the start." "Label" "To" "Name" "dr_to" "Value" "2026-09-01")}}