2018-07-01 23:06:21 +03:00
|
|
|
|
/**
|
|
|
|
|
* Calendar Script
|
|
|
|
|
* Creates a calendar widget which can be used to select the date more easily than using just a text box
|
|
|
|
|
*
|
|
|
|
|
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
|
2018-10-09 19:01:34 +03:00
|
|
|
|
* Version: 2018-10-09
|
2018-07-01 23:06:21 +03:00
|
|
|
|
* 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>
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import preact from 'preact';
|
|
|
|
|
/** @jsx preact.h */
|
|
|
|
|
|
|
|
|
|
export class Calendar extends preact.Component
|
|
|
|
|
{
|
|
|
|
|
// Configuration
|
|
|
|
|
static defaultProps = {
|
|
|
|
|
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
|
|
|
|
close_label: 'Закрыть',
|
|
|
|
|
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
|
|
|
|
weekdayIds: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
|
|
|
|
|
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
|
|
|
|
|
// Today's date
|
|
|
|
|
today: new Date(),
|
|
|
|
|
start: 'days',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(props, state)
|
|
|
|
|
{
|
|
|
|
|
return (<div class="calendar-box" style={{display: "block"}}>
|
2018-10-09 19:01:34 +03:00
|
|
|
|
{props.mode == 'months' ? this.renderMonths(props) : null}
|
|
|
|
|
{props.mode == 'years' ? this.renderYears(props) : null}
|
|
|
|
|
{props.mode == 'days' ? this.renderDays(props) : null}
|
2018-07-01 23:06:21 +03:00
|
|
|
|
<a class="calendar-cancel" onclick={() => Calendar.hideCalendar()}>{props.close_label}</a>
|
|
|
|
|
</div>);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount()
|
|
|
|
|
{
|
|
|
|
|
this.componentDidUpdate();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate()
|
|
|
|
|
{
|
|
|
|
|
// Position the div in the correct location...
|
|
|
|
|
var input = this.props.input;
|
|
|
|
|
var div = Calendar.box;
|
|
|
|
|
var xy = getOffset(input);
|
|
|
|
|
var height = input.clientHeight||input.offsetHeight;
|
|
|
|
|
div.style.left = (xy.left-1)+"px";
|
|
|
|
|
if (div.offsetHeight + xy.top+height-1 >= (document.body.clientHeight||document.documentElement.clientHeight) &&
|
|
|
|
|
xy.top-div.offsetHeight >= 0)
|
|
|
|
|
div.style.top = (xy.top-div.offsetHeight)+'px';
|
|
|
|
|
else
|
|
|
|
|
div.style.top = (xy.top+height-1)+"px";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/// Called when the user clicks on a date in the calendar.
|
|
|
|
|
selectDate(year, month, day)
|
|
|
|
|
{
|
|
|
|
|
var i = this.props.input;
|
|
|
|
|
var t = i.value.split(/\s+/, 2)[1]||'';
|
|
|
|
|
if (t)
|
|
|
|
|
t = ' '+t;
|
|
|
|
|
month = Number(month)+1;
|
|
|
|
|
if (month < 10)
|
|
|
|
|
month = '0'+month;
|
|
|
|
|
if (day < 10)
|
|
|
|
|
day = '0'+day;
|
|
|
|
|
if (this.props.callback)
|
|
|
|
|
{
|
|
|
|
|
var c = this.props.callback;
|
|
|
|
|
t = year + '-' + month + '-' + day + t;
|
|
|
|
|
c(new Date(t));
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
t = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + 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.hideCalendar();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showMonths(year)
|
|
|
|
|
{
|
2018-10-09 19:01:34 +03:00
|
|
|
|
this.props.onChangeProps({ year, mode: 'months' });
|
2018-07-01 23:06:21 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showYears(year)
|
|
|
|
|
{
|
2018-10-09 19:01:34 +03:00
|
|
|
|
this.props.onChangeProps({ year, mode: 'years' });
|
2018-07-01 23:06:21 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showDays(year, month)
|
|
|
|
|
{
|
2018-10-09 19:01:34 +03:00
|
|
|
|
this.props.onChangeProps({ year, month, mode: 'days' });
|
2018-07-01 23:06:21 +03:00
|
|
|
|
}
|
|
|
|
|
|
2018-10-09 19:01:34 +03:00
|
|
|
|
renderMonths(props)
|
2018-07-01 23:06:21 +03:00
|
|
|
|
{
|
2018-10-09 19:01:34 +03:00
|
|
|
|
var year = props.year;
|
2018-07-01 23:06:21 +03:00
|
|
|
|
var cur_y = props.today.getFullYear();
|
|
|
|
|
var cur_m = props.today.getMonth();
|
|
|
|
|
var sel_m = props.selected.getFullYear() == year ? props.selected.getMonth() : -1;
|
|
|
|
|
var months = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 9, 10, 11 ] ];
|
|
|
|
|
return (<table>
|
|
|
|
|
<tr><th colspan='4' class='calendar-title'>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showMonths(year-1)} title={(year-1)} class='prev'></a>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showYears(year)}>{year}</a>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showMonths(year+1)} title={(year+1)} class='next'></a>
|
|
|
|
|
</th></tr>
|
|
|
|
|
{months.map(g => (<tr>
|
|
|
|
|
{g.map(i => (
|
|
|
|
|
<td class={'months '+
|
|
|
|
|
(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' : '')}>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showDays(year, i)}>
|
|
|
|
|
{props.month_names[i]}
|
|
|
|
|
</a>
|
|
|
|
|
</td>
|
|
|
|
|
))}
|
|
|
|
|
</tr>))}
|
|
|
|
|
</table>);
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-09 19:01:34 +03:00
|
|
|
|
renderYears({ selected, today, year })
|
2018-07-01 23:06:21 +03:00
|
|
|
|
{
|
|
|
|
|
var beg = year & ~15;
|
|
|
|
|
var cur_y = today.getFullYear();
|
|
|
|
|
var sel_y = selected.getFullYear();
|
|
|
|
|
return (<table>
|
|
|
|
|
<tr><th colspan='4' class='calendar-title'>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showYears(year-16)} title={(beg-16)+" - "+(beg-1)} class='prev'></a>
|
|
|
|
|
<b>{beg+' - '+(beg+15)}</b>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showYears(year+16)} title={(beg+16)+" - "+(beg+31)} class='next'></a>
|
|
|
|
|
</th></tr>
|
|
|
|
|
{[0, 1, 2, 3].map(r => (
|
|
|
|
|
<tr>
|
|
|
|
|
{[0, 1, 2, 3].map(j => {
|
|
|
|
|
var i = beg + j + r*4;
|
|
|
|
|
var class_name = (i < cur_y ? 'past' : (i > cur_y ? 'future' : 'today'))
|
|
|
|
|
+ (i == sel_y ? ' selected' : '');
|
|
|
|
|
return (<td class={'years '+class_name}>
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showMonths(i)}>{i}</a>
|
|
|
|
|
</td>);
|
|
|
|
|
})}
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
</table>);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
_yearOptions(min, max, year)
|
|
|
|
|
{
|
|
|
|
|
var r = [];
|
|
|
|
|
for (var i = min; i < max; i++)
|
|
|
|
|
r.push(<option value={i} selected={i == year}>{i}</option>);
|
|
|
|
|
return r;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/// Creates a calendar with the date given in the argument as the selected date.
|
2018-10-09 19:01:34 +03:00
|
|
|
|
renderDays(props)
|
2018-07-01 23:06:21 +03:00
|
|
|
|
{
|
2018-10-09 19:01:34 +03:00
|
|
|
|
var { year, month, selected, selectboxes, sunday, today, month_names } = props;
|
2018-07-01 23:06:21 +03:00
|
|
|
|
|
|
|
|
|
// 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 = today.getFullYear();
|
|
|
|
|
|
|
|
|
|
// Get the first day of this month
|
|
|
|
|
var first_day = new Date(year, month, 1);
|
|
|
|
|
var start_day = (first_day.getDay()+sunday)%7;
|
|
|
|
|
|
|
|
|
|
var d = 1;
|
|
|
|
|
var flag = 0;
|
|
|
|
|
|
|
|
|
|
// Leap year support
|
|
|
|
|
var days_in_this_month = (month == 2
|
|
|
|
|
? (!(year % 4) && ((year % 100) || !(year % 400)) ? 29 : 28)
|
|
|
|
|
: ((month < 7) == !(month & 1) ? 31 : 30));
|
|
|
|
|
|
|
|
|
|
var yea = today.getFullYear();
|
|
|
|
|
var all_diff = (year - yea) || (month - today.getMonth());
|
|
|
|
|
var sel_day = selected && year == selected.getFullYear() && month == selected.getMonth() ? selected.getDate() : -1;
|
|
|
|
|
|
|
|
|
|
return (<table>
|
|
|
|
|
<tr><th colspan='7' class='calendar-title'>
|
|
|
|
|
<a href='javascript:void(0)'
|
|
|
|
|
onclick={() => this.showDays(previous_month_year, previous_month)}
|
|
|
|
|
title={month_names[previous_month]+" "+previous_month_year} class='prev'></a>
|
|
|
|
|
{!selectboxes ?
|
|
|
|
|
[
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showMonths(year, month)}>{month_names[month]}</a>,
|
|
|
|
|
<a href='javascript:void(0)' onclick={() => this.showYears(year)}>{year}</a>
|
|
|
|
|
] : [
|
|
|
|
|
<select name='calendar-month' class='calendar-month' onchange={(e) => this.showDays(year, e.target.value)}>
|
|
|
|
|
{month_names.map((name, i) => (
|
|
|
|
|
<option value={i} selected={(i == month)}>{name}</option>
|
|
|
|
|
))}
|
|
|
|
|
</select>,
|
|
|
|
|
<select name='calendar-year' class='calendar-year' onchange={(e) => this.showDays(e.target.value, month)}>
|
|
|
|
|
{this._yearOptions(current_year+props.years.min, current_year+props.years.max, year)}
|
|
|
|
|
</select>
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
<a href='javascript:void(0)'
|
|
|
|
|
onclick={() => this.showDays(next_month_year,next_month)}
|
|
|
|
|
title={props.month_names[next_month]+" "+next_month_year} class='next'></a>
|
|
|
|
|
</th></tr>
|
|
|
|
|
<tr class='header'>
|
|
|
|
|
{props.weekdays.map(name => (<td>{name}</td>))}
|
|
|
|
|
</tr>
|
|
|
|
|
{[0, 1, 2, 3, 4].map(i => (
|
|
|
|
|
(i*7 < days_in_this_month+start_day ? <tr>
|
|
|
|
|
{[0, 1, 2, 3, 4, 5, 6].map(j =>
|
|
|
|
|
{
|
|
|
|
|
var d = i*7+j+1-start_day;
|
|
|
|
|
var visible = (i > 0 || j >= start_day) && (d <= days_in_this_month);
|
|
|
|
|
if (visible)
|
|
|
|
|
{
|
|
|
|
|
var class_name = 'days';
|
|
|
|
|
var diff = all_diff || (d - 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 += ' ' + props.weekdayIds[j].toLowerCase();
|
|
|
|
|
return (<td class={class_name}>
|
|
|
|
|
<a href="javascript:void(0)" onclick={() => this.selectDate(year, month, d)}>{d}</a>
|
|
|
|
|
</td>);
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
return (<td class='days'> </td>);
|
|
|
|
|
})}
|
|
|
|
|
</tr> : null)
|
|
|
|
|
))}
|
|
|
|
|
</table>);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/// Display the calendar - if a date exists in the input box, that will be selected in the calendar.
|
|
|
|
|
static showCalendar(input, options)
|
|
|
|
|
{
|
|
|
|
|
// Show the calendar with the date in the input as the selected date
|
2018-10-09 19:01:34 +03:00
|
|
|
|
var props = { ...Calendar.defaultProps, ...options };
|
2018-07-01 23:06:21 +03:00
|
|
|
|
props.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.
|
|
|
|
|
props.selected = selected_date;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
props.today = new Date();
|
2018-10-09 19:01:34 +03:00
|
|
|
|
props.year = props.selected.getFullYear();
|
|
|
|
|
props.month = props.selected.getMonth();
|
|
|
|
|
props.mode = props.start;
|
2018-07-01 23:06:21 +03:00
|
|
|
|
props.input = input;
|
2018-10-09 19:01:34 +03:00
|
|
|
|
props.onChangeProps = (h) =>
|
|
|
|
|
{
|
|
|
|
|
props = { ...props, ...h };
|
|
|
|
|
preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
|
|
|
|
|
};
|
2018-07-01 23:06:21 +03:00
|
|
|
|
Calendar.init();
|
|
|
|
|
Calendar.box.style.display = "block";
|
|
|
|
|
preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/// Hides the currently show calendar.
|
|
|
|
|
static hideCalendar()
|
|
|
|
|
{
|
|
|
|
|
if (!Calendar.box)
|
|
|
|
|
return;
|
|
|
|
|
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.
|
|
|
|
|
}
|
|
|
|
|
input_or_id.addEventListener('focus', function(ev)
|
|
|
|
|
{
|
|
|
|
|
Calendar.showCalendar(input_or_id, options);
|
|
|
|
|
});
|
2018-10-09 19:01:34 +03:00
|
|
|
|
// FIXME: Add change listener to enable interactive date selection in calendar while typing
|
2018-07-01 23:06:21 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
|
return true;
|
|
|
|
|
});
|
|
|
|
|
document.getElementsByTagName("body")[0].insertBefore(div, document.getElementsByTagName("body")[0].firstChild);
|
|
|
|
|
if (!Calendar.addedListener)
|
|
|
|
|
{
|
|
|
|
|
document.addEventListener("mousedown", function() { Calendar.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);
|
|
|
|
|
}
|