Pretty jQuery Date Picker & Monthly Calendar Plugin
File Size: | 48 KB |
---|---|
Views Total: | 13629 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.