Update calendar
parent
8c726b6071
commit
5978ddb1ba
17
calendar.css
17
calendar.css
|
@ -1,17 +1,16 @@
|
||||||
.calendar-box {
|
.calendar-box {
|
||||||
display:none;
|
display:none;
|
||||||
background-color:#fff;
|
background:#fff;
|
||||||
border:1px solid #444;
|
|
||||||
position:absolute;
|
position:absolute;
|
||||||
width:250px;
|
padding:5px;
|
||||||
padding:0 5px;
|
|
||||||
z-index:100;
|
z-index:100;
|
||||||
|
box-shadow:0 0 4px #aaa;
|
||||||
}
|
}
|
||||||
.calendar-box select.calendar-month { width:90px; }
|
.calendar-box select.calendar-month { width:90px; margin-right: 10px; }
|
||||||
.calendar-box select.calendar-year { width:70px; }
|
.calendar-box select.calendar-year { width:70px; }
|
||||||
.calendar-box .calendar-cancel { width:100%; }
|
.calendar-box .calendar-cancel { width:100%; }
|
||||||
.calendar-box table td { width:14%; }
|
.calendar-box table td { width:14%; text-align: center; }
|
||||||
.calendar-box .calendar-title { text-align:center; }
|
.calendar-box .calendar-title { text-align:center; white-space: nowrap; }
|
||||||
.calendar-box a { text-decoration:none; }
|
.calendar-box a { text-decoration:none; }
|
||||||
.calendar-box .today a { padding:0 5px; margin-left:-5px; background-color:#ffe9c6; }
|
.calendar-box .today { background-color:#ffe9c6; }
|
||||||
.calendar-box .selected a { padding:0 5px; margin-left:-5px; background-color:#c9ff8b; }
|
.calendar-box .selected { background-color:#c9ff8b; }
|
||||||
|
|
18
calendar.js
18
calendar.js
|
@ -18,9 +18,10 @@ var Calendar = {
|
||||||
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
||||||
sunday: 6,
|
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],
|
||||||
|
years: {min: -70, max: 10},
|
||||||
// Get today's date - year, month, day and date
|
// Get today's date - year, month, day and date
|
||||||
today: new Date(),
|
today: new Date(),
|
||||||
format: 'Y-m-d', // either d.m.Y or Y-m-d, other formats are not supported
|
format: 'd.m.Y', // either d.m.Y or Y-m-d, other formats are not supported
|
||||||
opt: {},
|
opt: {},
|
||||||
data: [],
|
data: [],
|
||||||
addedListener: false,
|
addedListener: false,
|
||||||
|
@ -64,8 +65,8 @@ var Calendar = {
|
||||||
}
|
}
|
||||||
|
|
||||||
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 colspan='7' class='calendar-title'><a href='javascript:Calendar.makeCalendar("+(previous_month_year)+","+(previous_month)+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"'><</a>");
|
||||||
this.wrt("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
this.wrt(" <select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
||||||
for(var i in this.month_names) {
|
for(var i in this.month_names) {
|
||||||
this.wrt("<option value='"+i+"'");
|
this.wrt("<option value='"+i+"'");
|
||||||
if(i == month) this.wrt(" selected='selected'");
|
if(i == month) this.wrt(" selected='selected'");
|
||||||
|
@ -76,13 +77,13 @@ var Calendar = {
|
||||||
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+this.years.min; i<current_year+this.years.max; 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'");
|
||||||
this.wrt(">"+i+"</option>");
|
this.wrt(">"+i+"</option>");
|
||||||
}
|
}
|
||||||
this.wrt("</select></th>");
|
this.wrt("</select>");
|
||||||
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(" <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++)
|
for (var weekday = 0; weekday < 7; weekday++)
|
||||||
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
||||||
|
@ -169,8 +170,9 @@ var Calendar = {
|
||||||
var div = document.getElementById(this.opt['calendar']);
|
var div = document.getElementById(this.opt['calendar']);
|
||||||
var xy = getOffset(input);
|
var xy = getOffset(input);
|
||||||
var width = input.clientWidth||input.offsetWidth;
|
var width = input.clientWidth||input.offsetWidth;
|
||||||
div.style.left=(xy.left+width+10)+"px";
|
var height = input.clientHeight||input.offsetHeight;
|
||||||
div.style.top=xy.top+"px";
|
div.style.left = (xy.left-1)+"px";
|
||||||
|
div.style.top = (xy.top+height-1)+"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();
|
||||||
|
|
Loading…
Reference in New Issue