跳到內容
欄目
語言，而家係廣東話
Rastrillo 設計系統
語言，而家係廣東話
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

日期同時間

datetime.js 加強嘅四個欄位，每個下面都保留原生輸入元件，所以冇腳本嘅讀者見到嘅係樸素嘅控件，唔係壞咗嘅。

每個例子都真係用得，不過入面啲連結唔會帶你去邊度。 HTML 顯示可以複製嘅標記。

field-date

原生日期輸入框，加上 datetime.js 開嘅自然語言組合框（除非叫佢嗰陣傳咗 Plain）。試吓打「聽日」入去。

增強輸入：打「聽日」或者「3 個星期後」

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-date_live">發佈日期</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-hint id="field-date_live-hint">上線嗰日。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "發佈日期"
    "Value" "2026-09-04"
    "Hint" "上線嗰日。"}}

佢識解嘅字係經 data-rst-date-words 傳出去嘅，由呢一版嘅目錄查返嚟：個欄位解嘅就係呢一版用緊嗰種語言。

必填，仲有錯誤

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-date_error">發佈日期 <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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-error id="field-date_error-error">揀一個今日之後嘅日子。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "發佈日期"
    "Required" true
    "Error" "揀一個今日之後嘅日子。"}}

有上下限

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-date_bounded">今年之內</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "今年之內"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

Plain：冇加嘢嘅原生輸入框

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-date_plain">發佈日期</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-date" dict
    "Name" "field-date_plain"
    "Label" "發佈日期"
    "Value" "2026-09-04"
    "Plain" true}}

完全冇加強用嘅屬性，所以 datetime.js 搵唔到嘢。原生揀選器照樣開得到。

field-time

一樣嘅外殼，今次包住原生時間輸入框。呢個加強讀嘅係鐘，唔係日曆。

增強輸入：打「七點半」或者「晏晝」

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="time_live">開門時間</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-pick-time="打開時鐘" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-hint id="time_live-hint">當地時間。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-time" dict
    "Name" "time_live"
    "Label" "開門時間"
    "Value" "19:30"
    "Hint" "當地時間。"}}

必填，仲有錯誤

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="time_error">開門時間 <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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-pick-time="打開時鐘" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-error id="time_error-error">揀一個試音之後嘅時間。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-time" dict
    "Name" "time_error"
    "Label" "開門時間"
    "Required" true
    "Error" "揀一個試音之後嘅時間。"}}

有上下限

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="time_bounded">九點到十一點之間</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-pick-time="打開時鐘" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "九點到十一點之間"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

Plain：冇加嘢嘅原生輸入框

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="time_plain">開門時間</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "開門時間"
    "Value" "19:30"
    "Plain" true}}

field-datetime

一個輸入框入面有日期同時間，一個值。

增強輸入：打「聽日」或者「3 個星期後」

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-datetime_live">發佈日期</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-hint id="field-datetime_live-hint">幾時上線。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "發佈日期"
    "Value" "2026-09-04T19:30"
    "Hint" "幾時上線。"}}

佢識解嘅字係經 data-rst-date-words 傳出去嘅，由呢一版嘅目錄查返嚟：個欄位解嘅就係呢一版用緊嗰種語言。

必填，仲有錯誤

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-datetime_error">發佈日期 <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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
  <small rst-field-error id="field-datetime_error-error">揀一個今日之後嘅日子。</small>
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "發佈日期"
    "Required" true
    "Error" "揀一個今日之後嘅日子。"}}

有上下限

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">今年之內</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
</div>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-datetime" dict
    "Name" "field-datetime_bounded"
    "Label" "今年之內"
    "Value" "2026-09-04T19:30"
    "Min" "2026-01-01T00:00"
    "Max" "2026-12-31T23:59"}}

Plain：冇加嘢嘅原生輸入框

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

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

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-datetime" dict
    "Name" "field-datetime_plain"
    "Label" "發佈日期"
    "Value" "2026-09-04T19:30"
    "Plain" true}}

完全冇加強用嘅屬性，所以 datetime.js 搵唔到嘢。原生揀選器照樣開得到。

field-daterange

開始同結束做一個有標籤嘅組合。兩者嘅 Name 必須唔同，因為 id 係由佢推導出嚟。

日期同時間，預先填咗

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<fieldset rst-field-range>
  <legend>時間</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">開始</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
    </div>
    <div rst-field>
      <label rst-field-label for="dr_ends_at">結束</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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
    </div>
  </div>
</fieldset>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-daterange" dict
    "Legend" "時間"
    "Seed" "session"
    "Start" (dict "Label" "開始" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "結束" "Name" "dr_ends_at")}}

結束仲係空嘅時候先確定開始，瀏覽器就會將結束填做一個鐘之後。伺服器嗰邊冇預先填任何嘢。

淨係日期，結束嗰邊有錯誤

預覽

將呢段放入 <section rst-box><form rst-form> 入面。

<fieldset rst-field-range>
  <legend>預訂</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
      <label rst-field-label for="dr_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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
    </div>
    <div rst-field>
      <label rst-field-label for="dr_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;前|之前&#34;,&#34;am&#34;:&#34;上午|朝早|am&#34;,&#34;at&#34;:&#34;喺&#34;,&#34;day&#34;:&#34;日|天|號|号&#34;,&#34;hour&#34;:&#34;鐘|個鐘|小時|點&#34;,&#34;in&#34;:&#34;後|之後&#34;,&#34;last&#34;:&#34;上|上個&#34;,&#34;midnight&#34;:&#34;午夜|半夜&#34;,&#34;minute&#34;:&#34;分鐘|分&#34;,&#34;month&#34;:&#34;月|個月&#34;,&#34;next&#34;:&#34;下|下個&#34;,&#34;noon&#34;:&#34;中午|晏晝&#34;,&#34;pm&#34;:&#34;下午|夜晚|pm&#34;,&#34;today&#34;:&#34;今日&#34;,&#34;tomorrow&#34;:&#34;聽日|明日&#34;,&#34;week&#34;:&#34;星期|禮拜|週&#34;,&#34;yesterday&#34;:&#34;尋日|琴日|昨日&#34;}" data-rst-date-set="設定" data-rst-date-hint="試下：{example}" data-rst-date-pick="打開日曆" data-rst-date-calendar="日曆" data-rst-date-prev-month="上個月" data-rst-date-next-month="下個月" data-rst-date-results="{n} 個建議" data-rst-date-result-one="1 個建議" data-rst-date-quick-today="今日" data-rst-date-quick-tomorrow="聽日" data-rst-date-quick-next-week="一個星期之後" data-rst-date-quick-plus-1h="一個鐘之後" data-rst-date-quick-plus-2h="兩個鐘之後" data-rst-date-quick-end-of-day="嗰日結束" data-rst-date-quick-next-day="第二日同一個時間">
      <small rst-field-error id="dr_to-error">結束時間喺開始之前。</small>
    </div>
  </div>
</fieldset>

將呢段放入 <section rst-box><form rst-form> 入面。

{{template "field-daterange" dict
    "Legend" "預訂"
    "Kind" "date"
    "Start" (dict "Label" "由" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "結束時間喺開始之前。" "Label" "至" "Name" "dr_to" "Value" "2026-09-01")}}