<input type="datetime-local">

Try it

<label for="meeting-time">Choose a time for your appointment:</label>

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Giao diện của điều khiển thay đổi tùy theo trình duyệt. Điều khiển nhằm biểu diễn ngày và giờ địa phương, không nhất thiết là ngày và giờ địa phương của người dùng. Nói cách khác, đầu vào cho phép bất kỳ tổ hợp hợp lệ nào của năm, tháng, ngày, giờ và phút — ngay cả khi tổ hợp đó không hợp lệ trong múi giờ địa phương của người dùng (chẳng hạn như một giờ trong khoảng lỗ hổng chuyển đổi mùa hè).

Giá trị

Một chuỗi đại diện cho giá trị của ngày được nhập vào đầu vào. Định dạng của giá trị ngày và giờ được sử dụng bởi kiểu đầu vào này được mô tả trong Chuỗi ngày và giờ địa phương.

Bạn có thể đặt giá trị mặc định cho đầu vào bằng cách bao gồm ngày và giờ trong thuộc tính value như sau:

<label for="party">Enter a date and time for your party booking:</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

Một điều cần lưu ý là định dạng ngày và giờ hiển thị khác với value thực tế; ngày và giờ hiển thị được định dạng theo locale của người dùng như được báo cáo bởi hệ điều hành, trong khi ngày/giờ value luôn được định dạng YYYY-MM-DDTHH:mm. Khi giá trị trên được gửi lên máy chủ, chẳng hạn, nó sẽ trông như party-date=2024-06-01T08:30.

Bạn cũng có thể lấy và đặt giá trị ngày trong JavaScript bằng thuộc tính value của HTMLInputElement, ví dụ:

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

Thuộc tính bổ sung

Ngoài các thuộc tính chung cho tất cả các phần tử <input>, đầu vào datetime-local cung cấp các thuộc tính sau.

max

Ngày và giờ mới nhất được chấp nhận. Nếu value nhập vào phần tử muộn hơn dấu thời gian này, phần tử thất bại kiểm tra ràng buộc. Nếu giá trị của thuộc tính max không phải là chuỗi hợp lệ theo định dạng YYYY-MM-DDTHH:mm, thì phần tử không có giá trị tối đa.

Giá trị này phải chỉ định chuỗi ngày muộn hơn hoặc bằng chuỗi được chỉ định bởi thuộc tính min.

min

Ngày và giờ sớm nhất được chấp nhận; các dấu thời gian sớm hơn sẽ khiến phần tử thất bại kiểm tra ràng buộc. Nếu giá trị của thuộc tính min không phải là chuỗi hợp lệ theo định dạng YYYY-MM-DDTHH:mm, thì phần tử không có giá trị tối thiểu.

Giá trị này phải chỉ định chuỗi ngày sớm hơn hoặc bằng chuỗi được chỉ định bởi thuộc tính max.

step

Thuộc tính step là một số chỉ định mức độ chi tiết mà giá trị phải tuân theo, hoặc giá trị đặc biệt any, được mô tả bên dưới. Chỉ các giá trị là bội số nguyên của bước từ step base mới hợp lệ. Step base là min nếu được chỉ định, value nếu không, hoặc 0 (Unix epoch, 1970-01-01T00:00) nếu không có cả hai.

Đối với đầu vào datetime-local, giá trị của step được tính theo giây và được coi là số mili giây bằng 1000 lần giá trị step (giá trị số bên dưới tính bằng mili giây). Giá trị mặc định là 60, biểu thị 1 phút.

Giá trị chuỗi any có nghĩa là không có bước nhảy nào và mọi giá trị đều được phép (trừ các ràng buộc khác như min và max). Trong thực tế, nó có tác dụng giống như 60 đối với đầu vào datetime-local vì giao diện bộ chọn trong trường hợp này chỉ cho phép chọn phút nguyên.

Sử dụng đầu vào datetime-local

Đầu vào ngày/giờ rất tiện lợi cho nhà phát triển; chúng cung cấp giao diện người dùng dễ dàng để chọn ngày và giờ, và chúng chuẩn hóa định dạng dữ liệu gửi lên máy chủ, bất kể locale của người dùng. Tuy nhiên, điều quan trọng là xem xét người dùng của bạn. Đừng yêu cầu người dùng nhập dữ liệu không cần thiết cho ứng dụng của bạn hoạt động.

Kiểm soát kích thước đầu vào

<input type="datetime-local"> không hỗ trợ các thuộc tính kích thước điều khiển biểu mẫu như size. Bạn sẽ phải dùng CSS để tùy chỉnh kích thước của các phần tử này.

Đặt múi giờ

