commit 371f03040be945364dfeeb08b02f52cbf2af7859 Author: vitalif Date: Tue Jul 19 12:39:50 2011 +0000 Calendar js diff --git a/calendar.css b/calendar.css new file mode 100644 index 0000000..37adf21 --- /dev/null +++ b/calendar.css @@ -0,0 +1,16 @@ +.calendar-box { + display:none; + background-color:#fff; + border:1px solid #444; + position:absolute; + width:250px; + padding:0 5px; +} +.calendar-box select.calendar-month { width:90px; } +.calendar-box select.calendar-year { width:70px; } +.calendar-box .calendar-cancel { width:100%; } +.calendar-box table td { width:14%; } +.calendar-box .calendar-title { text-align:center; } +.calendar-box a { text-decoration:none; } +.calendar-box .today a { padding:0 5px; margin-left:-5px; background-color:#ffe9c6; } +.calendar-box .selected a { padding:0 5px; margin-left:-5px; background-color:#c9ff8b; } diff --git a/calendar.js b/calendar.js new file mode 100644 index 0000000..ba8c7dc --- /dev/null +++ b/calendar.js @@ -0,0 +1,218 @@ +/** + * Calendar Script, slightly modified + * 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/ + * + * 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"], + 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 : {}, + data: [], + + //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; + var i = document.getElementById(ths.opt["input"]); + var t = i.value.split(/\s+/, 2)[1]||''; + if (t) + t = ' '+t; + i.value = year + "-" + month + "-" + day + t; // Date format is :HARDCODE: + 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; + if(next_month>=12) { + 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(""); + this.wrt(""); + + //Get the first day of this month + var first_day = new Date(year,month,1); + var start_day = first_day.getDay(); + + var d = 1; + var flag = 0; + + //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; + 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 + + if(flag) { + var w = d, mon = month+1; + if(w < 10) w = "0" + w; + if(mon < 10)mon = "0" + mon; + + //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"; + + class_name += " " + this.weekdays[j].toLowerCase(); + + this.wrt(""); + d++; + } else { + this.wrt(""); + } + } + this.wrt(""); + } + this.wrt("
<"); + this.wrt(">
"+this.weekdays[weekday]+"
"+w+" 
"); + 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 width = input.clientWidth||input.offsetWidth; + div.style.left=(xy[0]+width+10)+"px"; + div.style.top=xy[1]+"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) { + var selected_date = false; + var date_parts = date_in_input.split("-"); + if(date_parts.length == 3) { + date_parts[1]--; //Month starts with 0 + selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]); + } + 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; + }, + + /// Hides the currently show calendar. + hideCalendar: function(instance) { + var active_calendar_id = ""; + if(instance) active_calendar_id = instance.opt['calendar']; + else active_calendar_id = _calendar_active_instance.opt['calendar']; + + if(active_calendar_id) document.getElementById(active_calendar_id).style.display = "none"; + _calendar_active_instance = {}; + }, + + /// 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(){ + 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'])) { + var div = document.createElement('div'); + if(!this.opt['calendar']) this.opt['calendar'] = 'calender_div_'+ Math.round(Math.random() * 100); + + div.setAttribute('id',this.opt['calendar']); + div.className="calendar-box"; + + document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild); + } + } +}