Update calendar
parent
8c726b6071
commit
5978ddb1ba
17
calendar.css
17
calendar.css
|
@ -1,17 +1,16 @@
|
|||
.calendar-box {
|
||||
display:none;
|
||||
background-color:#fff;
|
||||
border:1px solid #444;
|
||||
background:#fff;
|
||||
position:absolute;
|
||||
width:250px;
|
||||
padding:0 5px;
|
||||
padding:5px;
|
||||
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 .calendar-cancel { width:100%; }
|
||||
.calendar-box table td { width:14%; }
|
||||
.calendar-box .calendar-title { text-align:center; }
|
||||
.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 a { padding:0 5px; margin-left:-5px; background-color:#ffe9c6; }
|
||||
.calendar-box .selected a { padding:0 5px; margin-left:-5px; background-color:#c9ff8b; }
|
||||
.calendar-box .today { background-color:#ffe9c6; }
|
||||
.calendar-box .selected { background-color:#c9ff8b; }
|
||||
|
|
18
calendar.js
18
calendar.js
|
@ -18,9 +18,10 @@ var Calendar = {
|
|||
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(),
|
||||
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: {},
|
||||
data: [],
|
||||
addedListener: false,
|
||||
|
@ -64,8 +65,8 @@ var Calendar = {
|
|||
}
|
||||
|
||||
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("<th colspan='5' class='calendar-title'><select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
||||
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(" <select name='calendar-month' class='calendar-month' onChange='Calendar.makeCalendar("+year+",this.value);'>");
|
||||
for(var i in this.month_names) {
|
||||
this.wrt("<option value='"+i+"'");
|
||||
if(i == month) this.wrt(" selected='selected'");
|
||||
|
@ -76,13 +77,13 @@ var Calendar = {
|
|||
var current_year = this.today.getYear();
|
||||
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+"'")
|
||||
if(i == year) this.wrt(" selected='selected'");
|
||||
this.wrt(">"+i+"</option>");
|
||||
}
|
||||
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("</select>");
|
||||
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'>");
|
||||
for (var weekday = 0; weekday < 7; weekday++)
|
||||
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
||||
|
@ -169,8 +170,9 @@ var Calendar = {
|
|||
var div = document.getElementById(this.opt['calendar']);
|
||||
var xy = getOffset(input);
|
||||
var width = input.clientWidth||input.offsetWidth;
|
||||
div.style.left=(xy.left+width+10)+"px";
|
||||
div.style.top=xy.top+"px";
|
||||
var height = input.clientHeight||input.offsetHeight;
|
||||
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
|
||||
var existing_date = new Date();
|
||||
|
|
Loading…
Reference in New Issue