10 different example of jQuery datepicker

Introduction:

Here you can see different example of jQuery UI datepicker. jQuery UI Datepicker has been made very flexible and customizable. It satisfied most of our requirements.
In order to enabled/disabled days, change year range you need to add bit of code as it has no directly functionality. Here I have used beforeShowDay, yearRange, minDate, maxDate mathod’s of jQuery Datepicker.

How to set up jQuery UI datepicker?

It very very easy to set up. For that you just need to download jQuery UI and put in your project folder and call into your web page as normal as we called external JavaScript and css. Or you can directly write CDN Path of jQuery UI. You may find out on jQuery ui official site. May be on bottom of page.

In this articles I have shown below different examples of datepicker that may satisfied your most of needs.

  • Simple Datepicker
  • Add year and month dropdown box in datepicker
  • Change year range of datepicker
  • Change date format
  • Set first day of week
  • Disabled previous days
  • Disabled next days
  • Disabled any week days
  • Enabled/Disabled only selected Days
  • Enabled date range

DEMO

Simple Datepicker:

jQuery(‘input[name=calender]’).datepicker();

Add year and month dropdown box in datepicker:

Datepicker defaultly set +10-10 Year. You can also swape month and year dropdown using {showMonthAfterYear:true}.

jQuery(‘input[name=calender]’).datepicker({changeYear:true, changeMonth:true, showMonthAfterYear:true});

Change year range of datepicker:

jQuery(‘input[name=calender]’).datepicker({changeYear:true, changeMonth:true, yearRange:”1990:2025″});

Change date format:

There are no. of date format support. click to view in details.

jQuery(‘input[name=calender]’).datepicker({dateFormat: “yy-mm-dd”});

Set first day of week:

For sunday:0, monday:1 …..

jQuery(‘input[name=calender]’).datepicker({firstDay: 1});

Disabled previous days:

jQuery(‘input[name=calender]’).datepicker({minDate: 0});

Disabled next days:

jQuery(‘input[name=calender]’).datepicker({maxDate: 0});

Disabled any week days:

jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : function(date){
if(date.getDay() == 0 || date.getDay() == 6)
return [0];
else
return [1];
}
});

Enabled/Disabled only selected Days:

Pass your collected date in “enabledDays” array. In this array I have given m-d-y format.

var enabledDays = [‘7-10-2013′,’7-15-2013′,’7-20-2013′,’7-25-2013’];
// Enabled specific days:
function enableAll(date) {
var m = date.getMonth() + 1, d = date.getDate(), y = date.getFullYear();
for (var i = 0; i < enabledDays.length; i++) {
if($.inArray(m + ‘-‘ + d + ‘-‘ + y,enabledDays) != -1) {
return [1];
}
}
return [0];
}
jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : enableAll
});

// Disabled specific days:
function disabledAll(date) {
var m = date.getMonth() + 1, d = date.getDate(), y = date.getFullYear();
for (var i = 0; i < enabledDays.length; i++) {
if($.inArray(m + ‘-‘ + d + ‘-‘ + y,enabledDays) != -1) {
return [0];
}
}
return [1];
}
jQuery(‘input[name=calender]’).datepicker({
beforeShowDay : disabledAll
});

Enabled date range:

var today = new Date();
jQuery(‘input[name=calender]’).datepicker({
minDate: new Date(2013, 7, 10),
maxDate: new Date(today.getFullYear(), today.getMonth()+1, today.getDate())
});

Leave a Reply

Your email address will not be published. Required fields are marked *