Servage Magazine

Adding dates via input elements in forms can be cumbersome unless a date picker is used. There are a few plugins available for jQuery and Bootstrap which make this process simple – yet implementing a powerful and advanced tool. The tool described below is called “Date Range Picker for Bootstrap” and is ready to go with a very simple implementation.

Getting started

The first step is to include the relevant resources into your site. The dependencies are Bootstrap (and jQuery), so you  need to get them first. Thereafter add the resources for the data range picker plugin.

<!-- Include dependencies -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" />
 
<!-- Include date range picker plugin -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker-bs3.css" />

Applying the plugin to an element

You can apply the date range picker plugin to any element. It makes sense to use something that visually underlines its functionality. That could for example be an input field, a button or a dropdown trigger. In the example below the plugin is attached to a button which displays the selected date range and an arrow-down to underline the functionality of the button.

// Button element the date range picker is applied to
<button id="picker" class="btn btn-primary"><span class="date"></span> <span class="caret"></span></button>

The Javascript should be wrapped in a “ready” enclosure like all other jQuery code.

// Apply the date range picker with default settings to the button
$('#picker').daterangepicker();

// Apply the date range picker with custom settings to the button
$('#picker').daterangepicker({
    format: 'MM/DD/YYYY',
    startDate: moment().subtract(29, 'days'),
    endDate: moment(),
    minDate: '01/01/2012',
    maxDate: '12/31/2015',
    dateLimit: { days: 60 },
    showDropdowns: true,
    showWeekNumbers: true,
    timePicker: false,
    timePickerIncrement: 1,
    timePicker12Hour: true,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    opens: 'left',
    drops: 'down',
    buttonClasses: ['btn', 'btn-sm'],
    applyClass: 'btn-primary',
    cancelClass: 'btn-default',
    separator: ' to ',
    locale: {
        applyLabel: 'Submit',
        cancelLabel: 'Cancel',
        fromLabel: 'From',
        toLabel: 'To',
        customRangeLabel: 'Custom',
        daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        firstDay: 1
    }
}, function(start, end, label) {
    $('#picker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
});

Customizing the date range picker

The date range picker can be customized for a series of scenarios. First of all, you can limit it to one date rather than a range. Furthermore you can decide if time should also be choosen or not. Another great customization feature are the buttons for predefined ranges, which can be set to ranges commonly selected by users of your application.

Finally you can also customize the localization to suit your language and region. This facilitates both translations of the used texts, but also week days, start of week etc.

Using this date range picker greatly improves the look and feel of your form by adding a professional and good looking date range selection option for your users. The built-in validation further improves the usability by making the user aware of valid or invalid date selections.