<input type="date">

Try it

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

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

input,
label {
  margin: 0.4rem 0;
}

Giá trị

Một chuỗi đại diện cho ngày được nhập vào ô nhập liệu. Ngày được định dạng theo Định dạng chuỗi ngày.

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

<input type="date" value="2017-06-01" />

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

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

Mã này tìm phần tử <input> đầu tiên có type là date, và đặt giá trị thành 2017-06-01 (ngày 1 tháng 6 năm 2017). Sau đó đọc giá trị đó lại theo định dạng chuỗi và số.

Thuộc tính bổ sung

Ngoài thuộc tính toàn cục và thuộc tính đầu vào chung cho tất cả các phần tử <input>, đầu vào date hỗ trợ các thuộc tính sau:

max

Ngày mới nhất được chấp nhận. Nếu value nhập vào phần tử xảy ra sau đó, 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 ngày hợp lệ theo định dạng yyyy-mm-dd, thì phần tử không có giá trị ngày tối đa.

Nếu cả thuộc tính max và min đều được đặt, giá trị này phải là chuỗi ngày muộn hơn hoặc bằng giá trị trong thuộc tính min.

min

Ngày sớm nhất được chấp nhận. Nếu value nhập vào phần tử xảy ra trước đó, 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 ngày hợp lệ theo định dạng yyyy-mm-dd, thì phần tử không có giá trị ngày tối thiểu.

Nếu cả thuộc tính max và min đều được đặt, giá trị này phải là chuỗi ngày sớm hơn hoặc bằng giá trị trong 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-01) nếu không có cả hai.

Đối với đầu vào date, giá trị của step được tính theo ngày và được coi là số mili giây bằng 86.400.000 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à 1, biểu thị 1 ngày.

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ư 1 đối với đầu vào date vì giao diện bộ chọn chỉ cho phép chọn ngày nguyên.

Sử dụng đầu vào date

Đầu vào date cung cấp giao diện dễ dàng để chọn ngày và 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.

Trong phần này, chúng ta sẽ xem xét cách sử dụng cơ bản và phức tạp hơn của <input type="date">.

Sử dụng cơ bản date

Cách sử dụng cơ bản nhất của <input type="date"> liên quan đến một <input> kết hợp với <label>, như bên dưới:

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

HTML này gửi ngày nhập vào với khóa bday đến https://example.com — dẫn đến URL như https://example.com/?bday=1955-06-08.

Đặt ngày 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 người dùng có thể chọn. Trong ví dụ sau, chúng ta đặt ngày tối thiểu là 2017-04-01 và ngày tối đa là 2017-04-30:

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Kết quả là chỉ có thể chọn các ngày trong tháng 4 năm 2017 — phần tháng và năm của hộp văn bản sẽ không thể chỉnh sửa, và các ngày ngoài tháng 4 năm 2017 không thể chọn trong widget bộ chọn.

Bạn có thể dùng thuộc tính step để thay đổi số ngày nhảy mỗi lần tăng ngày (ví dụ: chỉ cho phép chọn ngày thứ Bảy).

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

<input type="date"> không hỗ trợ các thuộc tính kích thước biểu mẫu như size. Hãy dùng CSS để điều chỉnh kích thước.

Kiểm tra hợp lệ

Mặc định, <input type="date"> không xác thực giá trị nhập vào ngoài định dạng của nó. Các giao diện thường không cho phép nhập bất cứ thứ gì không phải là ngày — điều này hữu ích.

Nếu bạn dùng min và max để hạn chế ngày có thể (xem Đặt ngày tối đa và tối thiểu), điều khiển biểu mẫu vô hiệu hóa các ngày không hợp lệ và sẽ hiển thị lỗi nếu bạn cố gửi ngày ngoài phạm vi.

Bạn cũng có thể dùng thuộc tính required để bắt buộc điền ngày — lỗi sẽ hiển thị nếu bạn cố gửi trường ngày trống.

Hãy xem ví dụ về ngày tối thiểu và tối đa, và cũng bắt buộc điền trường:

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</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 :valid và :invalid pseudo-element để thêm biểu tượng bên cạnh đầu vào, dựa trên giá trị hiện tại có hợp lệ hay không. Chúng ta phải đặt biểu tượng trên <span> bên cạnh đầu vào, không phải trên chính đầu vào, vì ít nhất ở Chrome, nội dung được tạo ra của đầu vào được đặt bên trong điều khiển biểu mẫu và không thể tạo kiểu hoặc hiển thị hiệu quả.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

Ví dụ

Trong ví dụ này, chúng ta tạo bộ chọn ngày bằng cách sử dụng bộ chọn <input type="date"> gốc.

HTML

HTML trông như thế này:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

CSS

CSS trông như thế này:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

Kết quả

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
• Hướng dẫn bộ chọn ngày và giờ
• Định dạng ngày và giờ dùng trong HTML