Slightly more refactoring (allow options), add select styles to material css
parent
e6497a0712
commit
3f3525efd3
|
@ -9,160 +9,181 @@
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22)
|
box-shadow: 0 19px 60px rgba(0, 0, 0, .3), 0 15px 20px rgba(0, 0, 0, .22)
|
||||||
}
|
}
|
||||||
|
.calendar-box select {
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-family: Roboto, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 500;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-outline: 0;
|
||||||
|
-moz-outline: 0;
|
||||||
|
outline: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: white;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
|
}
|
||||||
|
.calendar-box select:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
.calendar-box select:-moz-focusring {
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 0 white;
|
||||||
|
}
|
||||||
.calendar-box select.calendar-month {
|
.calendar-box select.calendar-month {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
}
|
}
|
||||||
.calendar-box select.calendar-year {
|
.calendar-box select.calendar-year {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
.calendar-box .calendar-cancel {
|
.calendar-box .calendar-cancel {
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
border: 0;
|
border: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
float: right;
|
float: right;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
}
|
}
|
||||||
.calendar-box .calendar-cancel:hover {
|
.calendar-box .calendar-cancel:hover {
|
||||||
background: rgba(0, 0, 0, 0.14);
|
background: rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
.calendar-box table {
|
.calendar-box table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
.calendar-box td.months, .calendar-box td.years {
|
.calendar-box td.months, .calendar-box td.years {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.calendar-box td.months a, .calendar-box td.years a {
|
.calendar-box td.months a, .calendar-box td.years a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
display: block;
|
display: block;
|
||||||
padding-right: 1px;
|
padding-right: 1px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #777;
|
color: #777;
|
||||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
}
|
}
|
||||||
.calendar-box td.days {
|
.calendar-box td.days {
|
||||||
width: 43px;
|
width: 43px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.calendar-box td.days a {
|
.calendar-box td.days a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
height: 37px;
|
height: 37px;
|
||||||
width: 37px;
|
width: 37px;
|
||||||
display: block;
|
display: block;
|
||||||
padding-right: 1px;
|
padding-right: 1px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: #777;
|
color: #777;
|
||||||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
}
|
}
|
||||||
.calendar-box td a:hover {
|
.calendar-box td a:hover {
|
||||||
background: rgba(3, 169, 244, 0.3);
|
background: rgba(3, 169, 244, 0.3);
|
||||||
}
|
}
|
||||||
.calendar-box td.selected a {
|
.calendar-box td.selected a {
|
||||||
background: rgb(3, 169, 244);
|
background: rgb(3, 169, 244);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.calendar-box td.days.today a {
|
.calendar-box td.days.today a {
|
||||||
border: 1px solid rgb(3, 169, 244);
|
border: 1px solid rgb(3, 169, 244);
|
||||||
}
|
}
|
||||||
.calendar-box td.days.today a:hover {
|
.calendar-box td.days.today a:hover {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
.calendar-box tr.header td {
|
.calendar-box tr.header td {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
width: 43px;
|
width: 43px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.calendar-box td { background: #f4f6f8; }
|
.calendar-box td { background: #f4f6f8; }
|
||||||
.calendar-box td.future { color: #606060; }
|
.calendar-box td.future { color: #606060; }
|
||||||
.calendar-box .calendar-title {
|
.calendar-box .calendar-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
padding: 10px 56px;
|
padding: 10px 56px;
|
||||||
background: #03a9f4;
|
background: #03a9f4;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
color: white;
|
color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a {
|
.calendar-box .calendar-title a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a:hover {
|
.calendar-box .calendar-title a:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a.prev {
|
.calendar-box .calendar-title a.prev {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a.next {
|
.calendar-box .calendar-title a.next {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a.prev:after {
|
.calendar-box .calendar-title a.prev:after {
|
||||||
content: "chevron_left";
|
content: "chevron_left";
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a.next:after {
|
.calendar-box .calendar-title a.next:after {
|
||||||
content: "chevron_right";
|
content: "chevron_right";
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-box .calendar-title a.prev:after,
|
.calendar-box .calendar-title a.prev:after,
|
||||||
.calendar-box .calendar-title a.next:after {
|
.calendar-box .calendar-title a.next:after {
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Icons';
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
letter-spacing: normal;
|
letter-spacing: normal;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-feature-settings: 'liga';
|
font-feature-settings: 'liga';
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
/* Default CSS for calendar.js, version: 2015-05-03 */
|
/* Default CSS for calendar.js, version: 2018-03-14 */
|
||||||
.calendar-box {
|
.calendar-box {
|
||||||
display: none;
|
display: none;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
509
calendar.js
509
calendar.js
|
@ -3,9 +3,8 @@
|
||||||
* 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
|
||||||
*
|
*
|
||||||
* Original: 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}
|
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
|
||||||
* (uses addListener() and getOffset() from util.js)
|
* Version: 2018-03-14
|
||||||
* Version: 2017-05-03
|
|
||||||
* License: MIT-like, http://www.openjs.com/license.php
|
* License: MIT-like, http://www.openjs.com/license.php
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
|
@ -14,9 +13,12 @@
|
||||||
* Calendar.set("date");
|
* Calendar.set("date");
|
||||||
* </script>
|
* </script>
|
||||||
*/
|
*/
|
||||||
if (!window.Calendar) {
|
function Calendar()
|
||||||
window.Calendar = {
|
{
|
||||||
// Configuration:
|
}
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
Calendar.defaultOptions = {
|
||||||
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
||||||
close_label: 'Закрыть',
|
close_label: 'Закрыть',
|
||||||
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
||||||
|
@ -24,278 +26,281 @@ window.Calendar = {
|
||||||
selectboxes: false, // true: use selectboxes for year and month, false: show months and years in table
|
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
|
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
|
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],
|
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
|
||||||
// Today's date
|
// Today's date
|
||||||
today: new Date(),
|
today: new Date(),
|
||||||
// Selected date
|
};
|
||||||
selected: new Date(),
|
|
||||||
opt: {},
|
|
||||||
data: [],
|
|
||||||
addedListener: false,
|
|
||||||
|
|
||||||
//Functions
|
// State variables
|
||||||
/// Used to create HTML in a optimized way.
|
Calendar.instance = null;
|
||||||
wrt:function(txt) {
|
Calendar.box = null;
|
||||||
this.data.push(txt);
|
Calendar.addedListener = false;
|
||||||
},
|
|
||||||
fin:function() {
|
|
||||||
this.wrt("<a class='calendar-cancel' onclick='Calendar.hideCalendar();'>"+this.close_label+"</a>");
|
|
||||||
document.getElementById(this.opt['calendar']).innerHTML = this.data.join("");
|
|
||||||
this.data = [];
|
|
||||||
},
|
|
||||||
|
|
||||||
/// Called when the user clicks on a date in the calendar.
|
Calendar.prototype.setHTML = function(html)
|
||||||
selectDate:function(year,month,day) {
|
{
|
||||||
var i = this.opt["input"];
|
html += "<a class='calendar-cancel' onclick='Calendar.hideCalendar();'>"+this.close_label+"</a>";
|
||||||
var t = i.value.split(/\s+/, 2)[1]||'';
|
Calendar.box.innerHTML = html;
|
||||||
if (t)
|
};
|
||||||
t = ' '+t;
|
|
||||||
i.value = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
|
|
||||||
this.hideCalendar();
|
|
||||||
},
|
|
||||||
|
|
||||||
showMonths:function(year, month) {
|
/// Called when the user clicks on a date in the calendar.
|
||||||
var cur_y = this.today.getFullYear();
|
Calendar.prototype.selectDate = function(year, month, day)
|
||||||
var cur_m = this.today.getMonth();
|
{
|
||||||
var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
|
var i = this.input;
|
||||||
this.wrt("<table>");
|
var t = i.value.split(/\s+/, 2)[1]||'';
|
||||||
this.wrt("<tr><th colspan='4' class='calendar-title'><a href='javascript:Calendar.showMonths("+(year-1)+")' title='"+(year-1)+"' class='prev'></a>");
|
if (t)
|
||||||
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
|
t = ' '+t;
|
||||||
this.wrt(" <a href='javascript:Calendar.showMonths("+(year+1)+")' title='"+(year+1)+"' class='next'></a></th></tr>");
|
i.value = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
|
||||||
this.wrt("<tr>");
|
Calendar.hideCalendar();
|
||||||
|
};
|
||||||
|
|
||||||
|
Calendar.prototype.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;
|
||||||
|
var html = '';
|
||||||
|
html += "<table>";
|
||||||
|
html += "<tr><th colspan='4' class='calendar-title'><a href='javascript:Calendar.instance.showMonths("+(year-1)+")' title='"+(year-1)+"' class='prev'></a>";
|
||||||
|
html += " <a href='javascript:Calendar.instance.showYears("+year+")'>"+year+"</a>";
|
||||||
|
html += " <a href='javascript:Calendar.instance.showMonths("+(year+1)+")' title='"+(year+1)+"' class='next'></a></th></tr>";
|
||||||
|
html += "<tr>";
|
||||||
|
for (var i in this.month_names) {
|
||||||
|
if (i && !(i % 3))
|
||||||
|
html += "</tr><tr>";
|
||||||
|
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' : '');
|
||||||
|
html += "<td class='months "+class_name+"'><a href='javascript:Calendar.instance.makeCalendar("+year+","+i+")'>"+this.month_names[i]+"</a></td>";
|
||||||
|
}
|
||||||
|
html += "</tr>";
|
||||||
|
html += "</table>";
|
||||||
|
this.setHTML(html);
|
||||||
|
};
|
||||||
|
|
||||||
|
Calendar.prototype.showYears = function(year)
|
||||||
|
{
|
||||||
|
var beg = year & ~15;
|
||||||
|
var cur_y = this.today.getFullYear();
|
||||||
|
var sel_y = this.selected.getFullYear();
|
||||||
|
var html = '';
|
||||||
|
html += "<table>";
|
||||||
|
html += "<tr><th colspan='4' class='calendar-title'>";
|
||||||
|
html += " <a href='javascript:Calendar.instance.showYears("+(year-16)+");' title='"+(beg-16)+" - "+(beg-1)+"' class='prev'></a>";
|
||||||
|
html += " <b>"+beg+" - "+(beg+15)+"</b>";
|
||||||
|
html += " <a href='javascript:Calendar.instance.showYears("+(year+16)+");' title='"+(beg+16)+" - "+(beg+31)+"' class='next'></a>";
|
||||||
|
html += "</th></tr>";
|
||||||
|
html += "<tr>";
|
||||||
|
for (var i = 0; i < 16; i++) {
|
||||||
|
if (i && !(i % 4))
|
||||||
|
html += "</tr><tr>";
|
||||||
|
var class_name = (beg+i < cur_y ? 'past' : (beg+i > cur_y ? 'future' : 'today'))
|
||||||
|
+ (beg+i == sel_y ? ' selected' : '');
|
||||||
|
html += "<td class='years "+class_name+"'><a href='javascript:Calendar.instance.showMonths("+(beg+i)+")'>"+(beg+i)+"</a></td>";
|
||||||
|
}
|
||||||
|
html += "</tr>";
|
||||||
|
html += "</table>";
|
||||||
|
this.setHTML(html);
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Creates a calendar with the date given in the argument as the selected date.
|
||||||
|
Calendar.prototype.makeCalendar = function(year, month)
|
||||||
|
{
|
||||||
|
// 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--;
|
||||||
|
}
|
||||||
|
|
||||||
|
var current_year = this.today.getFullYear();
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
html += "<table>";
|
||||||
|
html += "<tr><th colspan='7' class='calendar-title'><a href='javascript:Calendar.instance.makeCalendar("+previous_month_year+","+previous_month+");' title='"+this.month_names[previous_month]+" "+(previous_month_year)+"' class='prev'></a>";
|
||||||
|
if (!this.selectboxes) {
|
||||||
|
html += " <a href='javascript:Calendar.instance.showMonths("+year+", "+month+")'>"+this.month_names[month]+"</a>";
|
||||||
|
html += " <a href='javascript:Calendar.instance.showYears("+year+")'>"+year+"</a>";
|
||||||
|
} else {
|
||||||
|
html += " <select name='calendar-month' class='calendar-month' onChange='Calendar.instance.makeCalendar("+year+",this.value);'>";
|
||||||
for (var i in this.month_names) {
|
for (var i in this.month_names) {
|
||||||
if (i && !(i % 3))
|
html += "<option value='"+i+"'";
|
||||||
this.wrt("</tr><tr>");
|
if (i == month) html += " selected='selected'";
|
||||||
var class_name = (year < cur_y || year == cur_y && i < cur_m ? 'past' :
|
html += ">"+this.month_names[i]+"</option>";
|
||||||
(year > cur_y || year == cur_y && i > cur_m ? 'future' : 'today'))
|
|
||||||
+ (i == sel_m ? ' selected' : '');
|
|
||||||
this.wrt("<td class='months "+class_name+"'><a href='javascript:Calendar.makeCalendar("+year+","+i+")'>"+this.month_names[i]+"</a></td>");
|
|
||||||
}
|
}
|
||||||
this.wrt("</tr>");
|
html += "</select>";
|
||||||
this.wrt("</table>");
|
html += "<select name='calendar-year' class='calendar-year' onChange='Calendar.instance.makeCalendar(this.value, "+month+");'>";
|
||||||
this.fin();
|
for (var i = current_year+this.years.min; i < current_year+this.years.max; i++) {
|
||||||
},
|
html += "<option value='"+i+"'"
|
||||||
|
if (i == year) html += " selected='selected'";
|
||||||
showYears:function(year) {
|
html += ">"+i+"</option>";
|
||||||
var beg = year & ~15;
|
|
||||||
var cur_y = this.today.getFullYear();
|
|
||||||
var sel_y = this.selected.getFullYear();
|
|
||||||
this.wrt("<table>");
|
|
||||||
this.wrt("<tr><th colspan='4' class='calendar-title'>");
|
|
||||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year-16)+");' title='"+(beg-16)+" - "+(beg-1)+"' class='prev'></a>");
|
|
||||||
this.wrt(" <b>"+beg+" - "+(beg+15)+"</b>");
|
|
||||||
this.wrt(" <a href='javascript:Calendar.showYears("+(year+16)+");' title='"+(beg+16)+" - "+(beg+31)+"' class='next'></a>");
|
|
||||||
this.wrt("</th></tr>");
|
|
||||||
this.wrt("<tr>");
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
if (i && !(i % 4))
|
|
||||||
this.wrt("</tr><tr>");
|
|
||||||
var class_name = (beg+i < cur_y ? 'past' : (beg+i > cur_y ? 'future' : 'today'))
|
|
||||||
+ (beg+i == sel_y ? ' selected' : '');
|
|
||||||
this.wrt("<td class='years "+class_name+"'><a href='javascript:Calendar.showMonths("+(beg+i)+")'>"+(beg+i)+"</a></td>");
|
|
||||||
}
|
}
|
||||||
this.wrt("</tr>");
|
html += "</select>";
|
||||||
this.wrt("</table>");
|
}
|
||||||
this.fin();
|
html += " <a href='javascript:Calendar.instance.makeCalendar("+next_month_year+","+next_month+");' title='"+this.month_names[next_month]+" "+next_month_year+"' class='next'></a></th></tr>";
|
||||||
},
|
html += "<tr class='header'>";
|
||||||
|
for (var weekday = 0; weekday < 7; weekday++)
|
||||||
|
html += "<td>"+this.weekdays[weekday]+"</td>";
|
||||||
|
html += "</tr>";
|
||||||
|
|
||||||
/// Creates a calendar with the date given in the argument as the selected date.
|
// Get the first day of this month
|
||||||
makeCalendar:function(year, month) {
|
var first_day = new Date(year,month,1);
|
||||||
// Display the table
|
var start_day = (first_day.getDay()+this.sunday)%7;
|
||||||
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 d = 1;
|
||||||
var previous_month_year = year;
|
var flag = 0;
|
||||||
if (previous_month < 0) {
|
|
||||||
previous_month = 11;
|
|
||||||
previous_month_year--;
|
|
||||||
}
|
|
||||||
|
|
||||||
var current_year = this.today.getFullYear();
|
// Leap year support
|
||||||
|
if (!(year % 4) && ((year % 100) || !(year % 400)))
|
||||||
|
this.month_days[1] = 29;
|
||||||
|
else
|
||||||
|
this.month_days[1] = 28;
|
||||||
|
|
||||||
this.wrt("<table>");
|
var days_in_this_month = this.month_days[month];
|
||||||
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)+"' class='prev'></a>");
|
|
||||||
if (!this.selectboxes) {
|
|
||||||
this.wrt(" <a href='javascript:Calendar.showMonths("+year+", "+month+")'>"+this.month_names[month]+"</a>");
|
|
||||||
this.wrt(" <a href='javascript:Calendar.showYears("+year+")'>"+year+"</a>");
|
|
||||||
} else {
|
|
||||||
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'");
|
|
||||||
this.wrt(">"+this.month_names[i]+"</option>");
|
|
||||||
}
|
|
||||||
this.wrt("</select>");
|
|
||||||
this.wrt("<select name='calendar-year' class='calendar-year' onChange='Calendar.makeCalendar(this.value, "+month+");'>");
|
|
||||||
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>");
|
|
||||||
}
|
|
||||||
this.wrt(" <a href='javascript:Calendar.makeCalendar("+next_month_year+","+next_month+");' title='"+this.month_names[next_month]+" "+next_month_year+"' class='next'></a></th></tr>");
|
|
||||||
this.wrt("<tr class='header'>");
|
|
||||||
for (var weekday = 0; weekday < 7; weekday++)
|
|
||||||
this.wrt("<td>"+this.weekdays[weekday]+"</td>");
|
|
||||||
this.wrt("</tr>");
|
|
||||||
|
|
||||||
// Get the first day of this month
|
// Create the calendar
|
||||||
var first_day = new Date(year,month,1);
|
var yea = this.today.getFullYear();
|
||||||
var start_day = (first_day.getDay()+Calendar.sunday)%7;
|
var all_diff = (year - yea) || (month - this.today.getMonth());
|
||||||
|
var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1;
|
||||||
|
for (var i = 0; i <= 5; i++) {
|
||||||
|
if (w >= days_in_this_month)
|
||||||
|
break;
|
||||||
|
html += "<tr>";
|
||||||
|
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
|
||||||
|
|
||||||
var d = 1;
|
if (flag) {
|
||||||
var flag = 0;
|
var w = d, mon = month+1;
|
||||||
|
if (w < 10)
|
||||||
|
w = "0" + w;
|
||||||
|
if (mon < 10)
|
||||||
|
mon = "0" + mon;
|
||||||
|
|
||||||
// Leap year support
|
// Is it today?
|
||||||
if (!(year % 4) && ((year % 100) || !(year % 400)))
|
var class_name = '';
|
||||||
this.month_days[1] = 29;
|
|
||||||
else
|
|
||||||
this.month_days[1] = 28;
|
|
||||||
|
|
||||||
var days_in_this_month = this.month_days[month];
|
var diff = all_diff || (d - this.today.getDate());
|
||||||
|
if (diff < 0)
|
||||||
// Create the calendar
|
class_name = ' past';
|
||||||
var yea = this.today.getFullYear();
|
else if (!diff)
|
||||||
var all_diff = (year - yea) || (month - this.today.getMonth());
|
class_name = ' today';
|
||||||
var sel_day = year == this.selected.getFullYear() && month == this.selected.getMonth() ? this.selected.getDate() : -1;
|
|
||||||
for (var i = 0; i <= 5; i++) {
|
|
||||||
if (w >= days_in_this_month)
|
|
||||||
break;
|
|
||||||
this.wrt("<tr>");
|
|
||||||
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 diff = all_diff || (d - this.today.getDate());
|
|
||||||
if (diff < 0)
|
|
||||||
class_name = ' past';
|
|
||||||
else if (!diff)
|
|
||||||
class_name = ' today';
|
|
||||||
else
|
|
||||||
class_name = ' future';
|
|
||||||
|
|
||||||
if (d == sel_day)
|
|
||||||
class_name += ' selected';
|
|
||||||
|
|
||||||
class_name += " " + this.weekdays[j].toLowerCase();
|
|
||||||
|
|
||||||
this.wrt("<td class='days"+class_name+"'><a href='javascript:Calendar.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+d+"</a></td>");
|
|
||||||
d++;
|
|
||||||
}
|
|
||||||
else
|
else
|
||||||
this.wrt("<td class='days'> </td>");
|
class_name = ' future';
|
||||||
|
|
||||||
|
if (d == sel_day)
|
||||||
|
class_name += ' selected';
|
||||||
|
|
||||||
|
class_name += " " + this.weekdays[j].toLowerCase();
|
||||||
|
|
||||||
|
html += "<td class='days"+class_name+"'><a href='javascript:Calendar.instance.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+d+"</a></td>";
|
||||||
|
d++;
|
||||||
}
|
}
|
||||||
this.wrt("</tr>");
|
else
|
||||||
|
html += "<td class='days'> </td>";
|
||||||
}
|
}
|
||||||
this.wrt("</table>");
|
html += "</tr>";
|
||||||
this.fin();
|
}
|
||||||
},
|
html += "</table>";
|
||||||
|
this.setHTML(html);
|
||||||
|
};
|
||||||
|
|
||||||
/// 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() {
|
Calendar.prototype.showCalendar = function()
|
||||||
var input = this.opt['input'];
|
{
|
||||||
|
Calendar.instance = this;
|
||||||
|
var input = this.input;
|
||||||
|
|
||||||
//Position the div in the correct location...
|
//Position the div in the correct location...
|
||||||
var div = document.getElementById(this.opt['calendar']);
|
var div = Calendar.box;
|
||||||
var xy = getOffset(input);
|
var xy = getOffset(input);
|
||||||
var width = input.clientWidth||input.offsetWidth;
|
var width = input.clientWidth||input.offsetWidth;
|
||||||
var height = input.clientHeight||input.offsetHeight;
|
var height = input.clientHeight||input.offsetHeight;
|
||||||
div.style.left = (xy.left-1)+"px";
|
div.style.left = (xy.left-1)+"px";
|
||||||
div.style.top = (xy.top+height-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
|
||||||
this.selected = new Date();
|
this.selected = 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
|
// 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) {
|
||||||
|
// Y-m-d
|
||||||
|
date_parts[1]--; //Month starts with 0
|
||||||
|
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) {
|
if (date_parts.length == 3) {
|
||||||
// Y-m-d
|
// d.m.Y
|
||||||
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[2], date_parts[1], date_parts[0]);
|
||||||
} 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.getFullYear())) { //Valid date.
|
|
||||||
this.selected = selected_date;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (selected_date && !isNaN(selected_date.getFullYear())) { //Valid date.
|
||||||
this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
|
this.selected = selected_date;
|
||||||
document.getElementById(this.opt['calendar']).style.display = "block";
|
|
||||||
},
|
|
||||||
|
|
||||||
/// Hides the currently show calendar.
|
|
||||||
hideCalendar: function() {
|
|
||||||
document.getElementById(this.opt['calendar']).style.display = "none";
|
|
||||||
},
|
|
||||||
|
|
||||||
/// Setup a text input box to be a calendar box.
|
|
||||||
set: function(input_or_id) {
|
|
||||||
if (typeof input_or_id == 'string')
|
|
||||||
input_or_id = document.getElementById(input_or_id);
|
|
||||||
if (!input_or_id)
|
|
||||||
return; // If the input field is not there, exit.
|
|
||||||
|
|
||||||
if (!Calendar.opt['calendar'] || !document.getElementById(Calendar.opt['calendar']))
|
|
||||||
Calendar.init();
|
|
||||||
|
|
||||||
addListener(input_or_id, 'focus', function(ev) {
|
|
||||||
Calendar.opt['input'] = this;
|
|
||||||
Calendar.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";
|
|
||||||
addListener(div, "mousedown", function(ev) {
|
|
||||||
ev = ev || window.event;
|
|
||||||
if (ev.stopPropagation)
|
|
||||||
ev.stopPropagation();
|
|
||||||
else
|
|
||||||
ev.cancelBubble = true;
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
|
|
||||||
|
|
||||||
if (!Calendar.addedListener) {
|
|
||||||
addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
|
|
||||||
Calendar.addedListener = true;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
|
||||||
|
Calendar.box.style.display = "block";
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Hides the currently show calendar.
|
||||||
|
Calendar.hideCalendar = function()
|
||||||
|
{
|
||||||
|
Calendar.box.style.display = "none";
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Setup a text input box to be a calendar box.
|
||||||
|
Calendar.set = function(input_or_id, options)
|
||||||
|
{
|
||||||
|
if (typeof input_or_id == 'string')
|
||||||
|
input_or_id = document.getElementById(input_or_id);
|
||||||
|
if (!input_or_id)
|
||||||
|
return; // If the input field is not there, exit.
|
||||||
|
options = options||{};
|
||||||
|
var instance = new Calendar();
|
||||||
|
for (var i in Calendar.defaultOptions)
|
||||||
|
instance[i] = options[i] || Calendar.defaultOptions[i];
|
||||||
|
instance.input = input_or_id;
|
||||||
|
Calendar.init();
|
||||||
|
addListener(input_or_id, 'focus', function(ev) {
|
||||||
|
instance.showCalendar();
|
||||||
|
});
|
||||||
|
return instance;
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Will be called once when the first input is set.
|
||||||
|
Calendar.init = function()
|
||||||
|
{
|
||||||
|
if (!Calendar.box || !Calendar.box.parentNode) {
|
||||||
|
var div = document.createElement('div');
|
||||||
|
if (!Calendar.box)
|
||||||
|
Calendar.box = div;
|
||||||
|
div.className = "calendar-box";
|
||||||
|
addListener(div, "mousedown", function(ev) {
|
||||||
|
ev = ev || window.event;
|
||||||
|
if (ev.stopPropagation)
|
||||||
|
ev.stopPropagation();
|
||||||
|
else
|
||||||
|
ev.cancelBubble = true;
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
|
||||||
|
if (!Calendar.addedListener) {
|
||||||
|
addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
|
||||||
|
Calendar.addedListener = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue