Databases
StackOverflow2013
Postsdbo
POjquery ui datepicker onselect loop and change days
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery ui datepicker onselect loop and change days
    text
    copied!<p>I need a bit of help. On jQuery UI datepicker how to loop through all dates like it is possible to do in beforeShowDay?</p> <p>I have the following code:</p> <pre><code>onSelect: function(dateText, inst){ var checkIn = new Date(dateText); alert(checkIn); var checkOut=new Date(checkIn.getTime() + 6*24*60*60*1000); var startTime = checkIn.getTime(), endTime = checkOut.getTime(); var selectedDates=new Array(); var kk=1; for(loopTime = startTime; loopTime &lt;= endTime; loopTime += 86400000) { //alert(kk); day=new Date(loopTime); selectedDates[kk]=new Array(); selectedDates[kk][1]=day.getDate(); selectedDates[kk][2]=day.getFullYear(); selectedDates[kk][0]=day.getMonth()+1; kk++; //here I should somehow change the class or css for selectedDates..... } //reinitiate the datePicker showSelectedDays(checkIn,checkOut,selectedDates); }, </code></pre> <p>Any idea to help me not to initiate the datePicker again?</p> <p>the full script is:</p> <pre><code>&lt;script&gt; $(document).ready(function() { $.ajax({ url: "/houses/isAvailble/&lt;?=$Acid;?&gt;", data: "action=showdates&amp;id=1", dataType: "json", success: function(calendarEvents2) { calendarEvents = calendarEvents2.dates; $("#bookCalendar").datepicker({ // [rows, columns] if you want to display multiple calendars. numberOfMonths: [1, 3], maxDate: calendarEvents.maxDate, minDate: '+1d', showCurrentAtPos: 0, dateFormat: 'yy-mm-dd', onSelect: function(dateText, inst) { var checkIn = new Date(dateText); alert(checkIn); var checkOut = new Date(checkIn.getTime() + 6 * 24 * 60 * 60 * 1000); var startTime = checkIn.getTime(), endTime = checkOut.getTime(); var selectedDates = new Array(); var kk = 1; for (loopTime = startTime; loopTime &lt;= endTime; loopTime += 86400000) { //alert(kk); day = new Date(loopTime); selectedDates[kk] = new Array(); selectedDates[kk][1] = day.getDate(); selectedDates[kk][2] = day.getFullYear(); selectedDates[kk][0] = day.getMonth() + 1; kk++; } showSelectedDays(checkIn, checkOut, selectedDates); }, beforeShowDay: function(date) { for (i = 0; i &lt; calendarEvents.length; i++) { if (date.getMonth() == calendarEvents[i][0] - 1 &amp;&amp; date.getDate() == calendarEvents[i][1] &amp;&amp; date.getFullYear() == calendarEvents[i][2]) { //[disable/enable, class for styling appearance, tool tip] return [calendarEvents[i]['enabled'], calendarEvents[i]['class'], calendarEvents[i]['booking']]; } } return [true, ""]; //enable all other days } }); } }); function showSelectedDays(checkIn, checkOut, selectedDates) { //console.log(selectedDates); //show selected days dateMax = new Date(checkOut); dateMin = new Date(checkIn); //alert(new Date('2011-01-02')); $("#bookCalendar").datepicker("destroy"); $("#bookCalendar").datepicker({ // [rows, columns] if you want to display multiple calendars. numberOfMonths: 3, maxDate: '+10m', minDate: '+1d', showAnim: 'fold', defaultDate: checkIn, onSelect: function(dateText, inst) { var checkIn = new Date(dateText); alert(checkIn); var checkOut = new Date(checkIn.getTime() + 6 * 24 * 60 * 60 * 1000); var startTime = checkIn.getTime(), endTime = checkOut.getTime(); var selectedDates = new Array(); var kk = 1; for (loopTime = startTime; loopTime &lt;= endTime; loopTime += 86400000) { //alert(kk); day = new Date(loopTime); selectedDates[kk] = new Array(); selectedDates[kk][1] = day.getDate(); selectedDates[kk][2] = day.getFullYear(); selectedDates[kk][0] = day.getMonth() + 1; kk++; } showSelectedDays(checkIn, checkOut, selectedDates); }, beforeShowDay: function(date) { for (i = 1; i &lt; selectedDates.length; i++) { if (date.getMonth() == selectedDates[i][0] - 1 &amp;&amp; date.getDate() == selectedDates[i][1] &amp;&amp; date.getFullYear() == selectedDates[i][2]) { //[disable/enable, class for styling appearance, tool tip] return [false, 'ui-booking-BB', 'Selected Days']; } } for (i = 0; i &lt; calendarEvents.length; i++) { if (date.getMonth() == calendarEvents[i][0] - 1 &amp;&amp; date.getDate() == calendarEvents[i][1] &amp;&amp; date.getFullYear() == calendarEvents[i][2]) { //[disable/enable, class for styling appearance, tool tip] return [calendarEvents[i]['enabled'], calendarEvents[i]['class'], calendarEvents[i]['booking']]; } } }, dateFormat: 'yy-mm-dd' }); } }); &lt;/script&gt; </code></pre> <p>The problem, that gives re-initiation, is that when I make Back,Back,Back to the previous months, on the last month the datepicker disappears with error:</p> <blockquote> <p>G is not defined</p> </blockquote> <p>working example</p> <pre><code>&lt;script&gt; $(document).ready(function() { $.ajax({ url: "/houses/isAvailble/&lt;?=$Acid;?&gt;", data: "action=showdates&amp;id=1", dataType: "json", success: function(calendarEvents2){ $('#travelDuration').combobox('destroy').combobox(); var selectedDates=new Array(); var travelDuration=$('#travelDuration').val(); calendarEvents=calendarEvents2.dates; $("#bookCalendar").datepicker({ // [rows, columns] if you want to display multiple calendars. numberOfMonths: [1, 3], maxDate:calendarEvents.maxDate, minDate:'+1d', showCurrentAtPos: 0, dateFormat: 'yy-mm-dd', onSelect: function(dateText, inst) { var start=0; var step=0; var origDay=new Date(dateText); var checkOutDates=new Array(); for (i = 0; i &lt; calendarEvents.length; i++) { var thisDay=calendarEvents[i][2]+'-'+ calendarEvents[i][0]+'-'+calendarEvents[i][1]; //finding user checked day,if so setting step=1 if (dateText===thisDay) { //setting minimum Stay var minDays=calendarEvents[i]['minimumStay']; //setting a marker that started var start=1; //setting step,so days passed var step=0; //setting minimum travelDuration if(travelDuration){ console.log(travelDuration); }else{ travelDuration=minDays; } $('#travelDuration').html(' '); } if(start&gt;0 ){ //console.log(calendarEvents[i]['change']); if(calendarEvents[i]['change']=='X' &amp;&amp; calendarEvents[i]['state']=='N'){ break; //console.log(calendarEvents[i]); } if((calendarEvents[i]['change']=='O' || calendarEvents[i]['change']=='C')&amp;&amp; start&gt;minDays){ var thisDayDate=new Date(thisDay); ///http://stackoverflow.com/questions/327429/whats-the-best-way-to-calculate-date-difference-in-javascript var dateDif=thisDayDate.getTime()-origDay.getTime() ; var dayQty=dateDif/86400000 //console.log(dateDif+'-'+dayQty); $('#travelDuration'). append($("&lt;option&gt;&lt;/option&gt;"). attr("value",dayQty). text(dayQty)); } start=start+1; } } $('#travelDuration').combobox('destroy').combobox(); var checkIn = new Date(dateText); selectedDates=[]; //alert(travelDuration-1); var checkOut=new Date(checkIn.getTime() + (minDays-1)*24*60*60*1000); var startTime = checkIn.getTime(), endTime = checkOut.getTime(); var kk=1; for(loopTime = startTime; loopTime &lt;= endTime; loopTime += 86400000) { //alert(kk); day=new Date(loopTime); selectedDates[kk]=new Array(); selectedDates[kk][1]=day.getDate(); selectedDates[kk][2]=day.getFullYear(); selectedDates[kk][0]=day.getMonth()+1; kk++; } $("#bookCalendar").datepicker("refresh"); $('#travelDuration').change(function(){ travelDuration= $('#travelDuration').val(); selectedDates=[]; // alert(travelDuration-1); var checkOut=new Date(checkIn.getTime() + (travelDuration-1)*24*60*60*1000); var startTime = checkIn.getTime(), endTime = checkOut.getTime(); var kk=1; for(loopTime = startTime; loopTime &lt;= endTime; loopTime += 86400000) { //alert(kk); day=new Date(loopTime); selectedDates[kk]=new Array(); selectedDates[kk][1]=day.getDate(); selectedDates[kk][2]=day.getFullYear(); selectedDates[kk][0]=day.getMonth()+1; kk++; } $('#bookCalendar').datepicker("refresh"); }); }, beforeShowDay: function (date){ var returnDay=Array(); var index=date.getFullYear()+date.getMonth()+date.getDate(); returnDay[index]=Array(); if(selectedDates){ //console.log(selectedDates); for (i = 1; i &lt; selectedDates.length; i++) { if (date.getMonth() == selectedDates[i][0] - 1 &amp;&amp; date.getDate() == selectedDates[i][1] &amp;&amp; date.getFullYear() == selectedDates[i][2]) { returnDay[index]['class']='ui-booking-BB'; } } } for (i = 0; i &lt; calendarEvents.length; i++) { if (date.getMonth() == calendarEvents[i][0] - 1 &amp;&amp; date.getDate() == calendarEvents[i][1] &amp;&amp; date.getFullYear() == calendarEvents[i][2]) { //[disable/enable, class for styling appearance, tool tip] if(returnDay[index]['class']){ returnDay[index]['enabled']=calendarEvents[i]['enabled']; returnDay[index]['booking']="Your Choosen Dates"; } else{ returnDay[index]['class']=calendarEvents[i]['class']; returnDay[index]['enabled']=calendarEvents[i]['enabled']; returnDay[index]['booking']=calendarEvents[i]['booking']; } } } return [returnDay[index]['enabled'],returnDay[index]['class'],returnDay[index]['booking']]; } }); } }); }); &lt;/script&gt; </code></pre> <p>I will try to find time to write in my blog about it. Thanks guy!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload