408 lines
13 KiB
JavaScript
408 lines
13 KiB
JavaScript
/**
|
||
* Calendar Script
|
||
* 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/
|
||
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
|
||
* Version: 2019-07-16
|
||
* License: MIT-like, http://www.openjs.com/license.php
|
||
*
|
||
* Example:
|
||
* <input type="text" name="date" id="date" />
|
||
* <script type="text/javascript">
|
||
* Calendar.set("date");
|
||
* </script>
|
||
*/
|
||
export class Calendar
|
||
{
|
||
// Configuration
|
||
static defaultOptions = {
|
||
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
||
close_label: 'Закрыть',
|
||
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
||
sunday: 6,
|
||
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
|
||
month_days: [31,28,31,30,31,30,31,31,30,31,30,31],
|
||
// Today's date
|
||
today: new Date(),
|
||
callback: null,
|
||
start: 'days',
|
||
}
|
||
|
||
// State variables
|
||
static instance = null;
|
||
static box = null;
|
||
static addedListener = false;
|
||
|
||
setHTML(html)
|
||
{
|
||
html += "<a class='calendar-cancel' onclick='Calendar.instance.hideCalendar()'>"+this.close_label+"</a>";
|
||
Calendar.box.innerHTML = html;
|
||
if (this.position)
|
||
{
|
||
this.calcPosition();
|
||
}
|
||
}
|
||
|
||
calcPosition()
|
||
{
|
||
// Position the div in the correct location...
|
||
var input = this.input;
|
||
var div = Calendar.box;
|
||
var xy = getOffset(input);
|
||
var height = input.clientHeight||input.offsetHeight;
|
||
var ww = document.documentElement.clientWidth||document.body.clientWidth;
|
||
div.style.display = "block";
|
||
if (div.offsetWidth + xy.left-1 > ww)
|
||
div.style.left = (ww-div.offsetWidth-1)+"px";
|
||
else
|
||
div.style.left = (xy.left-1)+"px";
|
||
if (div.offsetHeight + xy.top+height-1 >= (document.documentElement.clientHeight||document.body.clientHeight) &&
|
||
xy.top-div.offsetHeight >= 0)
|
||
{
|
||
this.position = 'top';
|
||
div.style.top = (xy.top-div.offsetHeight)+'px';
|
||
}
|
||
else
|
||
{
|
||
this.position = 'bottom';
|
||
div.style.top = (xy.top+height-1)+"px";
|
||
}
|
||
}
|
||
|
||
isVisible()
|
||
{
|
||
return Calendar.instance == this && Calendar.box.style.display == 'block';
|
||
}
|
||
|
||
/// Called when the user clicks on a date in the calendar.
|
||
selectDate(year, month, day)
|
||
{
|
||
var i = this.input;
|
||
var t = i.value.split(/\s+/, 2)[1]||'';
|
||
if (this.callback)
|
||
{
|
||
// Safari does not understand new Date('YYYY-MM-DD HH:MM:SS')
|
||
t = t ? t.split(/:/) : [ 0, 0, 0 ];
|
||
t = new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0);
|
||
var c = this.callback;
|
||
c(t);
|
||
}
|
||
else
|
||
{
|
||
t = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + (t ? ' '+t : '');
|
||
i.value = t;
|
||
if ("Event" in window)
|
||
{
|
||
var evt = document.createEvent('Event');
|
||
evt.initEvent('change', true, true);
|
||
i.dispatchEvent(evt);
|
||
}
|
||
else
|
||
i.fireEvent("onchange");
|
||
}
|
||
Calendar.instance.hideCalendar();
|
||
}
|
||
|
||
showMonths(year)
|
||
{
|
||
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);
|
||
}
|
||
|
||
showYears(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.
|
||
makeCalendar(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) {
|
||
html += "<option value='"+i+"'";
|
||
if (i == month) html += " selected='selected'";
|
||
html += ">"+this.month_names[i]+"</option>";
|
||
}
|
||
html += "</select>";
|
||
html += "<select name='calendar-year' class='calendar-year' onChange='Calendar.instance.makeCalendar(this.value, "+month+");'>";
|
||
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'";
|
||
html += ">"+i+"</option>";
|
||
}
|
||
html += "</select>";
|
||
}
|
||
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>";
|
||
|
||
// Get the first day of this month
|
||
var first_day = new Date(year,month,1);
|
||
var start_day = (first_day.getDay()+this.sunday)%7;
|
||
|
||
var d = 1;
|
||
var flag = 0;
|
||
|
||
// Leap year support
|
||
if (!(year % 4) && ((year % 100) || !(year % 400)))
|
||
this.month_days[1] = 29;
|
||
else
|
||
this.month_days[1] = 28;
|
||
|
||
var days_in_this_month = this.month_days[month];
|
||
|
||
// Create the calendar
|
||
var yea = this.today.getFullYear();
|
||
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
|
||
|
||
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();
|
||
|
||
html += "<td class='days"+class_name+"'><a href='javascript:Calendar.instance.selectDate(\""+year+"\",\""+mon+"\",\""+w+"\")'>"+d+"</a></td>";
|
||
d++;
|
||
}
|
||
else
|
||
html += "<td class='days'> </td>";
|
||
}
|
||
html += "</tr>";
|
||
}
|
||
html += "</table>";
|
||
this.setHTML(html);
|
||
}
|
||
|
||
/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
|
||
showCalendar()
|
||
{
|
||
Calendar.instance = this;
|
||
var input = this.input;
|
||
|
||
// Show the calendar with the date in the input as the selected 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) {
|
||
// 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) {
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
this.position = '';
|
||
|
||
if (this.start == 'years')
|
||
this.showYears(this.selected.getFullYear());
|
||
else if (this.start == 'months')
|
||
this.showMonths(this.selected.getFullYear());
|
||
else
|
||
this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
|
||
|
||
// Position the div in the correct location...
|
||
this.calcPosition();
|
||
};
|
||
|
||
/// Hides the currently show calendar.
|
||
hideCalendar()
|
||
{
|
||
Calendar.box.style.display = "none";
|
||
}
|
||
|
||
/// Setup a text input box to be a calendar box.
|
||
static set(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();
|
||
input_or_id.addEventListener('focus', function(ev) {
|
||
instance.showCalendar();
|
||
});
|
||
input_or_id.addEventListener('blur', function(ev) {
|
||
if (!instance.stopBlur || instance.stopBlur < Date.now()-200) {
|
||
instance.hideCalendar();
|
||
}
|
||
});
|
||
return instance;
|
||
}
|
||
|
||
/// Will be called once when the first input is set.
|
||
static init()
|
||
{
|
||
if (!Calendar.box || !Calendar.box.parentNode) {
|
||
var div = document.createElement('div');
|
||
if (!Calendar.box)
|
||
Calendar.box = div;
|
||
div.className = "calendar-box";
|
||
div.addEventListener("mousedown", function(ev) {
|
||
ev = ev || window.event;
|
||
if (ev.stopPropagation)
|
||
ev.stopPropagation();
|
||
else
|
||
ev.cancelBubble = true;
|
||
if (Calendar.instance)
|
||
Calendar.instance.stopBlur = Date.now();
|
||
return true;
|
||
});
|
||
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
|
||
if (!Calendar.addedListener) {
|
||
document.addEventListener("mousedown", function() { Calendar.instance && Calendar.instance.hideCalendar(); });
|
||
Calendar.addedListener = true;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
window.Calendar = Calendar;
|
||
|
||
function getOffsetRect(elem)
|
||
{
|
||
var box = elem.getBoundingClientRect();
|
||
|
||
var body = document.body;
|
||
var docElem = document.documentElement;
|
||
|
||
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
|
||
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
|
||
var clientTop = docElem.clientTop || body.clientTop || 0;
|
||
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
|
||
var top = box.top + scrollTop - clientTop;
|
||
var left = box.left + scrollLeft - clientLeft;
|
||
|
||
return { top: Math.round(top), left: Math.round(left) };
|
||
}
|
||
|
||
function getOffsetSum(elem)
|
||
{
|
||
var top = 0, left = 0;
|
||
while(elem)
|
||
{
|
||
top = top + parseInt(elem.offsetTop);
|
||
left = left + parseInt(elem.offsetLeft);
|
||
elem = elem.offsetParent;
|
||
}
|
||
return { top: top, left: left };
|
||
}
|
||
|
||
function getOffset(elem)
|
||
{
|
||
if (elem.getBoundingClientRect)
|
||
return getOffsetRect(elem);
|
||
else
|
||
return getOffsetSum(elem);
|
||
}
|