A Date Range Picker for Twitter Bootstrap

Date Range Picker for Twitter Bootstrap

While developing Improvely, having all the components of Twitter Bootstrap at hand pre-styled was a great time saver.

I was in need of a dropdown menu to choose date ranges for reports, and wanted something that would match the existing dropdown and button styles of Bootstrap: thus came about this date range picker component. Download it at GitHub.

For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. For more advanced use cases, you can attach a date range picker to any element, pre-define your own date ranges for the user to choose from, and set a custom callback function to receive the chosen dates.

In 2013, the Date Range Picker was updated with many new options, including a time picker, min/max dates and max range, localization of all buttons/labels, dropdowns to jump between months/years and more.

Usage:

$('#element').daterangepicker(options, callback);

The examples below show how to use the (optional) options and callback parameters.

Basic Date Range Picker Example

<form>
  <div class="form-group">
    <label for="reservation">Reservation dates:</label>
    <div class="controls">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" name="reservation" id="reservation" />
      </div>
    </div>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
	$('#reservation').daterangepicker();
});
</script>

Pre-defined Ranges & Callback

March 19, 2014 - April 18, 2014


<div id="reportrange" class="pull-right">
    <i class="fa fa-calendar fa-lg"></i>
    <span><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?></span> <b class="caret"></b>
</div>

<script type="text/javascript">
$('#reportrange').daterangepicker(
    {
      ranges: {
         'Today': [moment(), moment()],
         'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
         'Last 7 Days': [moment().subtract('days', 6), moment()],
         'Last 30 Days': [moment().subtract('days', 29), moment()],
         'This Month': [moment().startOf('month'), moment().endOf('month')],
         'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
      },
      startDate: moment().subtract('days', 29),
      endDate: moment()
    }, 
    function(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
);
</script>

Date & Time Picker

<form>
  <div class="form-group">
    <label for="reservationtime">Reservation dates:</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" name="reservation" id="reservationtime" class="col-xs-4"  />
    </div>
  </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
  $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' });
});
</script>
PPC Click Fraud Prevention
  • user

    Localization? bootstrap 3.1 integration? docs?

  • Guest

    Yes, yes and yes. Try clicking the github link.

  • Pingback: أفضل أدوات Bootstrap للمصمين والمطوريين

  • NTT

    when using this amazing plugin with themes from http://bootswatch.com/
    the control is unreadble.

    couild you please make it theamable?

    again 10x 4 all the good work

  • mahesh. p

    hai dan, first of all date rangepicker is an excellent one.. my question is i am using the daterange picker in my asp.net page .. i need to save the dates which i select on the ‘APPLY” button click in the code behind .. so how can i make the APPLY button as dynamic.

  • http://qnibus.com/ Jongtae Ahn

    Nice work, and very thanks.