Ngôn ngữ

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

hệ thống thiết kế rastrillo

Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: signal. Ngôn ngữ: Tiếng Việt.

Ngày và giờ

Bốn trường mà datetime.js tăng cường, mỗi trường vẫn giữ ô nhập gốc bên dưới, để người đọc không có script nhận được điều khiển thuần chứ không phải một thứ hỏng.

Các phần tử giao diện dựng sẵn, nhất quán với nhau, được kết xuất ở phía máy chủ.

Từ vựng của chính framework gọi chúng là partial: ui.Templates() trả về partial, và docs/site/templates.md ghi chúng dưới tên đó. Chữ trên trang này đã đổi; chữ trong mã thì không.

Các liên kết ở đây không hoạt động

Liên kết không hoạt động, mã nguồn mẫu được cung cấp kèm.

Mỗi mẫu bên dưới nằm trong khung riêng của nó.

Nội dung mẫu để tiếng Anh. Phần vỏ mẫu thì được dịch.

field-date

Một ô nhập ngày gốc, kèm hộp kết hợp hiểu ngôn ngữ tự nhiên mà datetime.js bật lên, trừ khi nơi gọi truyền Plain. Hãy gõ "ngày mai" vào đó.

Ô nhập nâng cao: gõ "ngày mai" hoặc "sau 3 tuần"

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-hint id="field-date_live-hint">The day it goes live.</small>
</div></form></section>

Những từ nó phân tích được gửi ra qua data-rst-date-words, tra từ danh mục của trang này: ô nhập phân tích đúng ngôn ngữ mà trang đang dùng.

Bắt buộc, kèm lỗi

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-error id="field-date_error-error">Pick a date after today.</small>
</div></form></section>

Có giới hạn

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</div></form></section>

Plain — ô nhập gốc để trơn

Máy tính Điện thoại Mã

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

Không có thuộc tính tăng cường nào cả, nên datetime.js chẳng tìm thấy gì. Bộ chọn gốc vẫn mở được.

field-time

Cũng lớp vỏ ấy, lần này bọc quanh một ô nhập giờ gốc. Phần tăng cường đọc đồng hồ chứ không đọc lịch.

Ô nhập nâng cao: gõ "bảy rưỡi" hoặc "giữa trưa"

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-pick-time="Mở đồng hồ" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-hint id="time_live-hint">Local time.</small>
</div></form></section>

Bắt buộc, kèm lỗi

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-pick-time="Mở đồng hồ" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-error id="time_error-error">Pick a time after the sound check.</small>
</div></form></section>

Có giới hạn

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-pick-time="Mở đồng hồ" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</div></form></section>

Plain — ô nhập gốc để trơn

Máy tính Điện thoại Mã

<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

Ngày và giờ trong một ô nhập, một giá trị.

Ô nhập nâng cao: gõ "ngày mai" hoặc "sau 3 tuần"

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-hint id="field-datetime_live-hint">When it goes live.</small>
</div></form></section>

Những từ nó phân tích được gửi ra qua data-rst-date-words, tra từ danh mục của trang này: ô nhập phân tích đúng ngôn ngữ mà trang đang dùng.

Bắt buộc, kèm lỗi

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-error id="field-datetime_error-error">Pick a date after today.</small>
</div></form></section>

Có giới hạn

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</div></form></section>

Plain — ô nhập gốc để trơn

Máy tính Điện thoại Mã

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

Không có thuộc tính tăng cường nào cả, nên datetime.js chẳng tìm thấy gì. Bộ chọn gốc vẫn mở được.

field-daterange

Một điểm bắt đầu và một điểm kết thúc trong cùng một nhóm có nhãn. Các Name phải khác nhau, vì id được suy ra từ chúng.

Ngày và giờ, đã điền sẵn

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</div>
  </div>
</fieldset></form></section>

Chốt thời điểm bắt đầu khi phần kết thúc còn trống, trình duyệt sẽ điền kết thúc là một giờ sau đó. Máy chủ không điền sẵn gì cả.

Chỉ ngày, kèm lỗi ở phần kết thúc

Máy tính Điện thoại Mã

<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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
</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;trước&#34;,&#34;am&#34;:&#34;sáng|am&#34;,&#34;at&#34;:&#34;lúc|vào&#34;,&#34;day&#34;:&#34;ngày&#34;,&#34;hour&#34;:&#34;giờ|tiếng|h&#34;,&#34;in&#34;:&#34;nữa|sau&#34;,&#34;last&#34;:&#34;trước|qua|rồi&#34;,&#34;midnight&#34;:&#34;nửa đêm&#34;,&#34;minute&#34;:&#34;phút|p&#34;,&#34;month&#34;:&#34;tháng&#34;,&#34;next&#34;:&#34;tới|tiếp|sau&#34;,&#34;noon&#34;:&#34;giữa trưa|trưa&#34;,&#34;pm&#34;:&#34;chiều|tối|pm&#34;,&#34;today&#34;:&#34;hôm nay|nay&#34;,&#34;tomorrow&#34;:&#34;ngày mai|mai&#34;,&#34;week&#34;:&#34;tuần&#34;,&#34;yesterday&#34;:&#34;hôm qua&#34;}" data-rst-date-set="Đặt" data-rst-date-hint="Thử: {example}" data-rst-date-pick="Mở lịch" data-rst-date-calendar="Lịch" data-rst-date-prev-month="Tháng trước" data-rst-date-next-month="Tháng sau" data-rst-date-results="{n} gợi ý" data-rst-date-result-one="1 gợi ý" data-rst-date-quick-today="Hôm nay" data-rst-date-quick-tomorrow="Ngày mai" data-rst-date-quick-next-week="Một tuần nữa" data-rst-date-quick-plus-1h="Một giờ sau" data-rst-date-quick-plus-2h="Hai giờ sau" data-rst-date-quick-end-of-day="Cuối ngày hôm đó" data-rst-date-quick-next-day="Cùng giờ ngày hôm sau">
  <small rst-field-error id="dr_to-error">The end comes before the start.</small>
</div>
  </div>
</fieldset></form></section>