Two popup calendars (start and end date)

Previous post shows how to create a popup calendar. This post shows two popup calendars.

html
<div style='display:none'>
   <div id='dt1Label'><SpotfireControl id='L4b31C0n7r01...'/>
   </div>
   <div id='dt2Label'><SpotfireControl id='L4b31C0n7r02...'/>
   </div>

</div>

Date1: <span id='dt1'><SpotfireControl id='Inpu7C0n7r01...'/>

<span id='dt1picker'></span>

Date2: <span id='dt2'><SpotfireControl id='Inpu7C0n7r02...'/>

<span id='dt2picker'></span>

js
//constraint date2 calendar based on selection and update property controls automatically
function picker1_onSelect(selectedDate,inst){

 //min date constraint based on other picker
 minDate = $(this).datepicker("getDate")
 $("#datePicker2").datepicker("option","minDate",minDate);

 //update document property after selection
 $("#dt1 input").focus(); 
 $("#dt2 input").focus(); 
}

//update document property after selection
function picker2_onSelect(selectedDate){
 $("#dt2 input").focus(); 
 $("#dt1 input").focus(); 
}

//global datepicker options
pickerOptions = {
 showOn: 'button', 
 buttonImageOnly: true, 
 buttonImage: 'http://myveincare.net/images/datepicker_icon.jpg', 
 minDate: "-36M", maxDate: "+0D",
 changeMonth: true,
 changeYear: true
}


//create first date picker
document.getElementById('dt1picker').innerHTML="<input type='hidden' id='datePicker1' value="+$('#dt1Label').text()+">"
$("#datePicker1").datepicker(pickerOptions);
$("#datePicker1").datepicker("option",{altField:"#dt1 input", onClose:picker1_onSelect})


//create second date picker
document.getElementById('dt2picker').innerHTML="<input type='hidden' id='datePicker2'value="+$('#dt2Label').text()+">"
$("#datePicker2").datepicker(pickerOptions);
$("#datePicker2").datepicker("option",{altField:"#dt2 input", onClose:picker2_onSelect})

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post