Jquery Datepicker - Autofill date based on first date without select

Question

Below i have a 2 datepicker which user have to select them and then the 2nd datepicker will change the min date according to datepicker1 but my goal is to set the 3rd date in datepicker1 and set 7th date in datepicker 2 without selecting them(Auto).

So far i can able to display the first datepicker with last available day(3rd date) while i still can't achieve the dates for 2nd datepicker(7th) :(

Any suggestion?

Here's the code

 $(document).ready(function() { var array = ["15-01-2020","18-01-2020"]; function includeDate(date) { var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date); // Date 0 = Sunday & 6 = Saturday return date.getDay() !== 0 && array.indexOf(dateStr) === -1; } function getTomorrow(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); } $('#datepicker1').datepicker( { defaultDate: "+1d", inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = new Date(); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } return max + extra; }) (3) }); $('#datepicker1').change(function () { var from = $('#datepicker1').datepicker('getDate'); // Date diff can be obtained like this without needing to parse a date string. var date_diff = Math.ceil((from - new Date()) / 86400000); $('#datepicker2').val('').datepicker({ inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: date_diff + 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = $('#datepicker1').datepicker('getDate'); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } return max + date_diff + extra; }) (7) }); }); $( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100); });

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <p>datepicker1 <input id="datepicker1"></p> <p>datepicker2 <input id="datepicker2"></p>

Note

The first datepicker min date is from tomorrow and maxdate is 3 days which exclude holidays and sundays while the 2nd datepicker mindate is based on 1st datepicker date and maxdate is 7 days which exclude holidays and sundays. I just want the last 3rd and 7th date display in the datepicker input without selecting them.Both input should not available for choosing(Read-Only).

Answer 1

Updated: At first, I thought there was a bug with the answer code(I didn't really look at it) I provided you from the previous answer. But after looking through the old code again, I realized there isn't a bug with the old code since the datepicker class get remove every time the date picker object get initialize. Thus, I updated this answer to reflect that.

For this code, it is similar to the other code I gave you. It just that when it come to datepicker in a division it is different. However, I commented that into code. For the third datepicker, I compose that datepicker when the first maxDate function run for the first datepicker, then against when the second date picker function maxDate function is run. Since you don't want the user to do anything with the third datepicker, except seeing it, I used a division instead of an input field as a place holder for the third datepicker. They can still select the date but it will not do anything. You probably can add style to those dates to make it seem their selected and unselected states are the same. Also, tool tips can be added.

For this answer, I also give you two versions. The second version is better optimized and more flexible. Version 1 and 2 are the same code. Nonetheless, the second version assign the jQuery object of the 3 datepickers to 3 variables so that every time those divisions is needed to be used, it does not cause jQuery to look up those division objects again. Also, it is easier for you to change their naming context from one place.

Try to play around selecting the first day and you will see the days will dynamically change. Also, if you refer to any of my answer and find any bugs with in them, feel free to notify me of the bugs in the comment. Thank you.

Version 1:

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> $(document).ready(function() { var array = ["15-01-2020","18-01-2020"]; // Store date for datepicker3 here var dp3 = []; function includeDate(date) { var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date); // Date 0 = Sunday & 6 = Saturday return date.getDay() !== 0 && array.indexOf(dateStr) === -1; } function getTomorrow(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); } function dp2ini () { var from = $('#datepicker1').datepicker('getDate'); // Date diff can be obtained like this without needing to parse a date string. var date_diff = Math.ceil((from - new Date()) / 86400000); /* * For an input field, the hasDatepicker class have to removed * for the options to take effect if re-initialize. This, can * also be done with the destroy option of datepicker * $('#datepicker2').datepicker("destroy"). However, it seem, * removing its class is faster in this case. * * On the other hand if a datepicker widget is a part * or a division, it has to be destroy as the html * for the widget is placed as html content inside that division, * and simply just removing the hasDatepicker class from that division * will cause the reinitializer to write in a second datepicker widget. * * In a division where it only contained the picker * object, it is faster to just set the HTML to blank * and remove the hasDatepicker class. On the otherhand, * for more complicated division, it is better to use, * the destroy option from "datepicker". */ $('#datepicker2').val('').removeClass("hasDatepicker"); $('#datepicker2').datepicker({ inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: date_diff + 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = $('#datepicker1').datepicker('getDate'); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } dp3[1] = new Date(); dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra ); dp3[1] = dp3[1].toDateString(); // Destroy dp3 and re-initalize it. //$('#datepicker3').datepicker("destroy"); $('#datepicker3').empty(); $('#datepicker3').removeClass("hasDatepicker"); $( "#datepicker3" ).datepicker({ maxDate: max + date_diff + extra, beforeShowDay: function(date){ return [date.toDateString() == dp3[0] || date.toDateString() == dp3[1] ]; } }); return max + date_diff + extra; })(7) }); } $('#datepicker1').datepicker({ defaultDate: "+1d", inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = new Date(); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } /* Initialize datepicker 3 here. */ // NOTE: If dp1 needed to be reinitialize dp3 // also have to be destroyed and reinitialize. // The last day will always be a pick-able one... // Because if it wasn't another day would had been added to it. dp3[0] = new Date(); dp3[0].setDate( dp3[0].getDate() + max + extra ); dp3[0] = dp3[0].toDateString(); $( "#datepicker3" ).datepicker({ maxDate: max + extra, beforeShowDay: function(date){ return [date.toDateString() == dp3[0]]; } }); return max + extra; }) (3) }); $( "#datepicker1" ).change(dp2ini); // Also trigger the change event. $( "#datepicker1" ).datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change"); }); </script> <p>datepicker1 <input id="datepicker1"></p> <p>datepicker2 <input id="datepicker2"></p> <div id="datepicker3"></div>

Version 2:

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script> $(document).ready(function() { var array = ["15-01-2020","18-01-2020"]; // Store date for datepicker3 here var dp3 = []; var datepicker1 = $('#datepicker1') datepicker2 = $('#datepicker2'), datepicker3 = $('#datepicker3'); function includeDate(date) { var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date); // Date 0 = Sunday & 6 = Saturday return date.getDay() !== 0 && array.indexOf(dateStr) === -1; } function getTomorrow(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1); } function dp2ini () { var from = datepicker1.datepicker('getDate'); // Date diff can be obtained like this without needing to parse a date string. var date_diff = Math.ceil((from - new Date()) / 86400000); /* * For an input field, the hasDatepicker class have to removed * for the options to take effect if re-initialize. This, can * also be done with the destroy option of datepicker * $('#datepicker2').datepicker("destroy"). However, it seem, * removing its class is faster in this case. * * On the other hand if a datepicker widget is a part * or a division, it has to be destroy as the html * for the widget is placed as html content inside that division, * and simply just removing the hasDatepicker class from that division * will cause the reinitializer to write in a second datepicker widget. * * In a division where it only contained the picker * object, it is faster to just set the HTML to blank * and remove the hasDatepicker class. On the otherhand, * for more complicated division, it is better to use, * the destroy option from "datepicker". */ datepicker2.val('').removeClass("hasDatepicker"); datepicker2.datepicker({ inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: date_diff + 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = datepicker1.datepicker('getDate'); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } dp3[1] = new Date(); dp3[1].setDate( dp3[1].getDate() + max + date_diff + extra ); dp3[1] = dp3[1].toDateString(); // Destroy dp3 and re-initalize it. //$('#datepicker3').datepicker("destroy"); datepicker3.empty(); datepicker3.removeClass("hasDatepicker"); datepicker3.datepicker({ maxDate: max + date_diff + extra, beforeShowDay: function(date){ return [date.toDateString() == dp3[0] || date.toDateString() == dp3[1] ]; } }); return max + date_diff + extra; })(7) }); } datepicker1.datepicker({ defaultDate: "+1d", inline: true, showOtherMonths: true, changeMonth: true, selectOtherMonths: true, required: true, showOn: "focus", numberOfMonths: 1, minDate: 1, beforeShowDay: function(date) { return [includeDate(date)]; }, maxDate: (function(max) { var nextAvailable = new Date(); var count = 0; var extra = 0; while(count < max) { nextAvailable = getTomorrow(nextAvailable); if ( !includeDate(nextAvailable) ) { extra++; } else { count++; } } /* Initialize datepicker 3 here. */ // NOTE: If dp1 needed to be reinitialize dp3 // also have to be destroyed and reinitialize. // The last day will always be a pick-able one... // Because if it wasn't another day would had been added to it. dp3[0] = new Date(); dp3[0].setDate( dp3[0].getDate() + max + extra ); dp3[0] = dp3[0].toDateString(); datepicker3.datepicker({ maxDate: max + extra, beforeShowDay: function(date){ return [date.toDateString() == dp3[0]]; } }); return max + extra; }) (3) }); datepicker1.change(dp2ini); // Also trigger the change event. datepicker1.datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date()+100).trigger("change"); }); </script> <p>datepicker1 <input id="datepicker1"></p> <p>datepicker2 <input id="datepicker2"></p> <div id="datepicker3"></div>