Category: Datepicker

Using jQuery Datepicker

Simple method to link datepicker to input box

$('.datepicker_open').datepicker({})

This example shows where you want set minimum date from another date picker. For example from and to date and to date will be 14 days from the From date

HTML

<label for="from">Repay Date</label>
<input type="text" id="repay" name="repay" />
<label for="to">Transfer Date</label>
<input type="text" id="transfer" name="transfer" />

Javascript

  $(function() {
 var dateToday = new Date();
 $( "#repay" ).datepicker({
 changeMonth: true , //change the month 
 changeYear:true , //change the year 
 minDate:dateToday,
 onSelect: function( selectedDate ) {
 $( "#transfer" ).datepicker( "option", "minDate", selectedDate );
 }
 });
 $( "#transfer" ).datepicker({ 
 changeMonth: true, 
 changeYear:true,
 minDate:dateToday,
 onSelect: function( selectedDate ) {
 $( "#repay" ).datepicker( "option", "minDate", selectedDate );
 }
 });
 });

Datepicker Properties

1. .prop – for example if you want the date picker to be only readonly

$('.datepicker_open').datepicker({
 minDate: dateToday,
 dateFormat: 'dd/mm/yy',
 onSelect: function(selectedDate){ $j( ".datepicker_restrict" ).datepicker( "option", "minDate", selectedDate ); }
 }).prop('readonly', true);

Link to fiddle

Apply Themes

<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/vader/jquery-ui.css" />
//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js

Trigger with the Icon Only

 $j("#calendar1").datepicker({ 
 datevFormat: 'dd/mm/yy',
 showOn: "button",
 buttonImage: "/images/basic_theme/calender_icon.jpg",
 buttonImageOnly: true,
 buttonText: "Select date"
 }).prop('readonly', true);

Setting Min and Max Dates

$j('.datepicker_open').datepicker({
    minDate:'-6m',
    maxDate:dateToday,
 });

minDate/MaxDate: m = month, d=day, Y= year

Show Icon

$j(function() {
 var dateToday = new Date();
 var limit = '__CAL_LIMIT__';
 $j('.datepicker_open').datepicker({
 showOn: "button",
 buttonImage: "calendar_r1_c1.png",
 buttonImageOnly: true,
 buttonText: "Select date",
 dateFormat: 'dd/mm/yy',
 minDate:limit,
 maxDate:dateToday,
 }).prop('readonly',true);
});

Happy coding!!!!