Đối tượng Input Date trong HTML DOM đại diện cho một phần tử HTML <input> với kiểu date.
Cú pháp
Cú pháp như sau:
- Tạo một <input> với kiểu date:
var dateObject = document.createElement(“input”); dateObject.type = “date”;
Các thuộc tính
Ở đây, 「dateObject」 có thể có các thuộc tính sau:
| Thuộc tính | Mô tả |
|---|---|
| autocomplete | Định nghĩa giá trị thuộc tính autocomplete của trường ngày. |
| autofocus | Định nghĩa xem trường ngày có được focus khi tải trang ban đầu hay không. |
| defaultValue | Thiết lập/trả về giá trị mặc định của trường ngày. |
| disabled | Định nghĩa xem trường ngày bị vô hiệu hóa/kích hoạt. |
| form | Trả về tham chiếu của form bao quanh chứa trường ngày. |
| max | Trả về/thiết lập giá trị thuộc tính max của trường ngày. |
| min | Trả về/thiết lập giá trị thuộc tính min của trường ngày. |
| name | Định nghĩa giá trị thuộc tính name của một trường ngày. |
| readOnly | Định nghĩa xem trường ngày là chỉ đọc hay không. |
| required | Định nghĩa xem trường ngày có bắt buộc điền để gửi form hay không. |
| step | Định nghĩa giá trị thuộc tính step của trường ngày. |
| type | Trả về kiểu phần tử form của trường ngày. |
| value | Định nghĩa giá trị thuộc tính value của một trường ngày. |
Các phương thức
Và cũng có các phương thức sau:
| Phương thức | Chi tiết |
|---|---|
| stepDown | Định nghĩa số ngày trường ngày nên giảm. |
| stepUp | Định nghĩa số ngày trường ngày nên tăng. |
Ví dụ
Dưới đây là ví dụ về thuộc tính Input Date max:
<!DOCTYPE html> <html> <head> <title>Input Date Max</title> </head> <body> <form> Chọn ngày: <input type="date" id="date" name="DateSelect" max="2018-12-31"> </form> <button onclick="getMaxDate()">Thay đổi Max Date</button> <div id="divDisplay"></div> <script> var inputDate = document.getElementById("date"); var divDisplay = document.getElementById("divDisplay"); divDisplay.textContent = 'Max của date input: '+inputDate.max; function getMaxDate() { var oldInputDate = inputDate.max; inputDate.max = '2020-12-31'; divDisplay.textContent = 'Max của date input: '+inputDate.max; } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Trước khi nhấn nút 『Thay đổi Max Date』:
Sau khi nhấn nút 『Thay đổi Max Date』:
