Awesome Date Range Picker Plugin with jQuery and Bootstrap

File Size: 7.02 KB
Views Total: 5147
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Awesome Date Range Picker Plugin with jQuery and Bootstrap

An awesome jQuery & Bootstrap powered date picker plugin which allows to select a date range from two auto-tabbing date inputs.

How to use it:

1. Include the required Bootstrap's stylesheet and the jQuery Aeud Datepicker's CSS in the head section of the document.

<link href="//" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">

2. Include jQuery library and the jQuery Aeud Datepicker's script at the bottom so the pages load faster.

<script src="//"></script>
<script src="js/datepicker.js"></script>

3. Create the start & end date input fields for the date range picker.

<div class="form-group"> <span class="form-control" id="fromDisplay" name="from">Start date</span>
  <input type="hidden" name="from" value="" id="fromInput">
  <div class="vf-datepicker" id="startDP"></div>

<div class="form-group"> <span class="form-control" id="toDisplay">End date</span>
  <input type="hidden" name="to" value="" id="toInput">
  <div class="vf-datepicker" id="endDP"></div>

4. The Javascript to active & customize the date range picker.

var now = new Date();
var ny = now.getFullYear();
var nm = now.getMonth();

VF_datepicker.datepicker(ny, nm, {
  'monthNames': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  'dayNames': ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
  'from_chosen': function(from){
  'to_chosen': function(from, to){
  'startCtrl': $('#fromDisplay'),
  'endCtrl': $('#toDisplay'),
  'startDisplay': $('#fromDisplay'),
  'endDisplay': $('#toDisplay'),
  'startInput': $('#fromInput'),
  'endInput': $('#toInput'),
  'startDP': $('#startDP'),
  'endDP': $('#endDP'),
}, function(from, to){
  //alert([from, to]);


  if (VF_datepicker.from) {;  
  } else {;

Change log:


  • Solve an issue with the next-prev buttons

This awesome jQuery plugin is developed by aeud. For more Advanced Usages, please check the demo page or visit the official website.