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

File Size: 12.8 KB
Views Total: 6030
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

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">

5. Active the date range picker.


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

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

  mode: 'range'


6. All default options.

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

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

// 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:


  • Fix on ISO first day of the week


  • Optional trigger on setDateFrom and setDateTo


  • Trigger on setDate


  • Fix on active cells


  • Add rangeInterval and limits


  • Added events to manipulate calendar


  • Added events to manipulate calendar


  • 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.