Trong HTML, bộ chọn ngày là một công cụ kiểm soát đầu vào hữu ích cho phép người dùng chọn ngày cụ thể trên trang web hoặc biểu mẫu. Theo mặc định, bộ chọn ngày chấp nhận bất kỳ ngày nào, nhưng bạn có thể giới hạn phạm vi ngày có thể chọn bằng cách sử dụng max thuộc tính để hạn chế lựa chọn vào ngày hôm nay hoặc sớm hơn.
Cú pháp
<input type="date" max="YYYY-MM-DD">
Bộ chọn ngày là gì?
Bộ chọn ngày là một thành phần giao diện người dùng cho phép người dùng chọn ngày thông qua giao diện lịch. Nó thường được sử dụng trong các biểu mẫu dành cho ứng dụng như hệ thống đặt chỗ, phần mềm lập lịch hoặc thu thập ngày sinh.
Đặt ngày tối đa thành hôm nay bằng JavaScript
Để tự động đặt max thuộc tính cho ngày hôm nay, bạn cần JavaScript để tạo ngày hiện tại ở định dạng YYYY-MM-DD
Cấu trúc HTML
Tạo phần tử đầu vào với type="date"
<input type="date" id="datepicker">
Ví dụ hoàn chỉnh
Dưới đây là cách đặt ngày có thể chọn tối đa là hôm nay bằng cách sử dụng JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Date Picker with Max Date</title>
</head>
<body>
<h3>Select a Date (Max: Today)</h3>
<input type="date" id="datepicker">
<script>
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
document.getElementById('datepicker').setAttribute('max', formattedDate);
</script>
</body>
</html>
A date picker input appears that only allows selection of dates up to and including today's date. Future dates are disabled and cannot be selected.
Cách thức hoạt động của JavaScript
Mã JavaScript thực hiện các bước này
- Tạo một đối tượng Date mới đại diện cho ngày hiện tại
- Trích xuất các thành phần năm, tháng và ngày
- Định dạng tháng và ngày với số 0 đứng đầu bằng cách sử dụng
padStart() - Kết hợp chúng thành định dạng YYYY-MM-DD theo yêu cầu của ngày nhập
- Đặt thuộc tính tối đa của bộ chọn ngày
Trường hợp sử dụng
Việc hạn chế ngày tối đa là hôm nay rất hữu ích cho
- Hệ thống đặt vé chỉ cho phép lựa chọn ngày hiện tại hoặc quá khứ
- Biểu mẫu đăng ký sinh nhật hoặc sự kiện
- Biểu mẫu thu thập dữ liệu không liên quan đến ngày tháng trong tương lai
- Hệ thống nhập hồ sơ lịch sử
Kết luận
Việc đặt ngày tối đa của bộ chọn ngày HTML thành hôm nay sẽ ngăn người dùng chọn ngày trong tương lai. Sử dụng JavaScript để tự động tạo ngày hôm nay ở định dạng YYYY-MM-DD và áp dụng nó cho max của dữ liệu đầu vào thuộc tính hạn chế ngày theo thời gian thực.
