How to restrict the selectable date ranges in Bootstrap Datepicker?

javascript twitter-bootstrap datepicker bootstrap-datepicker
Alagappan Ramu picture Alagappan Ramu · Aug 13, 2012 · Viewed 197.2k times · Source

I need to use datepicker which provides me the option of restricting the selectable dates. We had been using jQuery UI which is used to support it using minDate, maxDate options. 

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});

Recently we started using Twitter Bootstrap for our styles. And apparently, Twitter Bootstrap is incompatible with jQuery UI styles. So I tried using one of the bootstrap compatible datepickers available at http://www.eyecon.ro/bootstrap-datepicker/.

Unfortunately, the above plugin is not as configurable as jQuery UI's datepicker. Can anyone help me out with restricting the selectable date ranges in the new datepicker.

Answer

Danny picture Danny · Aug 27, 2012

The Bootstrap datepicker is able to set date-range. But it is not available in the initial release/Master Branch. Check the branch as 'range' there (or just see at https://github.com/eternicode/bootstrap-datepicker), you can do it simply with startDate and endDate.

Example:

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

Related questions

bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

<script type="text/javascript"> // When the document is ready $(document).ready(function () { $('.datepicker').datepicker({ format: "yyyy-mm-dd", }).on('changeDate', function(ev){ // do what you want here $(this).datepicker('hide'); }).on('changeDate', function(ev){ if ($('#startdate').val() != '' &…

Read More
Set date to be initially empty in bootstrap-datepicker

I am using the bootstrap-datepicker in my site. The datepicker will be used to define search filters. I need the initial value of the datepicker input element to be empty, so it will not introduce the date filter for the …

Read More
How do you prevent bootstrap-datepicker from clearing existing value from input if no date is selected?

I have have a div with a user's date of birth pre-populated with php: <div id="datepicker" class="input-group date"> <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="…

Read More