Pretty jQuery Date Picker & Monthly Calendar Plugin

A really simple jQuery plugin to create a nice clean monthly calendar for easy & quick date selection.

Basic usage:

1. Load the jquery.datepicker plugin's files in your project which has jQuery library included.

<link href="css/jquery.datepicker.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.datepicker.js"></script>

2. Create a container element to place the monthly calendar.

<div class="demo"></div>

3. Initialize the plugin and enable the date picker

$my_datepicker = $('.demo');

$my_datepicker.datepicker({
  next_button: '>',
  prev_button: '<'
});

$my_datepicker.setStartDate({
  year: 2015,
  // jquery.datepicker accepts first month as 1
  // (built-in Date() class accepts first month as 0)
  month: 1,
  day: 3
});

4. Output the selected date to a specified container 'selected'.

var $selected = $('.selected');

$my_datepicker.on('date_selected.datepicker', function (event, date) {
  $selected.show().html('Selected date is: '+date.date.toString());
});

5. Localization. 

jQueryDatepicker.day_names_short = {
  1: 'Mon',
  2: 'Tue',
  3: 'Wed',
  4: 'Thu',
  5: 'Fri',
  6: 'Sat',
  7: 'Sun'
};

jQueryDatepicker.day_names = {
  1: 'Monday',
  2: 'Tuesday',
  3: 'Wednesday',
  4: 'Thursday',
  5: 'Friday',
  6: 'Saturday',
  7: 'Sunday'
};

jQueryDatepicker.month_names = {
  1: 'January',
  2: 'February',
  3: 'March',
  4: 'Apri',
  5: 'May',
  6: 'June',
  7: 'July',
  8: 'Agust',
  9: 'September',
  10: 'October',
  11: 'November',
  12: 'December'
};

Change log:

2017-10-16

• Release 1.2.3: Fixed for Safari (Mac)

2017-09-15

• Release 1.2.2 with some improvements

2017-03-26

• v1.2.1

2017-01-16

• JS improvements.

2015-07-04

• JS update.

---

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