Đi tới nội dung
Mục
Ngôn ngữ, hiện là Tiếng Việt
Hệ thống thiết kế Rastrillo

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.

Mỗi ví dụ đều hoạt động thật, nhưng các liên kết trong đó không dẫn đến đâu. HTML hiển thị mã đánh dấu để sao chép.

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"

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_live">Ngày xuất bản</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">Ngày bắt đầu hiển thị.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_live"
    "Label" "Ngày xuất bản"
    "Value" "2026-09-04"
    "Hint" "Ngày bắt đầu hiển thị."}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_error">Ngày xuất bản <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">Chọn một ngày sau hôm nay.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_error"
    "Label" "Ngày xuất bản"
    "Required" true
    "Error" "Chọn một ngày sau hôm nay."}}

Có giới hạn

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_bounded">Trong năm nay</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>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_bounded"
    "Label" "Trong năm nay"
    "Value" "2026-09-04"
    "Min" "2026-01-01"
    "Max" "2026-12-31"}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-date_plain">Ngày xuất bản</label>
  <input rst-input id="field-date_plain" name="field-date_plain" type="date" value="2026-09-04">
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-date" dict
    "Name" "field-date_plain"
    "Label" "Ngày xuất bản"
    "Value" "2026-09-04"
    "Plain" true}}

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"

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_live">Giờ mở cửa</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">Giờ địa phương.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_live"
    "Label" "Giờ mở cửa"
    "Value" "19:30"
    "Hint" "Giờ địa phương."}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_error">Giờ mở cửa <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">Chọn một giờ sau buổi chỉnh âm.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_error"
    "Label" "Giờ mở cửa"
    "Required" true
    "Error" "Chọn một giờ sau buổi chỉnh âm."}}

Có giới hạn

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_bounded">Từ chín đến mười một giờ</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>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_bounded"
    "Label" "Từ chín đến mười một giờ"
    "Value" "19:30"
    "Min" "09:00"
    "Max" "23:00"}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="time_plain">Giờ mở cửa</label>
  <input rst-input id="time_plain" name="time_plain" type="time" value="19:30">
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-time" dict
    "Name" "time_plain"
    "Label" "Giờ mở cửa"
    "Value" "19:30"
    "Plain" true}}

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"

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_live">Ngày xuất bản</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">Thời điểm bắt đầu hiển thị.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_live"
    "Label" "Ngày xuất bản"
    "Value" "2026-09-04T19:30"
    "Hint" "Thời điểm bắt đầu hiển thị."}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_error">Ngày xuất bản <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">Chọn một ngày sau hôm nay.</small>
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_error"
    "Label" "Ngày xuất bản"
    "Required" true
    "Error" "Chọn một ngày sau hôm nay."}}

Có giới hạn

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_bounded">Trong năm nay</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>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_bounded"
    "Label" "Trong năm nay"
    "Value" "2026-09-04T19:30"
    "Min" "2026-01-01T00:00"
    "Max" "2026-12-31T23:59"}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="field-datetime_plain">Ngày xuất bản</label>
  <input rst-input id="field-datetime_plain" name="field-datetime_plain" type="datetime-local" value="2026-09-04T19:30">
</div>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-datetime" dict
    "Name" "field-datetime_plain"
    "Label" "Ngày xuất bản"
    "Value" "2026-09-04T19:30"
    "Plain" true}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Thời gian</legend>
  <div rst-field-row data-rst-range="session">
    <div rst-field>
      <label rst-field-label for="dr_starts_at">Bắt đầu</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">Kết thúc</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>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Thời gian"
    "Seed" "session"
    "Start" (dict "Label" "Bắt đầu" "Name" "dr_starts_at" "Value" "2026-09-04T19:30")
    "End" (dict "Label" "Kết thúc" "Name" "dr_ends_at")}}

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

Xem trước

Đặt đoạn này bên trong <section rst-box><form rst-form>.

<fieldset rst-field-range>
  <legend>Đặt chỗ</legend>
  <div rst-field-row data-rst-range>
    <div rst-field>
      <label rst-field-label for="dr_from">Từ</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">Đến</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">Thời điểm kết thúc trước thời điểm bắt đầu.</small>
    </div>
  </div>
</fieldset>

Đặt đoạn này bên trong <section rst-box><form rst-form>.

{{template "field-daterange" dict
    "Legend" "Đặt chỗ"
    "Kind" "date"
    "Start" (dict "Label" "Từ" "Name" "dr_from" "Value" "2026-09-04")
    "End" (dict "Error" "Thời điểm kết thúc trước thời điểm bắt đầu." "Label" "Đến" "Name" "dr_to" "Value" "2026-09-01")}}