Flexible and Multi-Language jQuery Calendar & Datepicker Plugin - Ion.Calendar
File Size: | 57.1 KB |
---|---|
Views Total: | 14684 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Ion.Calendar is a jQuery plugin based on Moment.js that allows to create a Flexible and Multi-Language Calendar widget on your web page. It supports all the modern web browsers and touch devices like iPhone, iPad, etc.
Basic Usage:
1. Include jQuery Ion.Calendar stylesheet file on the page
<link href="css/ion.calendar.css" rel="stylesheet" type="text/css">
2. Create a container for the calendar
<div id="demo1"></div> <div id="result-1">...</div>
3. Create a input filed for the datepicker
<input type="text" value="" id="mydate" data-lang="en" data-years="2015-2035" data-format="YYYY-MM-DD" />
4. Include required javascript files on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/moment.min.js"></script> <script src="js/ion.calendar.js"></script>
5. Call the plugin with options
<script> $(function(){ $("#demo1").ionCalendar({ lang:"en", // set the language of the calendar. Each additional language requires its own localization file years:"1915-1995", // Specifies the years range sundayFirst: false, onClick:function(date){ // Callback function. $("#result-1").html("onClick:<br/>"+date); } }); $("#mydate").ionDatePicker(); }); </script>
6. Full options.
lang: "en", sundayFirst: true, years: "80", format: "", clickable: true, startDate: "", hideArrows: false, onClick: null, onReady: null
Change log:
v2.0.2 (2015-07-26)
- update.
This awesome jQuery plugin is developed by IonDen. For more Advanced Usages, please check the demo page or visit the official website.