Để vô hiệu hóa các ngày tương lai, bạn cần sử dụng maxDate và đặt thành ngày hiện tại. Dưới đây là mã JavaScript:
Ví dụ
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>The selected date is as follows: <input type="text" class="disableFuturedate"></p> <script> $(document).ready(function () { var currentDate = new Date(); $('.disableFuturedate').datepicker({ format: 'dd/mm/yyyy', autoclose:true, endDate: "currentDate", maxDate: currentDate }).on('changeDate', function (ev) { $(this).datepicker('hide'); }); $('.disableFuturedate').keyup(function () { if (this.value.match(/[^0-9]/g)) { this.value = this.value.replace(/[^0-9^-]/g, ''); } }); }); </script> </body> </html>Để chạy chương trình trên, tôi đã lưu tệp này với tên index.html. Chuột phải vào tệp này và chọn tùy chọn open with live server.
Kết quả
Chương trình sẽ chạy tự động trên bất kỳ trình duyệt web hiện đại nào:
Sau đó, nhấn chuột vào ô văn bản, sẽ hiển thị bộ chọn ngày như ảnh chụp màn hình dưới đây:
