Quảng cáo
Làm thế nào để vô hiệu hóa các ngày cụ thể trong Bootstrap Datepicker bằng jQuery?
Chủ đề: JavaScript / jQueryBài trước|Bài tiếp
Trả lời: Để vô hiệu hóa một số ngày cụ thể trong Bootstrap Datepicker chúng ta sử dụng chức năng dateDisabled
Đôi khi chúng ta cần vô hiệu hóa ngày cụ thể để người dùng không thể chọn từ đó hoặc có thể bạn có điều kiện rằng người dùng đáp ứng các yêu cầu thì bạn cần phải vô hiệu hóa các ngày đó.
May mắn thay, Bootstrap Datepicker đã cung cấp một tùy chọn có tên là dateDisabled, sau đó chúng tôi sẽ chỉ đặt giá trị ngày tháng bị vô hiệu hóa dưới dạng biến mảng như bạn có thể thấy bên dưới:
Ví dụ
var datesForDisable = ["11-01-2022", "12-10-2022", "12-11-2022", "20-12-2021"]
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
todayHighlight: true,
datesDisabled: datesForDisable
});Mã nguồn hoàn chỉnh: Mình sẽ lấy mẫu từ bài Bootstrap Datepicker trong PHP & MySQL bằng Ajax nhé
Ví dụ
<!doctype html>
<html lang="en">
<head>
<title>Cách sử dụng Bootstrap Datepicker trong PHP & MySQL bằng Ajax</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstra Datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
<div class="container">
<br><br>
<h1>Cách sử dụng Bootstrap Datepicker trong PHP & MySQL bằng Ajax</h1>
<br><br>
<form action="process.php" id="form">
<div class="form-group">
<label for="email">Ngày sinh:</label>
<input class="date form-control" type="text" name="date-of-birth">
</div>
<button type="button" class="btn btn-primary" id="btnSubmit">Gửi</button>
</form>
</div>
<!-- Nên đặt các tệp javascript ở đây để tải trang nhanh hơn -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.js"></script>
<!-- Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Page Script -->
<script type="text/javascript">
$(document).ready(function() {
// Cấu hình tiếng việt cho Bootstrap Datepicker
// Vô hiệu hóa một số ngày
var datesForDisable = ["09-01-2022", "11-01-2022", "15-01-2022", "11-11-2022"]
$.fn.datepicker.dates['vi'] = {
days: ["Chủ nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"],
daysShort: ["CN", "Thứ 2", "Thứ 3", "Thứ 4", "Thứ 5", "Thứ 6", "Thứ 7"],
daysMin: ["CN", "T2", "T3", "T4", "T5", "T6", "T7"],
months: ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12"],
monthsShort: ["Th 1", "Th 2", "Th 3", "Th 4", "Th 5", "Th 6", "Th 7", "Th 8", "Th 9", "Th 10", "Th 11", "Th 12"],
today: "Hôm nay",
clear: "Xóa",
format: "dd/mm/yyyy",
titleFormat: "MM yyyy", /* Cú pháp giống 'format' */
weekStart: 0
};
// Thiết lập datepicker
$('.date').datepicker({
language: 'vi',
todayHighlight: true, // nổi bật ngày hôm nay
format: 'dd-mm-yyyy', // định dạng ngày trước khi gửi
autoclose: true, //Tự động đóng sau khi click chọn ngày
datesDisabled: datesForDisable // Vô hiệu hóa một số ngày
});
$("#btnSubmit").on("click", function() {
var $this = $("#btnSubmit"); //ID nút gửi dữ liệu
var $caption = $this.html();// Nội dung html của nút gửi dữ liệu
var form = "#form"; //Xác định #form ID
var formData = $(form).serializeArray(); //Cho dữ liệu vào mảng
var route = $(form).attr('action'); //lấy đường dẫn gửi dữ liệu
// Ajax config
$.ajax({
type: "POST", //Sử dụng phương thức POST để gửi duex liệu
url: route, // đường dẫn gửi dữ liệu
data: formData, // Dữ liệu theo mảng
beforeSend: function () {//Thêm thuộc tích disabled để chặn click nhiều lần trong khi đang gửi dữ liệu
$this.attr('disabled', true).html("Đang tiến hành...");
},
success: function (response) {//Khi thành công kết quả sẽ được trả về tại đây
$this.attr('disabled', false).html($caption);
// Chúng ta sẽ thực hiện hành động sau khi thành công ở đây
console.log(response);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// Bạn có thể thêm nội dung hiển thị báo lỗi tại đây
}
});
});
});
</script>
</body>
</html>Câu hỏi liên quan
Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:
- Regex để xác thực tên miền
- Cách lấy giá trị của tùy chọn đã chọn trong hộp chọn (Select) bằng jQuery
- Có cách nào để bọc table trong div trong TinyMCE không?
- TinyMCE textarea và biểu mẫu (Form) đăng bằng ajax
- Lấy dữ liệu CkEditor để đăng bằng ajax form
Advertisements