Remove old code, leave only the "React" version

Now it can also be used instead of the old standalone pure-JS version through
a thin preact-React shim. Older calendar.css style also works with the new version.
Material Icons dependency is removed.
master
Vitaliy Filippov 2021-09-19 22:57:44 +03:00
parent cf6f1bdc45
commit 82664ebeed
11 changed files with 100 additions and 706 deletions

View File

@ -1,7 +1,4 @@
{ {
"presets": [ [ "env" ], "stage-1" ], "presets": [ [ "env" ], "stage-1" ],
"retainLines": true, "plugins": [ [ "transform-react-jsx" ] ]
"plugins": [
[ "transform-react-jsx", { "pragma": "preact.h" } ]
]
} }

View File

@ -1,7 +1,8 @@
// Input with calendar hint based on Calendar and Picker // Input with calendar hint based on Calendar and Picker
// Version 2021-09-19
// License: LGPLv3.0+
// (c) Vitaliy Filippov 2021+ // (c) Vitaliy Filippov 2021+
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
// Version: 2021-09-19
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';

View File

@ -60,6 +60,9 @@
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 a {
cursor: pointer;
}
.calendar-box .clear { .calendar-box .clear {
clear: right; clear: right;
} }
@ -108,7 +111,7 @@
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:not(.disabled) 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 {
@ -124,6 +127,9 @@
.calendar-box td.disabled { .calendar-box td.disabled {
background: #ddd; background: #ddd;
} }
.calendar-box td.disabled a {
cursor: default;
}
.calendar-box tr.header td { .calendar-box tr.header td {
color: #aaa; color: #aaa;
text-transform: uppercase; text-transform: uppercase;

View File

@ -2,9 +2,10 @@
* Calendar Script * Calendar Script
* 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
* *
* Modified: http://yourcmc.ru/git/vitalif-js/calendar * (c) Vitaliy Filippov 2018+
* Version: 2019-07-18 * Repository: http://yourcmc.ru/git/vitalif-js/calendar
* License: MIT-like, http://www.openjs.com/license.php * Version: 2021-09-19
* License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
* *
* Example: * Example:
* <input type="text" name="date" id="date" /> * <input type="text" name="date" id="date" />
@ -13,44 +14,16 @@
* </script> * </script>
*/ */
import ReactCalendar from './calendar-react.js';
import preact from 'preact'; import preact from 'preact';
/** @jsx preact.h */ /** @jsx preact.h */
export class Calendar extends preact.Component export class Calendar extends ReactCalendar
{ {
// 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"}}>
{props.mode == 'months' ? this.renderMonths(props) : null}
{props.mode == 'years' ? this.renderYears(props) : null}
{props.mode == 'days' ? this.renderDays(props) : null}
<a class="calendar-cancel" onclick={() => Calendar.hideCalendar()}>{props.close_label}</a>
</div>);
}
componentDidMount() componentDidMount()
{ {
this.componentDidUpdate(); this.componentDidUpdate();
this.props.input.addEventListener('blur', () =>
{
if (!Calendar.stopBlur || Calendar.stopBlur < Date.now()-200)
Calendar.hideCalendar();
});
} }
componentDidUpdate() componentDidUpdate()
@ -58,6 +31,7 @@ export class Calendar extends preact.Component
// Position the div in the correct location... // Position the div in the correct location...
var input = this.props.input; var input = this.props.input;
var div = Calendar.box; var div = Calendar.box;
div.style.position = "absolute";
var xy = getOffset(input); var xy = getOffset(input);
var height = input.clientHeight||input.offsetHeight; var height = input.clientHeight||input.offsetHeight;
var ww = document.body.clientWidth||document.documentElement.clientWidth; var ww = document.body.clientWidth||document.documentElement.clientWidth;
@ -73,258 +47,37 @@ export class Calendar extends preact.Component
div.style.top = (xy.top+height-1)+"px"; div.style.top = (xy.top+height-1)+"px";
} }
/// Called when the user clicks on a date in the calendar. static onBlur()
selectDate(year, month, day)
{ {
var i = this.props.input; if (!Calendar.stopBlur || Calendar.stopBlur < Date.now()-200)
var t = i.value.split(/\s+/, 2)[1]||''; Calendar.hideCalendar();
month = Number(month)+1; }
if (this.props.callback)
/// Called when the user clicks on a date in the calendar.
static onChange(i, date)
{
i.value = date;
if ("Event" in window)
{ {
// Safari does not understand new Date('YYYY-MM-DD HH:MM:SS') var evt = document.createEvent('Event');
t = t ? t.split(/:/) : [ 0, 0, 0 ]; evt.initEvent('change', true, true);
t = new Date(year-0, month-1, day-0, t[0]-0, t[1]-0, t[2]-0); i.dispatchEvent(evt);
var c = this.props.callback;
c(new Date(t));
} }
else else
{ i.fireEvent("onchange");
if (month < 10)
month = '0'+month;
if (day < 10)
day = '0'+day;
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.hideCalendar(); Calendar.hideCalendar();
} }
showMonths(year)
{
this.props.onChangeProps({ year, mode: 'months' });
}
showYears(year)
{
this.props.onChangeProps({ year, mode: 'years' });
}
showDays(year, month)
{
this.props.onChangeProps({ year, month, mode: 'days' });
}
renderMonths(props)
{
var year = props.year;
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>);
}
renderYears({ selected, today, year })
{
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.
renderDays(props)
{
var { year, month, selected, selectboxes, sunday, today, month_names } = props;
// 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'>&nbsp;</td>);
})}
</tr> : null)
))}
</table>);
}
/// 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.
static showCalendar(input, options) static showCalendar(input, options)
{ {
// 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 props = { ...Calendar.defaultProps, ...options }; const props = {
props.selected = new Date(); ...options,
var date_in_input = input.value.replace(/\s+.*$/, ''); // Remove time input,
if (date_in_input) value: input.value,
{ hide: Calendar.hideCalendar,
// date format is HARDCODE onChange: date => Calendar.onChange(input, date),
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();
props.year = props.selected.getFullYear();
props.month = props.selected.getMonth();
props.mode = props.start;
props.input = input;
props.onChangeProps = (h) =>
{
props = { ...props, ...h };
preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
}; };
Calendar.init(); Calendar.init();
Calendar.box.style.display = "block"; Calendar.box.style.display = "block";
@ -332,7 +85,7 @@ export class Calendar extends preact.Component
preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box); preact.render(<Calendar {...props} />, Calendar.box.parentNode, Calendar.box);
} }
/// Hides the currently show calendar. /// Hides the currently shown calendar.
static hideCalendar() static hideCalendar()
{ {
if (!Calendar.box) if (!Calendar.box)
@ -351,6 +104,7 @@ export class Calendar extends preact.Component
{ {
return; // If the input field is not there, exit. return; // If the input field is not there, exit.
} }
input_or_id.addEventListener('blur', Calendar.onBlur);
input_or_id.addEventListener('focus', function(ev) input_or_id.addEventListener('focus', function(ev)
{ {
Calendar.showCalendar(input_or_id, options); Calendar.showCalendar(input_or_id, options);

View File

@ -4,9 +4,10 @@
* Can be paired with Picker (https://yourcmc.ru/git/vitalif-js/selectbox/) * Can be paired with Picker (https://yourcmc.ru/git/vitalif-js/selectbox/)
* to create a Calendar-based text input * to create a Calendar-based text input
* *
* Modified: http://yourcmc.ru/git/vitalif-js/calendar * (c) Vitaliy Filippov 2011+
* Repository: http://yourcmc.ru/git/vitalif-js/calendar
* Version: 2021-09-19 * Version: 2021-09-19
* License: MIT * License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
*/ */
import React from 'react'; import React from 'react';
@ -267,12 +268,12 @@ export default class Calendar extends React.PureComponent
<a key="1" onClick={() => this.showMonths(year, month)}>{monthNames[month]}</a>, <a key="1" onClick={() => this.showMonths(year, month)}>{monthNames[month]}</a>,
<a key="2" onClick={() => this.showYears(year)}>{year}</a> <a key="2" onClick={() => this.showYears(year)}>{year}</a>
] : [ ] : [
<select name='calendar-month' className='calendar-month' onchange={(e) => this.showDays(year, e.target.value)}> <select name='calendar-month' className='calendar-month' onChange={(e) => this.showDays(year, e.target.value)}>
{monthNames.map((name, i) => ( {monthNames.map((name, i) => (
<option value={i} selected={(i == month)}>{name}</option> <option value={i} selected={(i == month)}>{name}</option>
))} ))}
</select>, </select>,
<select name='calendar-year' className='calendar-year' onchange={(e) => this.showDays(e.target.value, month)}> <select name='calendar-year' className='calendar-year' onChange={(e) => this.showDays(e.target.value, month)}>
{this._yearOptions(current_year+this.props.minYear, current_year+this.props.maxYear, year)} {this._yearOptions(current_year+this.props.minYear, current_year+this.props.maxYear, year)}
</select> </select>
] ]

View File

@ -1,13 +1,12 @@
/* Standard style CSS for calendar.js, version: 2018-03-17 */ /* Standard style CSS for calendar.js, version: 2021-09-19 */
.calendar-box .calendar-box
{ {
display: none;
background: #fff; background: #fff;
position: absolute; padding: 0;
padding: 5px;
z-index: 100; z-index: 100;
box-shadow: 0 0 4px #aaa; box-shadow: 0 0 4px #aaa;
} }
.calendar-box a { cursor: pointer; }
.calendar-box .calendar-cancel { .calendar-box .calendar-cancel {
cursor: pointer; cursor: pointer;
height: 2.2em; height: 2.2em;
@ -40,10 +39,12 @@
.calendar-box a:hover { background: #e8ffd0; } .calendar-box a:hover { background: #e8ffd0; }
.calendar-box tr.header td { font-weight: bold; padding: 5px; } .calendar-box tr.header td { font-weight: bold; padding: 5px; }
.calendar-box td { background: #f4f6f8; } .calendar-box td { background: #f4f6f8; }
.calendar-box td.future { color: #606060; } .calendar-box td.disabled { background: #ddd; color: #555; }
.calendar-box td.disabled a { cursor: default; }
.calendar-box td.disabled a:hover { background: none; }
.calendar-box .today { background-color: #ffe9c6; } .calendar-box .today { background-color: #ffe9c6; }
.calendar-box .selected { background-color: #c9ff8b; } .calendar-box .selected { background-color: #c9ff8b; }
.calendar-box .calendar-title { text-align: center; white-space: nowrap; } .calendar-box .calendar-title { text-align: center; white-space: nowrap; background: #dddfe2; height: 2.2em; }
.calendar-box .calendar-title a, .calendar-box .calendar-title select { display: inline-block; padding: 3px 7px; border: 1px solid #d0d2d4; background: #eef0f2; } .calendar-box .calendar-title a, .calendar-box .calendar-title select { display: inline-block; padding: 3px 7px; }
.calendar-box .calendar-title a.prev:before { content: "<"; } .calendar-box .calendar-title a.prev:before { content: "<"; }
.calendar-box .calendar-title a.next:before { content: ">"; } .calendar-box .calendar-title a.next:before { content: ">"; }

View File

@ -1,407 +0,0 @@
/**
* 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'>&nbsp;</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);
}

View File

@ -15,12 +15,11 @@
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1", "babel-preset-stage-1": "^6.24.1",
"preact": "^8.2.9", "preact": "^8.2.9",
"uglify-js": "^3.4.9",
"webpack": "^4.26.1", "webpack": "^4.26.1",
"webpack-cli": "^3.0.8" "webpack-cli": "^3.0.8"
}, },
"scripts": { "scripts": {
"compile": "node_modules/.bin/webpack", "build": "node_modules/.bin/webpack",
"compile-old": "node_modules/.bin/babel calendar.js | node_modules/.bin/uglifyjs > calendar.min.js" "watch-dev": "node_modules/.bin/webpack --mode=development -w"
} }
} }

38
preact-react.js Normal file
View File

@ -0,0 +1,38 @@
// Thin Preact-React shim for Calendar
// (c) Vitaliy Filippov 2021+
// Repository: http://yourcmc.ru/git/vitalif-js/calendar
// Version: 2021-09-19
// License: Dual-license MPL 2.0+ or GNU LGPL 3.0+
import preact from 'preact';
function createElement(type, props, ...children)
{
if (props)
{
if (props.onClick)
{
props.onclick = props.onClick;
delete props.onClick;
}
if (props.onChange)
{
props.onchange = props.onChange;
delete props.onChange;
}
if (props.className)
{
props['class'] = props.className;
delete props.className;
}
}
return preact.h(type, props, ...children);
}
const React = {
createElement,
Component: preact.Component,
PureComponent: preact.Component,
};
export default React;

View File

@ -1,6 +1,5 @@
<div style="margin-top: 400px"> <div style="margin-top: 400px">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="calendar-material.css"> <link rel="stylesheet" href="calendar-material.css">
<script src="calendar-preact.min.js"></script> <script src="calendar-preact.min.js"></script>
@ -11,6 +10,6 @@ Calendar.set(document.getElementById('x'));
<input id="y" style="margin: 50px"> <input id="y" style="margin: 50px">
<script> <script>
Calendar.set(document.getElementById('y'), { selectboxes: true }); Calendar.set(document.getElementById('y'), { selectboxes: true, minDate: 'today' });
</script> </script>
</div> </div>

View File

@ -8,6 +8,11 @@ module.exports = {
path: __dirname, path: __dirname,
filename: './[name].min.js' filename: './[name].min.js'
}, },
resolve: {
alias: {
react: './preact-react.js'
}
},
devtool: 'source-map', devtool: 'source-map',
module: { module: {
rules: [ rules: [