HTMLInputElement: thuộc tính valueAsDate

Giá trị

Một đối tượng Date hoặc null nếu không thể chuyển đổi. Ngày được trả về nên luôn được hiểu là thời gian UTC—ví dụ: sử dụng các phương thức như getUTCDate() thay vì getDate(). Nếu bạn không cẩn thận, kết quả có thể sai 1 ngày—ví dụ: nếu người dùng sống ở múi giờ UTC âm (ví dụ: Mỹ), thì việc hiểu ngày là ngày cục bộ sẽ dẫn đến ngày trước ngày người dùng chọn.

Các loại đầu vào month, date, và week trả về ngày UTC đại diện cho thời điểm đầu tiên của khoảng thời gian được nhập—nghĩa là, chúng luôn là nửa đêm theo UTC. Đối với month, ngày là ngày đầu tiên của tháng. Đối với week, ngày là Thứ Hai của tuần. Loại đầu vào time luôn có ngày đặt thành 1970-01-01.

Loại đầu vào datetime-local không hỗ trợ thuộc tính valueAsDate, vì nó đại diện cho ngày và giờ theo múi giờ địa phương (a wall clock time), nhưng đối tượng Date đại diện cho một điểm thời gian tuyệt đối. Tuy nhiên, một số trình duyệt có thể cung cấp triển khai không chuẩn. WHATWG đang làm việc để tích hợp API Temporal với các đầu vào ngày/giờ để giải quyết trường hợp sử dụng này.

Ví dụ

Lấy giá trị ngày

Ví dụ này minh họa việc truy cập thuộc tính valueAsDate trên <input> loại week.

HTML

Chúng ta bao gồm một <input> loại week:

<label for="date">Chọn ngày và giờ:</label>

<input name="date" id="date" type="week" />

<pre id="log"></pre>

JavaScript

Khi không có ngày hoặc giờ được chọn, đầu vào trống giải quyết thành null. Mỗi khi một lựa chọn được thực hiện, sự kiện change được kích hoạt, cập nhật nội dung <pre> hiển thị HTMLInputElement.value của điều khiển biểu mẫu so với giá trị đó dưới dạng ngày.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Giá trị ban đầu: ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  logElement.innerText = `${inputElement.value} giải quyết thành ${inputElement.valueAsDate}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Kết quả

Sử dụng các phương thức Date

Ví dụ này minh họa việc áp dụng trực tiếp các phương thức Date cho thuộc tính valueAsDate của <input> loại date.

HTML

Chúng ta bao gồm một <input> loại date:

<label for="date2">Chọn một ngày:</label>

<input name="date2" id="date2" type="date" />

<pre id="log"></pre>

JavaScript

Khi không có ngày nào được chọn, chuỗi rỗng giải quyết thành null. Mỗi khi một lựa chọn được thực hiện, sự kiện change được kích hoạt. Sau đó chúng ta điền nhật ký với ngày đã chọn, được định dạng bằng phương thức toLocaleDateString() của đối tượng Date.

const logElement = document.getElementById("log");
const inputElement = document.getElementById("date2");
const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

logElement.innerText = `Giá trị ban đầu: ${inputElement.valueAsDate}`;

inputElement.addEventListener("change", () => {
  if (inputElement.valueAsDate !== null) {
    logElement.innerText = `Bạn đã chọn ${inputElement.valueAsDate.toLocaleDateString("en-US", options)}`;
  } else {
    logElement.innerText = `${inputElement.value} giải quyết thành ${inputElement.valueAsDate}`;
  }
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Kết quả

Ngày có thể sai một ngày do múi giờ địa phương của bạn.

Đặc tả kỹ thuật

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

Xem thêm

• <input>
• HTMLInputElement.value
• HTMLInputElement.valueAsNumber