Rewrite to es6 class
parent
3f3525efd3
commit
964930c39f
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"presets": [ [ "env", { modules: "umd" } ], "stage-1", "react" ],
|
||||||
|
"retainLines": true
|
||||||
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
width: 301px;
|
width: 301px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 10000;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
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)
|
||||||
|
|
189
calendar.js
189
calendar.js
|
@ -4,7 +4,7 @@
|
||||||
*
|
*
|
||||||
* Original: http://www.openjs.com/scripts/ui/calendar/
|
* Original: http://www.openjs.com/scripts/ui/calendar/
|
||||||
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
|
* Modified: http://yourcmc.ru/git/vitalif-js/calendar
|
||||||
* Version: 2018-03-14
|
* Version: 2018-03-17
|
||||||
* License: MIT-like, http://www.openjs.com/license.php
|
* License: MIT-like, http://www.openjs.com/license.php
|
||||||
*
|
*
|
||||||
* Example:
|
* Example:
|
||||||
|
@ -13,12 +13,10 @@
|
||||||
* Calendar.set("date");
|
* Calendar.set("date");
|
||||||
* </script>
|
* </script>
|
||||||
*/
|
*/
|
||||||
function Calendar()
|
export class Calendar
|
||||||
{
|
{
|
||||||
}
|
// Configuration
|
||||||
|
static defaultOptions = {
|
||||||
// Configuration
|
|
||||||
Calendar.defaultOptions = {
|
|
||||||
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
month_names: ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"],
|
||||||
close_label: 'Закрыть',
|
close_label: 'Закрыть',
|
||||||
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
weekdays: ["Пн","Вт","Ср","Чт","Пт","Сб","Вс"],
|
||||||
|
@ -29,32 +27,57 @@ Calendar.defaultOptions = {
|
||||||
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(),
|
||||||
};
|
callback: null,
|
||||||
|
start: 'days',
|
||||||
|
}
|
||||||
|
|
||||||
// State variables
|
// State variables
|
||||||
Calendar.instance = null;
|
static instance = null;
|
||||||
Calendar.box = null;
|
static box = null;
|
||||||
Calendar.addedListener = false;
|
static addedListener = false;
|
||||||
|
|
||||||
Calendar.prototype.setHTML = function(html)
|
setHTML(html)
|
||||||
{
|
{
|
||||||
html += "<a class='calendar-cancel' onclick='Calendar.hideCalendar();'>"+this.close_label+"</a>";
|
html += "<a class='calendar-cancel' onclick='Calendar.instance.hideCalendar()'>"+this.close_label+"</a>";
|
||||||
Calendar.box.innerHTML = html;
|
Calendar.box.innerHTML = html;
|
||||||
};
|
}
|
||||||
|
|
||||||
/// Called when the user clicks on a date in the calendar.
|
isVisible()
|
||||||
Calendar.prototype.selectDate = function(year, month, day)
|
{
|
||||||
{
|
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 i = this.input;
|
||||||
var t = i.value.split(/\s+/, 2)[1]||'';
|
var t = i.value.split(/\s+/, 2)[1]||'';
|
||||||
if (t)
|
if (t)
|
||||||
t = ' '+t;
|
t = ' '+t;
|
||||||
i.value = (this.format == 'Y-m-d' ? year + '-' + month + '-' + day : day + '.' + month + '.' + year) + t;
|
if (this.callback)
|
||||||
Calendar.hideCalendar();
|
{
|
||||||
};
|
var c = this.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.instance.hideCalendar();
|
||||||
|
}
|
||||||
|
|
||||||
Calendar.prototype.showMonths = function(year, month)
|
showMonths(year)
|
||||||
{
|
{
|
||||||
var cur_y = this.today.getFullYear();
|
var cur_y = this.today.getFullYear();
|
||||||
var cur_m = this.today.getMonth();
|
var cur_m = this.today.getMonth();
|
||||||
var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
|
var sel_m = this.selected.getFullYear() == year ? this.selected.getMonth() : -1;
|
||||||
|
@ -75,10 +98,10 @@ Calendar.prototype.showMonths = function(year, month)
|
||||||
html += "</tr>";
|
html += "</tr>";
|
||||||
html += "</table>";
|
html += "</table>";
|
||||||
this.setHTML(html);
|
this.setHTML(html);
|
||||||
};
|
}
|
||||||
|
|
||||||
Calendar.prototype.showYears = function(year)
|
showYears(year)
|
||||||
{
|
{
|
||||||
var beg = year & ~15;
|
var beg = year & ~15;
|
||||||
var cur_y = this.today.getFullYear();
|
var cur_y = this.today.getFullYear();
|
||||||
var sel_y = this.selected.getFullYear();
|
var sel_y = this.selected.getFullYear();
|
||||||
|
@ -100,11 +123,11 @@ Calendar.prototype.showYears = function(year)
|
||||||
html += "</tr>";
|
html += "</tr>";
|
||||||
html += "</table>";
|
html += "</table>";
|
||||||
this.setHTML(html);
|
this.setHTML(html);
|
||||||
};
|
}
|
||||||
|
|
||||||
/// Creates a calendar with the date given in the argument as the selected date.
|
/// Creates a calendar with the date given in the argument as the selected date.
|
||||||
Calendar.prototype.makeCalendar = function(year, month)
|
makeCalendar(year, month)
|
||||||
{
|
{
|
||||||
// Display the table
|
// Display the table
|
||||||
var next_month = month+1;
|
var next_month = month+1;
|
||||||
var next_month_year = year;
|
var next_month_year = year;
|
||||||
|
@ -212,22 +235,14 @@ Calendar.prototype.makeCalendar = function(year, month)
|
||||||
}
|
}
|
||||||
html += "</table>";
|
html += "</table>";
|
||||||
this.setHTML(html);
|
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.
|
||||||
Calendar.prototype.showCalendar = function()
|
showCalendar()
|
||||||
{
|
{
|
||||||
Calendar.instance = this;
|
Calendar.instance = this;
|
||||||
var input = this.input;
|
var input = this.input;
|
||||||
|
|
||||||
//Position the div in the correct location...
|
|
||||||
var div = Calendar.box;
|
|
||||||
var xy = getOffset(input);
|
|
||||||
var width = input.clientWidth||input.offsetWidth;
|
|
||||||
var height = input.clientHeight||input.offsetHeight;
|
|
||||||
div.style.left = (xy.left-1)+"px";
|
|
||||||
div.style.top = (xy.top+height-1)+"px";
|
|
||||||
|
|
||||||
// Show the calendar with the date in the input as the selected date
|
// 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
|
||||||
|
@ -252,19 +267,35 @@ Calendar.prototype.showCalendar = function()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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());
|
this.makeCalendar(this.selected.getFullYear(), this.selected.getMonth());
|
||||||
Calendar.box.style.display = "block";
|
|
||||||
};
|
|
||||||
|
|
||||||
/// Hides the currently show calendar.
|
// Position the div in the correct location...
|
||||||
Calendar.hideCalendar = function()
|
var div = Calendar.box;
|
||||||
{
|
var xy = getOffset(input);
|
||||||
|
var height = input.clientHeight||input.offsetHeight;
|
||||||
|
div.style.display = "block";
|
||||||
|
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)
|
||||||
|
div.style.top = (xy.top-div.offsetHeight)+'px';
|
||||||
|
else
|
||||||
|
div.style.top = (xy.top+height-1)+"px";
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Hides the currently show calendar.
|
||||||
|
hideCalendar()
|
||||||
|
{
|
||||||
Calendar.box.style.display = "none";
|
Calendar.box.style.display = "none";
|
||||||
};
|
}
|
||||||
|
|
||||||
/// Setup a text input box to be a calendar box.
|
/// Setup a text input box to be a calendar box.
|
||||||
Calendar.set = function(input_or_id, options)
|
static set(input_or_id, options)
|
||||||
{
|
{
|
||||||
if (typeof input_or_id == 'string')
|
if (typeof input_or_id == 'string')
|
||||||
input_or_id = document.getElementById(input_or_id);
|
input_or_id = document.getElementById(input_or_id);
|
||||||
if (!input_or_id)
|
if (!input_or_id)
|
||||||
|
@ -275,21 +306,21 @@ Calendar.set = function(input_or_id, options)
|
||||||
instance[i] = options[i] || Calendar.defaultOptions[i];
|
instance[i] = options[i] || Calendar.defaultOptions[i];
|
||||||
instance.input = input_or_id;
|
instance.input = input_or_id;
|
||||||
Calendar.init();
|
Calendar.init();
|
||||||
addListener(input_or_id, 'focus', function(ev) {
|
input_or_id.addEventListener('focus', function(ev) {
|
||||||
instance.showCalendar();
|
instance.showCalendar();
|
||||||
});
|
});
|
||||||
return instance;
|
return instance;
|
||||||
};
|
}
|
||||||
|
|
||||||
/// Will be called once when the first input is set.
|
/// Will be called once when the first input is set.
|
||||||
Calendar.init = function()
|
static init()
|
||||||
{
|
{
|
||||||
if (!Calendar.box || !Calendar.box.parentNode) {
|
if (!Calendar.box || !Calendar.box.parentNode) {
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
if (!Calendar.box)
|
if (!Calendar.box)
|
||||||
Calendar.box = div;
|
Calendar.box = div;
|
||||||
div.className = "calendar-box";
|
div.className = "calendar-box";
|
||||||
addListener(div, "mousedown", function(ev) {
|
div.addEventListener("mousedown", function(ev) {
|
||||||
ev = ev || window.event;
|
ev = ev || window.event;
|
||||||
if (ev.stopPropagation)
|
if (ev.stopPropagation)
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
|
@ -299,8 +330,48 @@ Calendar.init = function()
|
||||||
});
|
});
|
||||||
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
|
document.getElementsByTagName("body")[0].insertBefore(div,document.getElementsByTagName("body")[0].firstChild);
|
||||||
if (!Calendar.addedListener) {
|
if (!Calendar.addedListener) {
|
||||||
addListener(document, "mousedown", function() { Calendar.hideCalendar(); });
|
document.addEventListener("mousedown", function() { Calendar.instance && Calendar.instance.hideCalendar(); });
|
||||||
Calendar.addedListener = true;
|
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);
|
||||||
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,47 +0,0 @@
|
||||||
(function() {
|
|
||||||
|
|
||||||
// UTILITY FUNCTIONS
|
|
||||||
window.addListener = (function() {
|
|
||||||
return window.addEventListener
|
|
||||||
? function(el, type, fn) { el.addEventListener(type, fn, false); }
|
|
||||||
: function(el, type, fn) { el.attachEvent('on'+type, fn); };
|
|
||||||
})();
|
|
||||||
|
|
||||||
var getOffsetRect = function(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) };
|
|
||||||
};
|
|
||||||
|
|
||||||
var getOffsetSum = function(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 };
|
|
||||||
};
|
|
||||||
|
|
||||||
window.getOffset = function(elem)
|
|
||||||
{
|
|
||||||
if (elem.getBoundingClientRect)
|
|
||||||
return getOffsetRect(elem);
|
|
||||||
else
|
|
||||||
return getOffsetSum(elem);
|
|
||||||
};
|
|
||||||
|
|
||||||
})();
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"name": "calendarjs",
|
||||||
|
"author": {
|
||||||
|
"name": "Vitaliy Filippov",
|
||||||
|
"email": "vitalif@yourcmc.ru",
|
||||||
|
"url": "http://yourcmc.ru/wiki/"
|
||||||
|
},
|
||||||
|
"description": "Yet another date picker",
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-cli": "^6.26.0",
|
||||||
|
"babel-core": "^6.26.0",
|
||||||
|
"babel-preset-env": "^1.6.1",
|
||||||
|
"babel-preset-react": "^6.24.1",
|
||||||
|
"babel-preset-stage-1": "^6.24.1",
|
||||||
|
"uglify-js": "^3.3.15"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"compile": "node_modules/.bin/babel calendar.js | node_modules/.bin/uglifyjs > calendar.min.js"
|
||||||
|
}
|
||||||
|
}
|
3
test.htm
3
test.htm
|
@ -1,8 +1,7 @@
|
||||||
<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 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.util.js"></script>
|
<script src="calendar.min.js"></script>
|
||||||
<script src="calendar.js"></script>
|
|
||||||
|
|
||||||
<input id="x" style="margin: 50px">
|
<input id="x" style="margin: 50px">
|
||||||
<script>
|
<script>
|
||||||
|
|
Loading…
Reference in New Issue