Get Value Of Cjuidatepicker Using Javascript

Is there any way i can get the date value of cjuidatepicker once it is selected and add one more day to it such that I can print the new date out in a textfield? I know I can do it using javascript but I’m not sure how to do it as I’m not familiar with javascript.

The excellent and duly message.

You can use the onSelect event ( ) and the selected property. Here’s an example adding 10 years and setting it as min date for another CJuiDatepicker:

This is what I have done. But the duration still does not appear in the textfield (id: proj_duration) and I don’t know why. Can anyone help?

For the cjuidatepicker:

'onSelect'=> 'js:function( selectedDate ) {



	var start = $("#sDate").val();

	var end = $("#eDate").val();

	startDateArray = start.split('-');  

	startDateObject = new Date(startDateArray[2]*1, startDateArray[1]*1-1, startDateArray[0]*1);

	endDateArray = end.split('-');  

	endDateObject = new Date(endDateArray[2]*1, endDateArray[1]*1-1, endDateArray[0]*1);

	var startdate = startDateObject.getTime();

	var enddate = endDateObject.getTime();

	var date_diff = Math.abs(enddate - startdate);

	var each_day = 1000 * 60 * 60 * 24;

	var days = Math.round(date_diff / each_day);


	$("#proj_duration").val(days);  //set the value of the textfield to display the duration


Textfield to display duration:

<div class='formtext'><?php echo $form->textField($model,'duration',array('size'=>5,'maxlength'=>3, 'id'=>'proj_duration')); ?> days</div>

Hidden field to store start and end date obtained from cjuidatepicker:

<input type="hidden" id="sDate">

<input type="hidden" id="eDate">