How to restrict the selectable date ranges in Bootstrap Datepicker?

With selectable date ranges you might want to use something like this. My solution prevents selecting #from_date bigger than #to_date and changes #to_date startDate every time when user selects new date in #from_date box:

http://bootply.com/74352

JS file:

var startDate = new Date('01/01/2012'); var FromEndDate = new Date(); var ToEndDate = new Date(); ToEndDate.setDate(ToEndDate.getDate()+365); $('.from_date').datepicker({ weekStart: 1, startDate: '01/01/2012', endDate: FromEndDate, autoclose: true }) .on('changeDate', function(selected){ startDate = new Date(selected.date.valueOf()); startDate.setDate(startDate.getDate(new Date(selected.date.valueOf()))); $('.to_date').datepicker('setStartDate', startDate); }); $('.to_date') .datepicker({ weekStart: 1, startDate: startDate, endDate: ToEndDate, autoclose: true }) .on('changeDate', function(selected){ FromEndDate = new Date(selected.date.valueOf()); FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf()))); $('.from_date').datepicker('setEndDate', FromEndDate); }); 

HTML:

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text"> <input class="to_date" placeholder="Select end date" contenteditable="false" type="text" 

And do not forget to include bootstrap datepicker.js and .css files aswell.

The example above can be simplify a bit. Additionally you can put date manually from keyboard instead of selecting it via datepicker only. When clearing the value you need to handle also 'on clearDate' action to remove startDate/endDate boundary:

JS file:

$(".from_date").datepicker({ format: 'yyyy-mm-dd', autoclose: true, }).on('changeDate', function (selected) { var startDate = new Date(selected.date.valueOf()); $('.to_date').datepicker('setStartDate', startDate); }).on('clearDate', function (selected) { $('.to_date').datepicker('setStartDate', null); }); $(".to_date").datepicker({ format: 'yyyy-mm-dd', autoclose: true, }).on('changeDate', function (selected) { var endDate = new Date(selected.date.valueOf()); $('.from_date').datepicker('setEndDate', endDate); }).on('clearDate', function (selected) { $('.from_date').datepicker('setEndDate', null); }); 

HTML:

<input class="from_date" placeholder="Select start date" type="text" name="from_date"> <input class="to_date" placeholder="Select end date" type="text" name="to_date"> 

Most answers and explanations are not to explain what is a valid string of endDate or startDate. Danny gave us two useful example.

$('#datepicker').datepicker({ startDate: '-2m', endDate: '+2d' }); 

But why?let's take a look at the source code at bootstrap-datetimepicker.js. There are some code begin line 1343 tell us how does it work.

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) { var part_re = /([-+]\d+)([dmwy])/, parts = date.match(/([-+]\d+)([dmwy])/g), part, dir; date = new Date(); for (var i = 0; i < parts.length; i++) { part = part_re.exec(parts[i]); dir = parseInt(part[1]); switch (part[2]) { case 'd': date.setUTCDate(date.getUTCDate() + dir); break; case 'm': date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir); break; case 'w': date.setUTCDate(date.getUTCDate() + dir * 7); break; case 'y': date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir); break; } } return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0); } 

There are four kinds of expressions.

• w means week
• m means month
• y means year
• d means day

Look at the regular expression ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$. You can do more than these -0d or +1m.

Try harder like startDate:'+1y,-2m,+0d,-1w'.And the separator , could be one of [\f\n\r\t\v,]

Another possibility is to use the options with data attributes, like this(minimum date 1 week before):

<input class='datepicker' data-date-start-date="-1w"> 

More info: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

i am using v3.1.3 and i had to use data('DateTimePicker') like this

var fromE = $( "#" + fromInput ); var toE = $( "#" + toInput ); $('.form-datepicker').datetimepicker(dtOpts); $('.form-datepicker').on('change', function(e){ var isTo = $(this).attr('name') === 'to'; $( "#" + ( isTo ? fromInput : toInput ) ) .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY')) }); 

<script type="text/javascript"> 

$(document).ready( function() { $("#submitdate").datepicker( { minDate: 0, maxDate: 0,

 dateFormat: "yy-mm-dd", });