108 lines
2.5 KiB
JavaScript
108 lines
2.5 KiB
JavaScript
const date = new Date();
|
|
|
|
const renderCalendar = () => {
|
|
date.setDate(1);
|
|
|
|
const monthDays = document.querySelector(".days");
|
|
|
|
const lastDay = new Date(
|
|
date.getFullYear(),
|
|
date.getMonth() + 1,
|
|
0
|
|
).getDate();
|
|
|
|
const prevLastDay = new Date(
|
|
date.getFullYear(),
|
|
date.getMonth(),
|
|
0
|
|
).getDate();
|
|
|
|
const firstDayIndex = date.getDay();
|
|
|
|
const lastDayIndex = new Date(
|
|
date.getFullYear(),
|
|
date.getMonth() + 1,
|
|
0
|
|
).getDay();
|
|
|
|
const nextDays = 7 - lastDayIndex - 1 + 1;
|
|
|
|
const months = [
|
|
"Januar",
|
|
"Februar",
|
|
"Marts",
|
|
"April",
|
|
"Maj",
|
|
"Juni",
|
|
"Juli",
|
|
"August",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"December",
|
|
];
|
|
|
|
document.querySelector(".date h1").innerHTML = months[date.getMonth()];
|
|
|
|
document.querySelector(".date p").innerHTML = new Date().toLocaleDateString('da-DK', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
|
|
let days = "";
|
|
|
|
for (let x = firstDayIndex; x > 1; x--) {
|
|
days += `<div class="prev-date">${prevLastDay - x + 2}</div>`;
|
|
}
|
|
|
|
for (let i = 1; i <= lastDay; i++) {
|
|
if (
|
|
i === new Date().getDate() &&
|
|
date.getMonth() === new Date().getMonth()
|
|
) {
|
|
|
|
days += `<div class="today" onClick="clickdate()">${i}</div>`;
|
|
|
|
} else {
|
|
days += `<div onClick="clickdate()">${i}</div>`;
|
|
}
|
|
}
|
|
|
|
for (let j = 1; j <= nextDays; j++) {
|
|
days += `<div class="next-date" onClick="clickdate()">${j}</div>`;
|
|
monthDays.innerHTML = days;
|
|
}
|
|
};
|
|
|
|
document.querySelector(".prev").addEventListener("click", () => {
|
|
date.setMonth(date.getMonth() - 1);
|
|
renderCalendar();
|
|
});
|
|
|
|
document.querySelector(".next").addEventListener("click", () => {
|
|
date.setMonth(date.getMonth() + 1);
|
|
renderCalendar();
|
|
});
|
|
|
|
renderCalendar();
|
|
|
|
|
|
|
|
function clickdate() {
|
|
var dato = new Date();
|
|
let month = dato.getMonth() + 1;
|
|
let day = dato.getDate();
|
|
let currentDate = dato.getFullYear() + "/" + (("" + month).length < 2 ? "0" : "") + month + "/" + (("" + day).length < 2 ? "0" : "") + day;
|
|
|
|
var myModal = new bootstrap.Modal(document.getElementById("popup"));
|
|
$("#popupDate").text(currentDate);
|
|
myModal.show();
|
|
}
|
|
|
|
var myModal = document.getElementById('popup')
|
|
|
|
myModal.addEventListener('shown.bs.modal', function() {
|
|
myInput.focus()
|
|
}) |