Easy Date Range Picker Plugin with jQuery and Moment.js - PAcalendar
File Size: | 12.8 KB |
---|---|
Views Total: | 6117 |
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: '<', // 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.