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(" "+year+" ");
+ 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.month_names[i]+" ");
+ }
+ this.wrt(" ");
+ this.wrt("
");
+ 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(" < ");
+ this.wrt(" "+beg+" - "+(beg+15)+" ");
+ 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(""+(beg+i)+" ");
+ }
+ this.wrt(" ");
+ this.wrt("
");
+ 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(" ");
- for(var i in this.month_names) {
- this.wrt(""+this.month_names[i]+" ");
- }
- this.wrt(" ");
- this.wrt("");
- var current_year = this.today.getYear();
- if(current_year < 1900) current_year += 1900;
+ var current_year = this.today.getFullYear();
- for(var i=current_year+this.years.min; i"+i+"");
+ this.wrt("");
+ this.wrt("< ");
+ if (!this.selectboxes) {
+ this.wrt(" "+this.month_names[month]+" ");
+ this.wrt(" "+year+" ");
+ } else {
+ this.wrt(" ");
+ for (var i in this.month_names) {
+ this.wrt(""+this.month_names[i]+" ");
+ }
+ this.wrt(" ");
+ this.wrt("");
+ for (var i = current_year+this.years.min; i < current_year+this.years.max; i++) {
+ this.wrt(""+i+" ");
+ }
+ this.wrt(" ");
}
- this.wrt("");
- this.wrt(" > ");
+ this.wrt(" > ");
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("
");
- 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)