Tag Archives: jQuery UI

Customize JQuery UI datepicker with From and To date

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.

 

jQuery datepicker to show month and year only

jquery datepicker to show month year only

 

jQuery has very nice Date Picker library, but it can’t be customized to remove the date part, i.e. to show month and year only.
In some cases, you only need that the user selects the month and year mm/yyyy (month/year) as input without the day (like in credit card expiry date).Below is the code to show only the header of date picker with month and year selects(date will not show any more).

 

If you use this one, you have partially done but it create some confusion to user as it shows date as well and user have to select a date whereas it use only month and date.

 

$("#datepicker").datepicker({dateFormat: "mm/yy" });

For removing this confusion and hiding the date section completely, you can use the below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>

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

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

<script type="text/javascript">
$(function() {
$('#expiryDate').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm/yy',
minDate:'m', // restrict to show month greater than current month
onClose: function(dateText, inst) {
// set the date accordingly
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>

<style type="text/css">.ui-datepicker-calendar { display: none; }</style>

<label for="expiryDate">Expiry Date:</label>
<input name="cc_expiryDate" id="expiryDate" class="date-picker" /> (mm/yyyy)

It will show calendar likes this.

jQuery datepicker show month and year only

jQuery datepicker show month and year only