How to disabled bootstrap date picker previous dates from current date and how to restrict or disabled after 90 day dates form date picker
Question
I'm trying to disabled a previous dates from current date it's working fine. but when it try to disabled "to Date date picker" after 90Days but it's not working any one can you please help on it. actually here i have a two date pickers like FROM Date and TO Date but i am not able to disabled dates after 90days here I want to allow the from date only current date To date enabled only next 90 days from current date.
<: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>
1 answers
solution1
0 2022-07-01 08:20:22
Checkout snippet with output as you expected. In datepicker you need to add some specific formatted date. And using that we disabled un wanted days as per requirement.
For adding days in javascript date:
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
Here 90 are actual days you can modify it as per usage.
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>
If you want to add more functional things like this you can try out more here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.