Jquery Bootstrap Calender to disable previos date and only show upcomming dates

// implementation of disabled form fields
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').fdatepicker({
 onRender: function (date) {
  return date.valueOf() < now.valueOf() ? 'disabled' : '';
 }
}).on('changeDate', function (ev) {
 if (ev.date.valueOf() > checkout.date.valueOf()) {
  var newDate = new Date(ev.date)
  newDate.setDate(newDate.getDate() + 1);
  checkout.update(newDate);
 }
 checkin.hide();
 $('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').fdatepicker({
 onRender: function (date) {
  return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
 }
}).on('changeDate', function (ev) {
 checkout.hide();
}).data('datepicker');

 

Download here

 

Minimal setup

Include dependancies and call the datepicker via javascript:

$('.fdatepicker').fdatepicker()

• Online example
• Github

Based on fantastic bootstrap-datepicker plugin.

Options

Name	type	default	description
format	string	'mm/dd/yyyy'	the date format, combination of d, dd, m, mm, yy, yyyy.
language	string	'ja'	two-char iso shortcut of language you want to use
weekStart	integer	0	day of the week start. 0 for Sunday - 6 for Saturday
viewMode	string|integer	0 = 'days'	set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years
minViewMode	string|integer	0 = 'days'	set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years

Languages

To set language, pass "language" parameter to the constructor:

$('.fdatepicker').fdatepicker({
  language: 'de'
});

Datepicker is available in following languages:

• English (en) - default
• Czech (cs)
• Dutch (nl)
• French (fr)
• German (de)
• Greek (el)
• Hungarian (hu)
• Italian (it)
• Norwegian (no)
• Polish (pl)
• Portugese (pt)
• Portugese Brasil (pt_br)
• Romanian (ro)
• Russian (ru)
• Slovak (sk)
• Spanish (es)
• Turkish (tr)
• Ukrainian (uk)
• Chinese Simplified (zh-CN)
• Chinese Traditional (zh-TW)
• Japanese (ja)

Methods

.fdatepicker(options)

Initializes a datepicker.

.fdatepicker('show')

Show the datepicker.

.fdatepicker('hide')

Hide the datepicker.

.fdatepicker('place')

Updates the date picker's position relative to the element

.fdatepicker('update', value)

Updates the date picker's value. It can be a string in the specified format or a Date object.

Events

Datepicker class exposes a few events for manipulating the dates.

Event	Description
show	This event fires immediately when the date picker is displayed.
hide	This event is fired immediately when the date picker is hidden.
changeDate	This event is fired when the date is changed.

One more Exmaple

http://jsfiddle.net/KyleMit/g2WYe/