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

Easy Date Range Picker Plugin with jQuery and Moment.js - PAcalendar
File Size: 12.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:   '&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:

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.