言語

English Gaeilge 简体中文 Español हिन्दी Português বাংলা Русский 日本語廣東話 Tiếng Việt العربية

rastrillo デザインシステム

デザインシステムが提供するものの概要。テーマ: signal。言語: 日本語。

日付と時刻

datetime.js が拡張する四つのフィールド。いずれも下にネイティブの入力要素を残すので、スクリプトのない読者には壊れたものではなく素のコントロールが届きます。

あらかじめ作られ、互いに揃った UI 部品を、サーバー側で描画。

フレームワーク自身の語彙では、これらは 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="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">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="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">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="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></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

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

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

デスクトップモバイルコード

<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="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">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="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">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="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></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="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">When it goes live.</small>
</div></form></section>

必須、エラーつき

デスクトップモバイルコード

<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="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">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="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></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

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

日付と時刻、初期値あり

デスクトップモバイルコード

<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="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">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="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></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="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">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">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>