Creating a Date Range Picker with Bootstrap and jQuery

• Aug 14, 2023

Please note: The primary keyword for this article is "Date Range Picker," and the secondary keywords are "Bootstrap" and "jQuery." The tone of voice for this article is informative and professional.

Introduction

In the world of modern web development, creating user-friendly interfaces and interactive elements plays a crucial role in enhancing the overall user experience. One such element that greatly contributes to a seamless user experience is the Date Range Picker. A Date Range Picker allows users to conveniently select date ranges, making it easier to filter and analyze data. In this article, we will explore how to create a custom Date Range Picker using the powerful combination of Bootstrap and jQuery.

Getting Started

To begin with, let's set up the necessary libraries and dependencies. The Date Range Picker relies on Bootstrap, jQuery, and Moment.js. Make sure to include the following scripts and stylesheets in your HTML file:

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

Basic HTML Structure

Before we dive into the JavaScript code, let's set up the basic HTML structure for our Date Range Picker. We will create an input field that will be transformed into the Date Range Picker. Here's an example of the HTML structure:

<div class="container">
  <div class="py-5 text-center">
    <h1>Date Range Picker</h1>
    <div class="row">
      <div class="col-md-6 m-auto">
        <input value="" name="daterangepicker" type="text" class="form-control" id="brandDaterangepicker">
      </div>
    </div>
  </div>
</div>

Implementing the Date Range Picker

Now that we have set up the necessary libraries and the basic HTML structure, let's dive into the JavaScript code that will bring our Date Range Picker to life. We will define a custom function called filterDaterangepicker that will enhance the behavior of the Date Range Picker. Here's an example of the JavaScript code:

$.fn.filterDaterangepicker = function() {
  let this_box = $(this);
  this_box.daterangepicker({
    ranges: {
      'Today': [moment(), moment().add(1, 'days')],
      'Yesterday': [moment().subtract(1, 'days'), moment()],
      'Last 7 Days': [moment().subtract(6, 'days'), moment().add(1, 'days')],
      // Additional predefined ranges...
    },
    "alwaysShowCalendars": true,
    "showDropdowns": true,
    "showCustomRangeLabel": false,
    "autoUpdateInput": false,
    locale: {
      format: 'YYYY-MM-DD',
      cancelLabel: 'Clear'
    }
  });

  this_box.on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
  });

  this_box.on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
  });

  return this_box;
};

$('#brandDaterangepicker').filterDaterangepicker();

In the above code, we define the filterDaterangepicker function that configures various options for the Date Range Picker. We specify predefined date ranges like "Today," "Yesterday," and "Last 7 Days." Additionally, we customize the format of the selected date range and provide a clear button option. The function also includes event handlers for applying and canceling the date range selection.

Advanced Customization Options

The Date Range Picker offers various customization options to tailor it to your specific needs. Let's explore some of the most commonly used options:

startDate and endDate

These options allow you to set the initial selected date range. You can pass a Date object, Moment.js object, or a string representing the date.

minDate and maxDate

These options define the earliest and latest date that a user can select. Again, you can use Date objects, Moment.js objects, or strings.

showDropdowns

By setting this option to true, you can display year and month select boxes above the calendars, allowing users to jump to a specific month and year.

timePicker

Enabling this option allows users to select dates with times, not just dates. You can add hour, minute, and (optionally) second dropdowns below the calendars.

ranges

The ranges option allows you to set predefined date ranges that users can choose from a list. Each key represents the label for the range, and the value is an array with two dates representing the bounds of the range.

alwaysShowCalendars

By default, when predefined date ranges are used, the calendars for choosing a custom date range are hidden until the user clicks "Custom Range." Setting this option to true will always display the calendars for choosing a custom date range.

Conclusion

In this article, we have explored how to create a custom Date Range Picker using Bootstrap and jQuery. By harnessing the power of these libraries, we can enhance the user experience by providing a convenient way for users to select date ranges. The Date Range Picker offers various customization options, allowing you to tailor it to your specific needs. Whether you're building a reporting tool or an e-commerce platform, the Date Range Picker can be a valuable addition to your web application. So go ahead, implement the Date Range Picker in your project, and give your users a seamless and intuitive date selection experience.