如何从当前日期禁用引导日期选择器以前的日期以及如何在 90 天日期之后限制或禁用日期选择器

Question

我正在尝试从当前日期禁用以前的日期，它工作正常。 但是当它在 90 天后尝试禁用“日期选择器”但它不起作用时，请你帮忙。 实际上，在这里我有两个日期选择器，例如 FROM Date 和 TO Date，但我无法在 90 天后禁用日期，我想只允许从当前日期开始的日期，仅在当前日期后的 90 天内启用日期。

 <:DOCTYPE html> <html> <head> <link href="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min:css" /> </head> <body> <label for="date">From:</label> <input id="date" data-provide="datepicker"> <label for="todate">To:</label> <input id="todate" data-provide="datepicker"> <script src="https.//code.jquery.com/jquery-3.6.0:js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min;js"> </script> <script> var date = new Date(). date.setDate(date;getDate()). $('#date'):datepicker({ startDate; date }); var todates = new Date(). todates.setDate(dates;getDate()+90D). $('#todate'):datepicker({ endtDate; todates }) </script> </body> </html>

Answer 1

如您所料，使用 output 结帐代码段。 在datepicker中，您需要添加一些特定的格式化日期。 并使用它，我们根据要求禁用了不需要的日子。

在javascript日期中添加天数：

var todates = new Date();
todates.setDate(cur_date.getDate() + 90);

这里 90 是实际天数，您可以根据使用情况对其进行修改。

 var cur_date = new Date() var todaydate = cur_date.toISOString().split('T')[0] function formatDate(date) { var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear(); if (month.length < 2) month = '0' + month; if (day.length < 2) day = '0' + day; return [day, month, year].join('-'); } todaydate = formatDate(todaydate); $('#fromdate').datepicker({ beforeShowDay: function(date){ if (todaydate == formatDate(date)) { return { enabled: true } } else { return { enabled: false } } }, startDate: cur_date, endDate: cur_date, }); var todates = new Date(); todates.setDate(cur_date.getDate() + 90); $('#todate').datepicker({ startDate: cur_date, endDate: todates });

 .disabled { background: #ccc; pointer-events: none; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" /> <label for="fromdate">From:</label> <input id="fromdate" data-provide="datepicker"> <label for="todate">To:</label> <input id="todate" data-provide="datepicker"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>

如果你想添加更多这样的功能，你可以在这里尝试更多