kopia lustrzana https://gitlab.com/gridtracker.org/gridtracker
274 wiersze
8.2 KiB
JavaScript
274 wiersze
8.2 KiB
JavaScript
// FIXME ****************************************************************************** //
|
|
// The datepicker's "Time" section doesn't work. This really needs to be fixed before
|
|
// the next big RTTY Roundup or Field Day where there may be a lot of hams that want
|
|
// to use this feature to only reference their log starting when the contest starts.
|
|
// Which isn't always 00:00 UTC.
|
|
// ************************************************************************************ //
|
|
var picker = {
|
|
attach: function (opt)
|
|
{
|
|
// attach() : attach datepicker to target
|
|
// opt : options (object)
|
|
// target : datepicker will populate this field
|
|
// container : datepicker will be generated in this container
|
|
// startmon : start on Monday (default false)
|
|
// disableday : array of days to disable, e.g. [2,7] to disable Tue and Sun
|
|
|
|
// (A) Create new datepicker
|
|
var dp = document.createElement("div");
|
|
dp.dataset.target = opt.target;
|
|
dp.dataset.fire = opt.fire;
|
|
dp.dataset.startmon = opt.startmon ? "1" : "0";
|
|
dp.classList.add("picker");
|
|
if (opt.disableday)
|
|
{
|
|
dp.dataset.disableday = JSON.stringify(opt.disableday);
|
|
}
|
|
|
|
// (B) Default to current month + year
|
|
// ! NOTE: UTC+0 !
|
|
var today = new Date(),
|
|
thisMonth = today.getUTCMonth(), // Note: Jan is 0
|
|
thisYear = today.getUTCFullYear(),
|
|
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
|
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
// (C) Month select
|
|
var select = document.createElement("select"),
|
|
option = null;
|
|
select.classList.add("picker-m");
|
|
for (var mth in months)
|
|
{
|
|
option = document.createElement("option");
|
|
option.value = parseInt(mth) + 1;
|
|
option.text = months[mth];
|
|
select.appendChild(option);
|
|
}
|
|
select.selectedIndex = thisMonth;
|
|
select.addEventListener("change", function() { picker.draw(this); });
|
|
dp.appendChild(select);
|
|
|
|
// (D) Year select
|
|
var yRange = 100; // Year range to show, I.E. from thisYear-yRange to thisYear+yRange
|
|
select = document.createElement("select");
|
|
select.classList.add("picker-y");
|
|
for (var y = thisYear - yRange; y < thisYear + 20; y++)
|
|
{
|
|
option = document.createElement("option");
|
|
option.value = y;
|
|
option.text = y;
|
|
select.appendChild(option);
|
|
}
|
|
select.selectedIndex = yRange;
|
|
select.addEventListener("change", function() { picker.draw(this); });
|
|
dp.appendChild(select);
|
|
|
|
// (E) Day select
|
|
var days = document.createElement("div");
|
|
days.classList.add("picker-d");
|
|
dp.appendChild(days);
|
|
|
|
// (F) Attach date picker to target container + draw the dates
|
|
picker.draw(select);
|
|
|
|
// (F1) Popup datepicker
|
|
if (opt.container == 1)
|
|
{
|
|
// Mark this as a "popup"
|
|
var uniqueID = 0;
|
|
while (document.getElementById("picker-" + uniqueID) != null)
|
|
{
|
|
uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
|
|
}
|
|
dp.dataset.popup = "1";
|
|
dp.dataset.dpid = uniqueID;
|
|
|
|
// Create wrapper
|
|
var wrapper = document.createElement("div");
|
|
wrapper.id = "picker-" + uniqueID;
|
|
wrapper.classList.add("picker-wrap");
|
|
wrapper.appendChild(dp);
|
|
|
|
// Attach onclick to show/hide datepicker
|
|
var target = document.getElementById(opt.target);
|
|
target.dataset.dp = uniqueID;
|
|
target.onfocus = function ()
|
|
{
|
|
document.getElementById("picker-" + this.dataset.dp).classList.add("show");
|
|
};
|
|
wrapper.addEventListener("click", function (evt)
|
|
{
|
|
if (evt.target.classList.contains("picker-wrap"))
|
|
{
|
|
this.classList.remove("show");
|
|
}
|
|
});
|
|
|
|
// Attach popup datepicker to document
|
|
document.documentElement.appendChild(wrapper);
|
|
}
|
|
|
|
// (F2) Inline datepicker
|
|
else
|
|
{
|
|
document.getElementById(opt.container).appendChild(dp);
|
|
}
|
|
},
|
|
|
|
draw: function (el)
|
|
{
|
|
// draw() : draw the days in month
|
|
// el : HTML reference to either year or month selector
|
|
|
|
// (A) Get date picker components
|
|
var parent = el.parentElement,
|
|
year = parent.getElementsByClassName("picker-y")[0].value,
|
|
month = parent.getElementsByClassName("picker-m")[0].value,
|
|
days = parent.getElementsByClassName("picker-d")[0];
|
|
|
|
// (B) Date range calculation
|
|
// ! NOTE: UTC+0 !
|
|
var daysInMonth = new Date(Date.UTC(year, month, 0)).getUTCDate(),
|
|
startDay = new Date(Date.UTC(year, month - 1, 1)).getUTCDay(), // Note: Sun = 0
|
|
endDay = new Date(Date.UTC(year, month - 1, daysInMonth)).getUTCDay(),
|
|
startDay = startDay == 0 ? 7 : startDay,
|
|
endDay = endDay == 0 ? 7 : endDay;
|
|
|
|
// (C) Generate date squares (in array first)
|
|
var squares = [],
|
|
disableday = null;
|
|
if (parent.dataset.disableday)
|
|
{
|
|
disableday = JSON.parse(parent.dataset.disableday);
|
|
}
|
|
|
|
// (C1) Empty squares before first day of month
|
|
if (parent.dataset.startmon == "1" && startDay != 1)
|
|
{
|
|
for (var i = 1; i < startDay; i++) { squares.push("B"); }
|
|
}
|
|
if (parent.dataset.startmon == "0" && startDay != 7)
|
|
{
|
|
for (var i = 0; i < startDay; i++) { squares.push("B"); }
|
|
}
|
|
|
|
// (C2) Days of month
|
|
// All days enabled, just add
|
|
if (disableday == null)
|
|
{
|
|
for (var i = 1; i <= daysInMonth; i++) { squares.push([i, false]); }
|
|
}
|
|
// Some days disabled
|
|
else
|
|
{
|
|
var thisday = startDay;
|
|
for (var i = 1; i <= daysInMonth; i++)
|
|
{
|
|
// Check if day is disabled
|
|
var disabled = disableday.includes(thisday);
|
|
// Day of month, disabled
|
|
squares.push([i, disabled]);
|
|
// Next day
|
|
thisday++;
|
|
if (thisday == 8) { thisday = 1; }
|
|
}
|
|
}
|
|
|
|
// (C2) Empty squares after last day of month
|
|
if (parent.dataset.startmon == "1" && endDay != 7)
|
|
{
|
|
for (var i = endDay; i < 7; i++) { squares.push("B"); }
|
|
}
|
|
if (parent.dataset.startmon == "0" && endDay != 6)
|
|
{
|
|
for (var i = endDay; i < (endDay == 7 ? 13 : 6); i++) { squares.push("B"); }
|
|
}
|
|
|
|
// (D) Draw HTML
|
|
var daynames = ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat"];
|
|
if (parent.dataset.startmon == "1") { daynames.push("Sun"); }
|
|
else { daynames.unshift("Sun"); }
|
|
|
|
// (D1) Header
|
|
var table = document.createElement("table"),
|
|
row = table.insertRow()
|
|
cell = null;
|
|
row.classList.add("picker-d-h");
|
|
for (let d of daynames)
|
|
{
|
|
cell = row.insertCell();
|
|
cell.innerHTML = d;
|
|
}
|
|
|
|
// (D2) Date cells
|
|
var total = squares.length;
|
|
row = table.insertRow();
|
|
for (var i = 0; i < total; i++)
|
|
{
|
|
if (i != total && i % 7 == 0) { row = table.insertRow(); }
|
|
cell = row.insertCell();
|
|
if (squares[i] == "B")
|
|
{
|
|
cell.classList.add("picker-d-b");
|
|
}
|
|
else
|
|
{
|
|
cell.innerHTML = squares[i][0];
|
|
// Not allowed to choose this day
|
|
if (squares[i][1])
|
|
{
|
|
cell.classList.add("picker-d-dd");
|
|
}
|
|
// Allowed to choose this day
|
|
else
|
|
{
|
|
cell.classList.add("picker-d-d");
|
|
cell.addEventListener("click", function() { picker.pick(this); });
|
|
}
|
|
}
|
|
}
|
|
|
|
// (D3) Attach new calendar to datepicker
|
|
days.innerHTML = "";
|
|
days.appendChild(table);
|
|
},
|
|
|
|
pick: function (el)
|
|
{
|
|
// pick() : choose a date
|
|
// el : HTML reference to selected date cell
|
|
|
|
// (A) Get all components
|
|
var parent = el.parentElement;
|
|
while (!parent.classList.contains("picker"))
|
|
{
|
|
parent = parent.parentElement;
|
|
}
|
|
|
|
// (B) Get full selected year month day
|
|
var year = parent.getElementsByClassName("picker-y")[0].value,
|
|
month = parent.getElementsByClassName("picker-m")[0].value,
|
|
day = el.innerHTML;
|
|
|
|
// YYYY-MM-DD Format
|
|
// ! CHANGE FORMAT HERE IF YOU WANT !
|
|
if (parseInt(month) < 10) { month = "0" + month; }
|
|
if (parseInt(day) < 10) { day = "0" + day; }
|
|
var fullDate = year + "-" + month + "-" + day;
|
|
|
|
// (C) Update selected date
|
|
document.getElementById(parent.dataset.target).value = fullDate;
|
|
|
|
if (parent.dataset.fire.length > 0)
|
|
{
|
|
window[parent.dataset.fire]();
|
|
}
|
|
|
|
// (D) Popup only - close the popup
|
|
if (parent.dataset.popup == "1")
|
|
{
|
|
document.getElementById("picker-" + parent.dataset.dpid).classList.remove("show");
|
|
}
|
|
}
|
|
};
|