本文へ移動
セクション
言語、現在は日本語
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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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

同じ包みを、ネイティブの時刻入力に。こちらの拡張が読むのはカレンダーではなく時計です。

拡張された入力欄：「7時半」や「正午」と入力できます

プレビュー

これは <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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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">9時から11時の間</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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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" "9時から11時の間"
    "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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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

開始と終了をひとつのラベル付きグループにしたもの。id は Name から作られるので、Name は互いに異なる必要があります。

日付と時刻、初期値あり

プレビュー

これは <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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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="1週間後" data-rst-date-quick-plus-1h="1時間後" data-rst-date-quick-plus-2h="2時間後" 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")}}