From 5e7ae920d26e4d1a30cd3ed05e1c26af5d5795c8 Mon Sep 17 00:00:00 2001 From: vitalif Date: Fri, 13 Mar 2015 13:31:39 +0000 Subject: [PATCH] Update calendar.js --- calendar.js | 182 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 110 insertions(+), 72 deletions(-) diff --git a/calendar.js b/calendar.js index ab0c804..3742bec 100644 --- a/calendar.js +++ b/calendar.js @@ -1,46 +1,36 @@ /** - * Calendar Script, slightly modified + * Calendar Script * Creates a calendar widget which can be used to select the date more easily than using just a text box - * http://www.openjs.com/scripts/ui/calendar/ + * + * 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) + * License: MIT-like, http://www.openjs.com/license.php * * Example: * * */ var Calendar = { - month_names: ["January","February","March","April","May","June","July","Augest","September","October","November","December"], - weekdays: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"], - sunday: 0, + month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июлья","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"], + weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"], + sunday: 6, month_days: [31,28,31,30,31,30,31,31,30,31,30,31], - //Get today's date - year, month, day and date - today : new Date(), - opt : {}, + // Get today's date - year, month, day and date + today: new Date(), + format: 'Y-m-d', // either d.m.Y or Y-m-d, other formats are not supported + opt: {}, data: [], + addedListener: false, //Functions /// Used to create HTML in a optimized way. wrt:function(txt) { this.data.push(txt); }, - - getPosition:function(ele) { - var x = 0; - var y = 0; - while (ele) { - x += ele.offsetLeft; - y += ele.offsetTop; - ele = ele.offsetParent; - } - if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") { - x += document.body.leftMargin; - offsetTop += document.body.topMargin; - } - - var xy = new Array(x,y); - return xy; - }, + /// Called when the user clicks on a date in the calendar. selectDate:function(year,month,day) { var ths = _calendar_active_instance; @@ -48,15 +38,16 @@ var Calendar = { var t = i.value.split(/\s+/, 2)[1]||''; if (t) t = ' '+t; - i.value = year + "-" + month + "-" + day + t; // Date format is :HARDCODE: + i.value = (ths.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t; 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); - + //Display the table var next_month = month+1; var next_month_year = year; @@ -64,14 +55,14 @@ var Calendar = { next_month = 0; next_month_year++; } - + var previous_month = month-1; var previous_month_year = year; if(previous_month<0) { previous_month = 11; previous_month_year--; } - + this.wrt(""); this.wrt(""); this.wrt(""); this.wrt(""); this.wrt(""); - for(var weekday=0; weekday<7; weekday++) this.wrt(""); + for (var weekday = 0; weekday < 7; weekday++) + this.wrt(""); this.wrt(""); - - //Get the first day of this month + + // Get the first day of this month var first_day = new Date(year,month,1); var start_day = (first_day.getDay()+Calendar.sunday)%7; - + var d = 1; var flag = 0; - - //Leap year support - if(year % 4 == 0) this.month_days[1] = 29; - else this.month_days[1] = 28; - + + // Leap year support + if (year % 4 == 0) + this.month_days[1] = 29; + else + this.month_days[1] = 28; + var days_in_this_month = this.month_days[month]; - //Create the calender - for(var i=0;i<=5;i++) { - if(w >= days_in_this_month) break; + // Create the calender + var yea = this.today.getYear(); + if (yea < 1900) + yea += 1900; + var all_diff = (year - yea) || (month - this.today.getMonth()); + for (var i = 0; i <= 5; i++) + { + if (w >= days_in_this_month) + break; this.wrt(""); - 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 + 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; - if(mon < 10)mon = "0" + mon; + if (w < 10) + w = "0" + w; + if (mon < 10) + mon = "0" + mon; - //Is it today? + // Is it today? var class_name = ''; - var yea = this.today.getYear(); - if(yea < 1900) yea += 1900; - if(yea == year && this.today.getMonth() == month && this.today.getDate() == d) class_name = " today"; - if(day == d) class_name += " selected"; - + var diff = all_diff || (d - this.today.getDate()); + if (diff < 0) + class_name = ' past'; + else if (!diff) + class_name = ' today'; + else + class_name = ' future'; + + if (day == d) + class_name += ' selected'; + class_name += " " + this.weekdays[j].toLowerCase(); this.wrt(""); d++; - } else { + } + else + { this.wrt(""); } } this.wrt(""); } this.wrt("
<"); var current_year = this.today.getYear(); if(current_year < 1900) current_year += 1900; - + for(var i=current_year-70; i>
"+this.weekdays[weekday]+""+this.weekdays[weekday]+"
"+w+" 
"); - this.wrt(""); + this.wrt(""); document.getElementById(this.opt['calendar']).innerHTML = this.data.join(""); this.data = []; }, - + /// Display the calendar - if a date exists in the input box, that will be selected in the calendar. showCalendar: function() { var input = document.getElementById(this.opt['input']); - + //Position the div in the correct location... var div = document.getElementById(this.opt['calendar']); - var xy = this.getPosition(input); + var xy = getOffset(input); var width = input.clientWidth||input.offsetWidth; - div.style.left=(xy[0]+width+10)+"px"; - div.style.top=xy[1]+"px"; + div.style.left=(xy.left+width+10)+"px"; + div.style.top=xy.top+"px"; // Show the calendar with the date in the input as the selected date var existing_date = 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) { + // Y-m-d date_parts[1]--; //Month starts with 0 selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]); + } else if (date_parts.length == 1) { + date_parts = date_in_input.split('.'); + if (date_parts.length == 3) { + // d.m.Y + date_parts[1]--; //Month starts with 0 + 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; } } - + var the_year = existing_date.getYear(); if(the_year < 1900) the_year += 1900; this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate()); document.getElementById(this.opt['calendar']).style.display = "block"; _calendar_active_instance = this; + + if (!Calendar.addedListener) + { + addListener(div, "mousedown", function(ev) { + ev = ev || window.event; + if (ev.stopPropagation) + ev.stopPropagation(); + else + ev.cancelBubble = true; + return true; + }); + addListener(document, "mousedown", function() { Calendar.hideCalendar(); }); + Calendar.addedListener = true; + } }, - + /// Hides the currently show calendar. hideCalendar: function(instance) { var active_calendar_id = ""; if(instance) active_calendar_id = instance.opt['calendar']; + else if(!_calendar_active_instance) return; else active_calendar_id = _calendar_active_instance.opt['calendar']; - + if(active_calendar_id) document.getElementById(active_calendar_id).style.display = "none"; - _calendar_active_instance = {}; + _calendar_active_instance = null; }, - + /// Setup a text input box to be a calendar box. set: function(input_id) { var input = document.getElementById(input_id); if(!input) return; //If the input field is not there, exit. - + if(!this.opt['calendar']) this.init(); - + var ths = this; - input.onclick=function(){ + addListener(input, 'focus', function(ev) { ths.opt['input'] = this.id; ths.showCalendar(); - }; + }); }, - + /// Will be called once when the first input is set. init: function() { if(!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {