Configuring and Implementing Date Range Restrictions in Bootstrap Datepicker

Basic Configuration of Date Range Restrictions

Bootstrap Datepicker offers robust date range restriction capabilities primarily through the startDate and endDate options. Similar to jQuery UI's minDate and maxDate, these options allow developers to define the minimum and maximum selectable dates for users.

When configuring date ranges, multiple parameter formats are accepted:

• Date objects: Use JavaScript Date objects to specify exact dates
• Formatted date strings: Parsed according to the configured format option
• Relative time deltas: Use relative expressions like "-2m", "+2d"

Implementation of Relative Date Ranges

Relative date range configuration is the most commonly used approach in practical development, as it dynamically calculates allowable date ranges based on the current date. Here's a typical configuration example:

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

In this example, startDate: '-2m' allows selection of dates starting from two months before the current date, while endDate: '+2d' permits selection up to two days after the current date. Relative time expressions support multiple units:

• d: days
• w: weeks
• m: months
• y: years

Additionally, the system provides convenient aliases: yesterday (equivalent to "-1d"), today (equivalent to "+0d"), and tomorrow (equivalent to "+1d").

Advanced Date Range Control

For more complex scenarios, such as interdependent date pickers, dynamic range adjustments can be achieved through event listeners and method calls. Here's a complete example implementing mutual constraints between start and end dates:

$(".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);
});

In this implementation:

• When a user selects a start date, the changeDate event captures the selected date and uses the setStartDate method to update the minimum selectable date of the end date picker
• Similarly, when an end date is selected, the event listener updates the maximum selectable date of the start date picker
• When dates are cleared, the clearDate event resets the corresponding range restrictions to null

Data Attribute Configuration

In addition to JavaScript configuration, Bootstrap Datepicker supports configuration through HTML data attributes. Option names are converted to corresponding data attribute formats, for example startDate becomes data-date-start-date and endDate becomes data-date-end-date.

Here's an example of configuring date ranges via data attributes:

<input type="text" class="form-control" data-date-start-date="-2m" data-date-end-date="+2d">

This approach provides a more concise configuration method, particularly useful when rendering pages server-side.

Other Related Configuration Options

Beyond basic date range restrictions, Bootstrap Datepicker offers additional configuration options to enhance the date selection experience:

• datesDisabled: Disable specific dates or date arrays
• daysOfWeekDisabled: Disable specific days of the week
• beforeShowDay: Dynamically control each date's selectable status through functions
• minViewMode and maxViewMode: Restrict the view levels users can select

The combined use of these options enables the creation of highly customized date selection interfaces that meet various complex business requirements.