diff --git a/calendar.css b/calendar.css index d2377a6..aec8caf 100644 --- a/calendar.css +++ b/calendar.css @@ -1,16 +1,22 @@ +/* Default CSS for calendar.js, version: 2015-05-03 */ .calendar-box { - display:none; - background:#fff; - position:absolute; - padding:5px; - z-index:100; - box-shadow:0 0 4px #aaa; + display: none; + background: #fff; + position: absolute; + padding: 5px; + z-index: 100; + box-shadow: 0 0 4px #aaa; } -.calendar-box select.calendar-month { width:90px; margin-right: 10px; } -.calendar-box select.calendar-year { width:70px; } -.calendar-box .calendar-cancel { width:100%; } -.calendar-box table td { width:14%; text-align: center; } -.calendar-box .calendar-title { text-align:center; white-space: nowrap; } -.calendar-box a { text-decoration:none; } -.calendar-box .today { background-color:#ffe9c6; } -.calendar-box .selected { background-color:#c9ff8b; } +.calendar-box select.calendar-month { width: 9 0px; margin-right: 3px; } +.calendar-box select.calendar-year { width: 70px; } +.calendar-box .calendar-cancel { width: 100%; } +.calendar-box table td { width: 14%; text-align: center; } +.calendar-box a { text-decoration: none; display: block; padding: 5px; } +.calendar-box a:hover { background: #e8ffd0; } +.calendar-box tr.header td { font-weight: bold; padding: 5px; } +.calendar-box td { background: #f4f6f8; } +.calendar-box td.future { color: #606060; } +.calendar-box .today { background-color: #ffe9c6; } +.calendar-box .selected { background-color: #c9ff8b; } +.calendar-box .calendar-title { text-align: center; white-space: nowrap; } +.calendar-box .calendar-title a { display: inline-block; padding: 3px 7px; border: 1px solid #d0d2d4; background: #eef0f2; } diff --git a/calendar.js b/calendar.js index c849905..c92419e 100644 --- a/calendar.js +++ b/calendar.js @@ -5,6 +5,7 @@ * Original: http://www.openjs.com/scripts/ui/calendar/ * Modified: http://svn.yourcmc.ru/viewvc.py/vitaphoto/js/{util.js,calendar.js,calendar.css} * (uses addListener() and getOffset() from util.js) + * Version: 2015-05-03 * License: MIT-like, http://www.openjs.com/license.php * * Example: @@ -14,14 +15,21 @@ * */ var Calendar = { - month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июлья","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], + // Configuration: + month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], + close_label: 'Закрыть', weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"], sunday: 6, - month_days: [31,28,31,30,31,30,31,31,30,31,30,31], - years: {min: -70, max: 10}, - // Get today's date - year, month, day and date - today: new Date(), + selectboxes: false, // true: use selectboxes for year and month, false: show months and years in table + years: {min: -70, max: 10}, // range of displayed years if selectboxes==true format: 'd.m.Y', // either d.m.Y or Y-m-d, other formats are not supported + + // State variables: + month_days: [31,28,31,30,31,30,31,31,30,31,30,31], + // Today's date + today: new Date(), + // Selected date + selected: new Date(), opt: {}, data: [], addedListener: false, @@ -31,6 +39,11 @@ var Calendar = { wrt:function(txt) { this.data.push(txt); }, + fin:function() { + this.wrt(""); + document.getElementById(this.opt['calendar']).innerHTML = this.data.join(""); + this.data = []; + }, /// Called when the user clicks on a date in the calendar. selectDate:function(year,month,day) { @@ -43,47 +56,92 @@ var Calendar = { ths.hideCalendar(); }, - /// Creates a calendar with the date given in the argument as the selected date. - makeCalendar:function(year, month, day) { - year = parseInt(year); - month= parseInt(month); - day = parseInt(day); + showMonths:function(year, month) { + var cur_y = this.today.getFullYear(); + var cur_m = this.today.getMonth(); + var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1; + this.wrt(""); + this.wrt(""); + this.wrt(""); + for (var i in this.month_names) { + if (i && !(i % 3)) + this.wrt(""); + var class_name = (year < cur_y || year == cur_y && i < cur_m ? 'past' : + (year > cur_y || year == cur_y && i > cur_m ? 'future' : 'today')) + + (i == sel_m ? ' selected' : ''); + this.wrt(""); + } + this.wrt(""); + this.wrt("
<"); + this.wrt(" "+year+""); + this.wrt(" >
"+this.month_names[i]+"
"); + this.fin(); + }, - //Display the table + showYears:function(year) { + var beg = year & ~15; + var cur_y = this.today.getFullYear(); + var sel_y = this.selected.getFullYear(); + this.wrt(""); + this.wrt(""); + this.wrt(""); + for (var i = 0; i < 16; i++) { + if (i && !(i % 4)) + this.wrt(""); + var class_name = (beg+i < cur_y ? 'past' : (beg+i > cur_y ? 'future' : 'today')) + + (beg+i == sel_y ? ' selected' : ''); + this.wrt(""); + } + this.wrt(""); + this.wrt("
"); + this.wrt(" <"); + this.wrt(" "+beg+" - "+(beg+15)+""); + this.wrt(" >"); + this.wrt("
"+(beg+i)+"
"); + this.fin(); + }, + + /// Creates a calendar with the date given in the argument as the selected date. + makeCalendar:function(year, month) { + // Display the table var next_month = month+1; var next_month_year = year; - if(next_month>=12) { + if (next_month >= 12) { next_month = 0; next_month_year++; } var previous_month = month-1; var previous_month_year = year; - if(previous_month<0) { + if (previous_month < 0) { previous_month = 11; previous_month_year--; } - this.wrt(""); - this.wrt("
<"); - this.wrt(" "); - this.wrt(""); + this.wrt(""); + this.wrt(" >"); this.wrt(""); for (var weekday = 0; weekday < 7; weekday++) this.wrt(""); @@ -97,32 +155,28 @@ var Calendar = { var flag = 0; // Leap year support - if (year % 4 == 0) + if (!(year % 4) && ((year % 100) || !(year % 400))) this.month_days[1] = 29; else this.month_days[1] = 28; var days_in_this_month = this.month_days[month]; - // Create the calender - var yea = this.today.getYear(); - if (yea < 1900) - yea += 1900; + // Create the calendar + var yea = this.today.getFullYear(); var all_diff = (year - yea) || (month - this.today.getMonth()); - for (var i = 0; i <= 5; i++) - { + var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1; + for (var i = 0; i <= 5; i++) { if (w >= days_in_this_month) break; this.wrt(""); - for (var j = 0; j < 7; j++) - { + for (var j = 0; j < 7; j++) { if (d > days_in_this_month) flag = 0; // If the days has overshooted the number of days in this month, stop writing else if (j >= start_day && !flag) flag = 1; // If the first day of this month has come, start the date writing - if (flag) - { + if (flag) { var w = d, mon = month+1; if (w < 10) w = "0" + w; @@ -140,7 +194,7 @@ var Calendar = { else class_name = ' future'; - if (day == d) + if (d == sel_day) class_name += ' selected'; class_name += " " + this.weekdays[j].toLowerCase(); @@ -149,17 +203,12 @@ var Calendar = { d++; } else - { this.wrt(""); - } } this.wrt(""); } this.wrt("
<"); + if (!this.selectboxes) { + this.wrt(" "+this.month_names[month]+""); + this.wrt(" "+year+""); + } else { + this.wrt(" "); + this.wrt(""); } - this.wrt(""); - this.wrt(" >
"+this.weekdays[weekday]+"
 
"); - this.wrt(""); - - document.getElementById(this.opt['calendar']).innerHTML = this.data.join(""); - this.data = []; + this.fin(); }, /// Display the calendar - if a date exists in the input box, that will be selected in the calendar. @@ -175,13 +224,13 @@ var Calendar = { div.style.top = (xy.top+height-1)+"px"; // Show the calendar with the date in the input as the selected date - var existing_date = new Date(); + this.selected = new Date(); var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time if(date_in_input) { // date format is HARDCODE var selected_date = false; var date_parts = date_in_input.split("-"); - if(date_parts.length == 3) { + if (date_parts.length == 3) { // Y-m-d date_parts[1]--; //Month starts with 0 selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]); @@ -193,19 +242,16 @@ var Calendar = { selected_date = new Date(date_parts[2], date_parts[1], date_parts[0]); } } - if(selected_date && !isNaN(selected_date.getYear())) { //Valid date. - existing_date = selected_date; + if (selected_date && !isNaN(selected_date.getFullYear())) { //Valid date. + this.selected = selected_date; } } - var the_year = existing_date.getYear(); - if(the_year < 1900) the_year += 1900; - this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate()); + this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth()); document.getElementById(this.opt['calendar']).style.display = "block"; _calendar_active_instance = this; - if (!Calendar.addedListener) - { + if (!Calendar.addedListener) { addListener(div, "mousedown", function(ev) { ev = ev || window.event; if (ev.stopPropagation)