Easy Date Range Picker Plugin with jQuery and Moment.js - PAcalendar

PAcalendar is a lightweight jQuery date picker plugin based on moment.js that helps you create a navigatable monthly calendar for quick and easy date & date range selection.

How to use it:

1. The plugin requires jQuery library and moment.js installed properly in your document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment.min.js"></script>

2. Load the jQuery PAcalendar plugin's JS and CSS files in the document. Be sure to load the PAcalendar.min.js script after jQuery library.

<link rel="stylesheet" href="dist/css/PAcalendar.min.css">
  ...
<script src="dist/js/PAcalendar.min.js"></script>

3. Create an empty container for the calendar.

<div id="demo">
</div>

4. Create two text fields for the date range picker.

<div class="dates">
  
  <label for="from">From</label>
  <input type="text" id="from" value="2015-09-01">
  
  <label for="to">To</label>
  <input type="text" id="to" value="2015-09-30">
  
</div>

5. Active the date range picker.

$('#demo').PACalendar({

  from: {
    element: $('#from')
  }, 

  to: {
    element: $('#to')
  }, 

  mode: 'range'

});

6. All default options.

// text & html markup for prev arrow
prevArrow:   '<', 

// text & html markup for next arrow
nextArrow:   '>', 

// from ...
from: {
  date: moment().format('YYYY-MM-DD'),
  element: null
}, 

// to ...
to: {
  date: null,
  element: null
}, 

// 'date' = single date picker
// 'range' = date range picker
mode: 'date',

// work only for range mode, priority to "from" date
rangeInterval: null, 
limit_to: null,
limit_from: null,
locale: moment.locale(),
format: 'YYYY-MM-DD'

Change log:

2016-05-09

• Fix on ISO first day of the week

2016-05-04

• Optional trigger on setDateFrom and setDateTo

2016-04-24

• Trigger on setDate

2016-04-16

• Fix on active cells

2016-04-15

• Add rangeInterval and limits

2016-03-29

• Added events to manipulate calendar

2016-03-24

• Added events to manipulate calendar

2015-10-14

• Trigger on data set

---

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