Beautiful ES5/ES6 Date & Daterange Picker For jQuery

Yet another jQuery date picker plugin which creates single or multi-viewed calendars for easier date or date range selection. The plugin relies on Moment.js to parse, format and validate the datetime.

How to use it:

1. Include the necessary jQuery and Moment.js on the webpage.

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

2. Include the calendar.css in the head section.

<link href="calendar.css" rel="stylesheet">

3. Include the core JavaScript es5.js or es6.js after jQuery.

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

4. Call the function on the target input field to create a single date picker.

$('#singleDateRange').DatePicker({
  startDate: moment()
});

5. Initialize the plugin as a date range picker. You're able to set an array of predefined date ranges using the ranges option:

$('#rangedate').DatePicker({
  type: 'rangedate',
  startDate: moment().subtract(1, 'week'),
  endDate: moment(),
  ranges: [{
    label: "Yesterday",
    startDate: moment().subtract(1, 'day'),
    endDate: moment().subtract(1, 'day')
  }, {
    label: 'Sunday',
    startDate: moment().startOf('week'),
    endDate: moment()
  }, {
    label: '2 Weeks',
    startDate: moment().startOf('week').subtract(1, 'week'),
    endDate: moment()
  }, {
    label: 'This Month',
    startDate: moment().startOf('month'),
    endDate: moment()
  }, {
    label: 'Last Month',
    startDate: moment().startOf('month').subtract(1, 'month'),
    endDate: moment().startOf('month')
  }, {
    label: 'This Year',
    startDate: moment().startOf('year'),
    endDate: moment().startOf('moth')
  }]
});

6. Plugin's default options:

type: 'date', // or rangedate
startDate: moment(), 
endDate: moment(), 
locale: 'ru',
format: 'YYYY.MM.DD',
delimiter: '-', 
ranges: [],
firstDayOfWeek: 1,
modalMode: false,
minDate: null,
maxDate: null,
onShow: function onShow() {},
onHide: function onHide() {}

Change log:

2016-08-18

• Bugfix: Rendering selecting day between 1 and 9

2016-07-15

• FIX It doesn't work in IE

2016-07-15

• add max and min date options

2016-06-20

• fix z-index, translate modal, ranges eventand arrow fixes

2016-06-19

• add modal overlay, fix moment.js warning st active date, add destroy method

2016-06-18

• allows to close on ESC
• added modal mode and callbacks

---

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