Một điều kiểu đầu vào datetime-local không cung cấp là cách đặt múi giờ và/hoặc locale của điều khiển ngày/giờ. Điều này đã có sẵn trong kiểu đầu vào datetime, nhưng kiểu này hiện đã lỗi thời, đã bị loại bỏ khỏi đặc tả. Lý do chính là thiếu triển khai trong trình duyệt và lo ngại về giao diện/trải nghiệm người dùng. Dễ hơn là chỉ có một điều khiển (hoặc các điều khiển) để đặt ngày/giờ và sau đó xử lý locale trong một điều khiển riêng biệt.

Ví dụ: nếu bạn đang tạo hệ thống mà người dùng có thể đã đăng nhập với locale đã được đặt, bạn có thể cung cấp múi giờ trong kiểu đầu vào hidden. Ví dụ:

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

Mặt khác, nếu bạn cần cho phép người dùng nhập múi giờ cùng với đầu vào ngày/giờ, bạn có thể có phần tử <select> để người dùng đặt múi giờ đúng bằng cách chọn vị trí cụ thể:

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

Trong cả hai trường hợp, các giá trị ngày/giờ và múi giờ sẽ được gửi lên máy chủ như các điểm dữ liệu riêng biệt, và sau đó bạn cần lưu trữ chúng phù hợp trong cơ sở dữ liệu phía máy chủ.

Kiểm tra hợp lệ

Theo mặc định, <input type="datetime-local"> không áp dụng bất kỳ xác thực nào cho các giá trị đã nhập. Các triển khai giao diện người dùng thường không cho phép nhập bất cứ thứ gì không phải là ngày/giờ — điều này hữu ích — nhưng người dùng vẫn có thể không điền gì và gửi, hoặc nhập ngày và/hoặc giờ không hợp lệ (ví dụ: ngày 32 tháng 4).

Bạn có thể dùng min và max để hạn chế ngày có thể (xem Đặt ngày và giờ tối đa và tối thiểu), và bạn có thể dùng thuộc tính required để bắt buộc điền ngày/giờ. Kết quả là, trình duyệt sẽ hiển thị lỗi nếu bạn cố gửi ngày ngoài phạm vi hoặc trường ngày trống.

Hãy xem ví dụ; ở đây chúng ta đã đặt giá trị ngày/giờ tối thiểu và tối đa, và cũng bắt buộc điền trường:

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>

Nếu bạn cố gửi biểu mẫu với ngày không đầy đủ (hoặc với ngày ngoài phạm vi được đặt), trình duyệt hiển thị lỗi. Hãy thử thực hành với ví dụ ngay bây giờ:

Đây là CSS dùng trong ví dụ trên. Chúng ta sử dụng các thuộc tính CSS :valid và :invalid để tạo kiểu cho đầu vào dựa trên giá trị hiện tại có hợp lệ hay không. Chúng ta đặt các biểu tượng trên <span> bên cạnh đầu vào.

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Ví dụ

Sử dụng cơ bản datetime-local

Cách sử dụng cơ bản nhất của <input type="datetime-local"> liên quan đến sự kết hợp cơ bản giữa phần tử <input> và <label>, như bên dưới:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="party-date" />
</form>

Đặt ngày và giờ tối đa và tối thiểu

Bạn có thể dùng các thuộc tính min và max để hạn chế ngày/giờ người dùng có thể chọn. Trong ví dụ sau, chúng ta đặt ngày/giờ tối thiểu là 2025-06-01T08:30 và tối đa là 2025-06-30T16:30:

<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
    id="party"
    type="datetime-local"
    name="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

Chỉ có thể chọn các ngày trong tháng 6 năm 2025. Tùy thuộc vào trình duyệt bạn đang sử dụng, các giờ ngoài các giá trị được chỉ định có thể không thể chọn. Ở các trình duyệt khác, ngày và giờ không hợp lệ có thể chọn được nhưng sẽ khớp với :invalid và :out-of-range và thất bại kiểm tra hợp lệ.

Ở một số trình duyệt (Safari), bộ chọn ngày có thể xuất hiện để cho phép bất kỳ ngày nào, nhưng giá trị sẽ bị kẹp vào phạm vi hợp lệ khi ngày được chọn.

Phạm vi hợp lệ bao gồm tất cả các giờ giữa các giá trị min và max; giờ trong ngày chỉ bị ràng buộc vào ngày đầu tiên và ngày cuối cùng trong phạm vi.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Phần tử <input> chung và giao diện dùng để thao tác nó, HTMLInputElement
• <input type="date"> và <input type="time">
• Định dạng ngày và giờ dùng trong HTML
• Hướng dẫn bộ chọn ngày và giờ