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

rastrillo 設計系統

設計系統提供嘅嘢嘅概覽。主題：signal。語言：廣東話。

日期同時間

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

預先整好、彼此一致嘅介面元件，喺伺服器度算好。

框架本身嘅用語叫佢哋做 partial：ui.Templates() 回傳嘅係 partial，docs/site/templates.md 都係用呢個名。呢版嘅講法改咗，代碼嘅冇改。

呢度嘅連結唔會有反應

連結唔會有反應，範例原始碼另外提供。

下面每個範例都喺自己個框入面。

範例內容用英文，範例外殼就譯咗。

field-date

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

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

預覽 
<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;前|之前&#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">The day it goes live.</small>
</div></form></section>

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

必填，仲有錯誤

預覽 
<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;前|之前&#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">Pick a date after today.</small>
</div></form></section>

有上下限

預覽 
<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;前|之前&#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></form></section>

Plain——冇加嘢嘅原生輸入框

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

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

field-time

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

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

預覽 
<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;前|之前&#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">Local time.</small>
</div></form></section>

必填，仲有錯誤

預覽 
<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;前|之前&#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">Pick a time after the sound check.</small>
</div></form></section>

有上下限

預覽 
<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;前|之前&#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></form></section>

Plain——冇加嘢嘅原生輸入框

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

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

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

預覽 
<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;前|之前&#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">When it goes live.</small>
</div></form></section>

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

必填，仲有錯誤

預覽 
<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;前|之前&#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">Pick a date after today.</small>
</div></form></section>

有上下限

預覽 
<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;前|之前&#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></form></section>

Plain——冇加嘢嘅原生輸入框

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

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

field-daterange

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

日期同時間，預先填咗

預覽 
<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;前|之前&#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">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;前|之前&#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></form></section>

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

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

預覽 
<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;前|之前&#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">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">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>