This time I will share jQuery Plugin and tutorial about Create A Monthly Calendar For Date Picking – jQuery Osmanli Calendar, hope it will help you in programming stack.
Osmanli Calendar is a simple-to-use jQuery plugin to generate a clean-looking, HTML table based monthly calendar for data picking.
Easy to customize by adding your CSS styles to the table cells. Also provides a callback function that will be fired when you select a date.
How to use it:
1. Create an element to hold the current month/year.
1 |
< span class = "month-year" ></ span > |
2. Create an empty HTML table for the calendar.
01 |
< table class = "date_table" > |
3. Create navigation links to switch between months.
1 |
< span class = "prev-month" >Previous</ span > |
2 |
< span class = "next-month" >next</ span > |
4. Load the JavaScript file osmanli_calendar.js
after loading jQuery.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/osmanli_calendar.js" ></ script > |
5. Initialize the calendar and we’re ready to go.
1 |
var start_date_dialog = osmanli_calendar |
2 |
start_date_dialog.init(); |
6. Enable the navigation links.
1 |
$( '.prev-month' ).click( function () {start_date_dialog.pre_month()}); |
2 |
$( '.next-month' ).click( function () {start_date_dialog.next_month()}); |
7. Execute a function when you select a date.
1 |
start_date_dialog.ON_SELECT_FUNC = function (){ |
2 |
alert(osmanli_calendar.SELECT_DATE); |
8. Apply CSS styles to the calendar.
9. Customize the calendar with the following parameters:
02 |
CURRENT_DATE: new Date(), |
05 |
SELECT_DATE: new Date(), |
10 |
DAYS_DISABLE_MAX: 'OFF' , |
11 |
DAYS_DISABLE_MIN: 'OFF' , |
14 |
ON_SELECT_FUNC: "OFF" , |
17 |
content : 'January February March April May June July August September October November December' .split( ' ' ), |
18 |
weekDayName : 'SUN MON TUES WED THURS FRI' .split( ' ' ), |
19 |
daysOfMonth : [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], |
This awesome jQuery plugin is developed by abhaywani114. For more Advanced Usages, please check the demo page or visit the official website.