跳到内容
栏目
语言，当前是简体中文
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")}}