HomeCoding & Programming

Customize JQuery UI datepicker with From and To date

Customize JQuery UI datepicker with From and To date
Like Tweet Pin it Share Share Email

I think you have used the JQuery UI datepicker many times and you have also faced trouble when there are 2 date text-boxes and you have to use datepicker in both with taking care that one text-box date value always less than the 2nd one.

 

I think you have got my point, what I want to say.
Like you have two date fields named as FROM and TO and FROM date should always less then TO date.

 

For solving the same you have to make a trick in the datepicker function.
Below is the same you can use.

 

Just add below three lines to include CSS and JS  in your document head as below.

 

Head Section:


<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

 

JavaScript Code:

<script type="text/javascript">
$(document).ready(function(){

	$("#datepicker").datepicker({
	
		dateFormat : 'dd/mm/yy',
		minDate    : new Date(),
		maxDate    : '+1Y',
		defaultDate: "+1w",
		changeMonth: true,
		onSelect   : function(selected){
		
			var arr = selected.split("/");
			var spares = [arr[2], arr[1],parseInt(parseInt(arr[0])+1)];
			var joint = spares.join("/");
			var minDate2 = new Date(joint);
			$("#datepicker2").datepicker("option","minDate", minDate2);
		
		}
	
	});
	
	$("#datepicker2").datepicker({
	
		dateFormat : 'dd/mm/yy',
		minDate    : "+1",
		defaultDate: "+1w",
		maxDate    : '+1Y',
		changeMonth: true,
		onSelect   : function(selected) {
		
			$( "#datepicker" ).datepicker( "option", "maxDate", selected );
		
		}
	
	});

});
</script>

 

HTML Code:

<table width="100%" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td colspan="2">From Date:</td>
    <td><input type="text" value="" name="indate" id="datepicker" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2">To Date:</td>
    <td><input type="text" value="" name="outdate" id="datepicker2" /></td>
    <td>&nbsp;</td>
  </tr>
</table>

 

For further reference you can go through the JQuery UI library by the below URL.

JQuery UI datepicker

 

I hope this all will help you.

Let me know by comments, if you still face any issue related to above.