Update calendar.js
parent
4f9f5c4f78
commit
5e7ae920d2
182
calendar.js
182
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
|
* 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:
|
* Example:
|
||||||
* <input type="text" name="date" id="date" />
|
* <input type="text" name="date" id="date" />
|
||||||
* <script type="text/javascript">
|
* <script type="text/javascript">
|
||||||
* Calendar.set("date");
|
* Calendar.set("date");
|
||||||
* </script>
|
* </script>
|
||||||
*/
|
*/
|
||||||
var Calendar = {
|
var Calendar = {
|
||||||
month_names: ["January","February","March","April","May","June","July","Augest","September","October","November","December"],
|
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июлья","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
||||||
weekdays: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
|
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
||||||
sunday: 0,
|
sunday: 6,
|
||||||
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
|
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
|
||||||
//Get today's date - year, month, day and date
|
// Get today's date - year, month, day and date
|
||||||
today : new Date(),
|
today: new Date(),
|
||||||
opt : {},
|
format: 'Y-m-d', // either d.m.Y or Y-m-d, other formats are not supported
|
||||||
|
opt: {},
|
||||||
data: [],
|
data: [],
|
||||||
|
addedListener: false,
|
||||||
|
|
||||||
//Functions
|
//Functions
|
||||||
/// Used to create HTML in a optimized way.
|
/// Used to create HTML in a optimized way.
|
||||||
wrt:function(txt) {
|
wrt:function(txt) {
|
||||||
this.data.push(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.
|
/// Called when the user clicks on a date in the calendar.
|
||||||
selectDate:function(year,month,day) {
|
selectDate:function(year,month,day) {
|
||||||
var ths = _calendar_active_instance;
|
var ths = _calendar_active_instance;
|
||||||
|
@ -48,15 +38,16 @@ var Calendar = {
|
||||||
var t = i.value.split(/\s+/, 2)[1]||'';
|
var t = i.value.split(/\s+/, 2)[1]||'';
|
||||||
if (t)
|
if (t)
|
||||||
t = ' '+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();
|
ths.hideCalendar();
|
||||||
},
|
},
|
||||||
|
|
||||||
/// Creates a calendar with the date given in the argument as the selected date.
|
/// Creates a calendar with the date given in the argument as the selected date.
|
||||||
makeCalendar:function(year, month, day) {
|
makeCalendar:function(year, month, day) {
|
||||||
year = parseInt(year);
|
year = parseInt(year);
|
||||||
month= parseInt(month);
|
month= parseInt(month);
|
||||||
day = parseInt(day);
|
day = parseInt(day);
|
||||||
|
|
||||||
//Display the table
|
//Display the table
|
||||||
var next_month = month+1;
|
var next_month = month+1;
|
||||||
var next_month_year = year;
|
var next_month_year = year;
|
||||||
|
@ -64,14 +55,14 @@ var Calendar = {
|
||||||
next_month = 0;
|
next_month = 0;
|
||||||
next_month_year++;
|
next_month_year++;
|
||||||
}
|
}
|
||||||
|
|
||||||
var previous_month = month-1;
|
var previous_month = month-1;
|
||||||
var previous_month_year = year;
|
var previous_month_year = year;
|
||||||
if(previous_month<0) {
|
if(previous_month<0) {
|
||||||
previous_month = 11;
|
previous_month = 11;
|
||||||
previous_month_year--;
|
previous_month_year--;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.wrt("<table>");
|
this.wrt("<table>");
|
||||||
this.wrt("<tr><th><a href='javascript:Calendar.makeCalendar("+(previous_month_year)+","+(previous_month)+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'><</a></th>");
|
this.wrt("<tr><th><a href='javascript:Calendar.makeCalendar("+(previous_month_year)+","+(previous_month)+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'><</a></th>");
|
||||||
this.wrt("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
this.wrt("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
||||||
|
@ -84,7 +75,7 @@ var Calendar = {
|
||||||
this.wrt("<select name='calendar-year' class='calendar-year' onChange='Calendar.makeCalendar(this.value, "+month+");'>");
|
this.wrt("<select name='calendar-year' class='calendar-year' onChange='Calendar.makeCalendar(this.value, "+month+");'>");
|
||||||
var current_year = this.today.getYear();
|
var current_year = this.today.getYear();
|
||||||
if(current_year < 1900) current_year += 1900;
|
if(current_year < 1900) current_year += 1900;
|
||||||
|
|
||||||
for(var i=current_year-70; i<current_year+10; i++) {
|
for(var i=current_year-70; i<current_year+10; i++) {
|
||||||
this.wrt("<option value='"+i+"'")
|
this.wrt("<option value='"+i+"'")
|
||||||
if(i == year) this.wrt(" selected='selected'");
|
if(i == year) this.wrt(" selected='selected'");
|
||||||
|
@ -93,117 +84,164 @@ var Calendar = {
|
||||||
this.wrt("</select></th>");
|
this.wrt("</select></th>");
|
||||||
this.wrt("<th><a href='javascript:Calendar.makeCalendar("+(next_month_year)+","+(next_month)+");' title='"+this.month_names[next_month]+" "+(next_month_year)+"'>></a></th></tr>");
|
this.wrt("<th><a href='javascript:Calendar.makeCalendar("+(next_month_year)+","+(next_month)+");' title='"+this.month_names[next_month]+" "+(next_month_year)+"'>></a></th></tr>");
|
||||||
this.wrt("<tr class='header'>");
|
this.wrt("<tr class='header'>");
|
||||||
for(var weekday=0; weekday<7; weekday++) this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
for (var weekday = 0; weekday < 7; weekday++)
|
||||||
|
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
||||||
this.wrt("</tr>");
|
this.wrt("</tr>");
|
||||||
|
|
||||||
//Get the first day of this month
|
// Get the first day of this month
|
||||||
var first_day = new Date(year,month,1);
|
var first_day = new Date(year,month,1);
|
||||||
var start_day = (first_day.getDay()+Calendar.sunday)%7;
|
var start_day = (first_day.getDay()+Calendar.sunday)%7;
|
||||||
|
|
||||||
var d = 1;
|
var d = 1;
|
||||||
var flag = 0;
|
var flag = 0;
|
||||||
|
|
||||||
//Leap year support
|
// Leap year support
|
||||||
if(year % 4 == 0) this.month_days[1] = 29;
|
if (year % 4 == 0)
|
||||||
else this.month_days[1] = 28;
|
this.month_days[1] = 29;
|
||||||
|
else
|
||||||
|
this.month_days[1] = 28;
|
||||||
|
|
||||||
var days_in_this_month = this.month_days[month];
|
var days_in_this_month = this.month_days[month];
|
||||||
|
|
||||||
//Create the calender
|
// Create the calender
|
||||||
for(var i=0;i<=5;i++) {
|
var yea = this.today.getYear();
|
||||||
if(w >= days_in_this_month) break;
|
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("<tr>");
|
this.wrt("<tr>");
|
||||||
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 (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;
|
var w = d, mon = month+1;
|
||||||
if(w < 10) w = "0" + w;
|
if (w < 10)
|
||||||
if(mon < 10)mon = "0" + mon;
|
w = "0" + w;
|
||||||
|
if (mon < 10)
|
||||||
|
mon = "0" + mon;
|
||||||
|
|
||||||
//Is it today?
|
// Is it today?
|
||||||
var class_name = '';
|
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";
|
var diff = all_diff || (d - this.today.getDate());
|
||||||
if(day == d) class_name += " selected";
|
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();
|
class_name += " " + this.weekdays[j].toLowerCase();
|
||||||
|
|
||||||
this.wrt("<td class='days"+class_name+"'><a href='javascript:Calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+w+"</a></td>");
|
this.wrt("<td class='days"+class_name+"'><a href='javascript:Calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+w+"</a></td>");
|
||||||
d++;
|
d++;
|
||||||
} else {
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
this.wrt("<td class='days'> </td>");
|
this.wrt("<td class='days'> </td>");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.wrt("</tr>");
|
this.wrt("</tr>");
|
||||||
}
|
}
|
||||||
this.wrt("</table>");
|
this.wrt("</table>");
|
||||||
this.wrt("<input type='button' value='Cancel' class='calendar-cancel' onclick='Calendar.hideCalendar();' />");
|
this.wrt("<input type='button' value='Закрыть' class='calendar-cancel' onclick='Calendar.hideCalendar();' />");
|
||||||
|
|
||||||
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
|
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
|
||||||
this.data = [];
|
this.data = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
|
/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
|
||||||
showCalendar: function() {
|
showCalendar: function() {
|
||||||
var input = document.getElementById(this.opt['input']);
|
var input = document.getElementById(this.opt['input']);
|
||||||
|
|
||||||
//Position the div in the correct location...
|
//Position the div in the correct location...
|
||||||
var div = document.getElementById(this.opt['calendar']);
|
var div = document.getElementById(this.opt['calendar']);
|
||||||
var xy = this.getPosition(input);
|
var xy = getOffset(input);
|
||||||
var width = input.clientWidth||input.offsetWidth;
|
var width = input.clientWidth||input.offsetWidth;
|
||||||
div.style.left=(xy[0]+width+10)+"px";
|
div.style.left=(xy.left+width+10)+"px";
|
||||||
div.style.top=xy[1]+"px";
|
div.style.top=xy.top+"px";
|
||||||
|
|
||||||
// Show the calendar with the date in the input as the selected date
|
// Show the calendar with the date in the input as the selected date
|
||||||
var existing_date = new Date();
|
var existing_date = new Date();
|
||||||
var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
|
var date_in_input = input.value.replace(/\s+.*$/, ''); //Remove time
|
||||||
if(date_in_input) {
|
if(date_in_input) {
|
||||||
|
// date format is HARDCODE
|
||||||
var selected_date = false;
|
var selected_date = false;
|
||||||
var date_parts = date_in_input.split("-");
|
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
|
date_parts[1]--; //Month starts with 0
|
||||||
selected_date = new Date(date_parts[0], date_parts[1], date_parts[2]);
|
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.
|
if(selected_date && !isNaN(selected_date.getYear())) { //Valid date.
|
||||||
existing_date = selected_date;
|
existing_date = selected_date;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var the_year = existing_date.getYear();
|
var the_year = existing_date.getYear();
|
||||||
if(the_year < 1900) the_year += 1900;
|
if(the_year < 1900) the_year += 1900;
|
||||||
this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate());
|
this.makeCalendar(the_year, existing_date.getMonth(), existing_date.getDate());
|
||||||
document.getElementById(this.opt['calendar']).style.display = "block";
|
document.getElementById(this.opt['calendar']).style.display = "block";
|
||||||
_calendar_active_instance = this;
|
_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.
|
/// Hides the currently show calendar.
|
||||||
hideCalendar: function(instance) {
|
hideCalendar: function(instance) {
|
||||||
var active_calendar_id = "";
|
var active_calendar_id = "";
|
||||||
if(instance) active_calendar_id = instance.opt['calendar'];
|
if(instance) active_calendar_id = instance.opt['calendar'];
|
||||||
|
else if(!_calendar_active_instance) return;
|
||||||
else active_calendar_id = _calendar_active_instance.opt['calendar'];
|
else active_calendar_id = _calendar_active_instance.opt['calendar'];
|
||||||
|
|
||||||
if(active_calendar_id) document.getElementById(active_calendar_id).style.display = "none";
|
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.
|
/// Setup a text input box to be a calendar box.
|
||||||
set: function(input_id) {
|
set: function(input_id) {
|
||||||
var input = document.getElementById(input_id);
|
var input = document.getElementById(input_id);
|
||||||
if(!input) return; //If the input field is not there, exit.
|
if(!input) return; //If the input field is not there, exit.
|
||||||
|
|
||||||
if(!this.opt['calendar']) this.init();
|
if(!this.opt['calendar']) this.init();
|
||||||
|
|
||||||
var ths = this;
|
var ths = this;
|
||||||
input.onclick=function(){
|
addListener(input, 'focus', function(ev) {
|
||||||
ths.opt['input'] = this.id;
|
ths.opt['input'] = this.id;
|
||||||
ths.showCalendar();
|
ths.showCalendar();
|
||||||
};
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/// Will be called once when the first input is set.
|
/// Will be called once when the first input is set.
|
||||||
init: function() {
|
init: function() {
|
||||||
if(!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {
|
if(!this.opt['calendar'] || !document.getElementById(this.opt['calendar'])) {
|
||||||
|
|
Loading…
Reference in New Issue