Add Date Range Picker to Input Field using jQuery

The Date Range Picker allows the user to select a range of dates. You can attach the Date Range Picker component to an HTML element to pop up two calendars to select a date range. The user can select a custom date range or predefined ranges (such as “Last 7 days”, “Last 30 days”, “This month”, “Last month”, etc.) from the Date Range Picker widget.

When Date Range Picker is attached to an input element, it creates a dropdown menu from which you can select date range and times. It very useful component when you need to allow the user to select a custom range of dates on the webpage. In this tutorial, we will show you how to add a Date Range Picker to the input field using jQuery.

Date Range Picker

We will use the Date-Range-Picker JavaScript library to add date range picker component to an HTML element.

First, include the required libraries to use the jQuery Date Range Picker plugin.

<!-- JS library -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/daterangepicker.min.js"></script>

<!-- CSS library -->
<link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />

Date Range Picker Basic Functionality

This example code adds a basic date range picker widget to the input field.

JavaScript Code:
The input field name/ID needs to be specified as date-range-picker selector.

$(function() {
  $('input[name="daterange"]').daterangepicker({
      opens: 'left'
  }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

HTML Code:
On the input field focus, two calendar widgets will open in an overlay.

<input type="text" name="daterange" value="01/01/2025 - 03/31/2025" />

Date Range Picker Advanced Functionality

The following examples are some advanced configuration options that can be used in jQuery Date Range Picker.

Date Range Picker with Times
Attach time picker to select times along with the date range.

$(function() {
  $('input[name="datetimes"]').daterangepicker({
      timePicker: true,
      startDate: moment().startOf('hour'),
      endDate: moment().startOf('hour').add(72, 'hour'),
      locale: {
          format: 'M/DD hh:mm A'
      }
  });
});

Predefined Date Ranges
The following example shows how to add predefined date range dropdown to select the date range automatically and put it in the input field.

Specify the ID of the HTML element.

$(function() {
  var start = moment().subtract(29, 'days');
  var end = moment();

  function cb(start, end) {
      $('#daterange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  }

  $('#daterange').daterangepicker({
      startDate: start,
      endDate: end,
      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')]
      }
  }, cb);

  cb(start, end);
});

Create an HTML element where the predefined date range dropdown will be embedded.

<div id="daterange"><span></span></div>

Date Range Picker Input Submission with PHP

In this example code, we will show you how to submit and get the selected date range values using PHP.

Date Range Picker Input:
Define an HTML form with an input element to submit the selected date range.

<input type="text" name="daterange" value="01/01/2025 - 03/31/2025" />

Attach date-range-picker to the text input field using jQuery.

$(function() {
  $('input[name="daterange"]').daterangepicker({
      opens: 'left'
  }, function(start, end, label) {
      console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});

Get Date Range value with PHP:
Retrieve date value from input field using $_POST method in PHP.

<?php 
if(isset($_POST['submit'])){ 
    $selected_date_range = $_POST['daterange']; 
     
    echo 'Selected Date Range: '.$selected_date_range; 
} 
?>