Hallo,
ich habe mir durch einiges an Internetrecherche einen Kalender zusammengebastelt. Dieser sollte das angeklickte Datum zur Terminfestlegung in einem Label Anzeigen.
Kalender HTML & JS:
Code
<body onload="renderDate()">
<div class="wrapper">
<div class="calendar">
<div class="month">
<div class="prev" onclick="moveDate('prev')">
<span>❮</span>
</div>
<div>
<h2 id="month"></h2>
</div>
<div class="next" onclick="moveDate('next')">
<span>❯</span>
</div>
</div>
<div class="weekdays">
<div>So</div>
<div>Mo</div>
<div>Di</div>
<div>Mi</div>
<div>Do</div>
<div>Fr</div>
<div>Sa</div>
</div>
<div class="days"></div>
</div>
</div>
<script>
var dt = new Date();
function renderDate() {
dt.setDate(1);
var day = dt.getDay();
var today = new Date();
var endDate = new Date(
dt.getFullYear(),
dt.getMonth() + 1,
0
).getDate();
var prevDate = new Date(
dt.getFullYear(),
dt.getMonth(),
0
).getDate();
var months = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
]
document.getElementById("month").innerHTML = months[dt.getMonth()];
var cells = "";
for (x = day; x > 0; x--) {
cells += "<div class='prev_date'>" + (prevDate - x + 1) + "</div>";
}
console.log(day);
for (i = 1; i <= endDate; i++) {
if (i == today.getDate() && dt.getMonth() == today.getMonth())
cells += "<div class='today'>" + i + "</div>";
else
cells += "<div>" + i + "</div>";
}
document.getElementsByClassName("days")[0].innerHTML = cells;
}
function moveDate(para) {
if(para == "prev") {
dt.setMonth(dt.getMonth() - 1);
}
else if(para == 'next') {
dt.setMonth(dt.getMonth() + 1);
}
renderDate();
}
</script>
</body>
<style>
* {
box-sizing: border-box;
font-family: Arial;
}
ul {
list-style-type: none;
}
.wrapper {
background-color: #dfe6e9;
position: absolute;
width: 20%;
height: 20%;
left: 5%;
top: 21%;
}
.calendar {
width: 600px;
background-color: #fff;
box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.2);
}
.month {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1%;
text-align: center;
background-color: grey;
color: #fff;
}
.weekdays {
background-color: #585858;
color: #fff;
padding: 2%;
display: flex;
}
.days {
padding: 3%;
display: flex;
flex-wrap: wrap;
}
.weekdays div,
.days div {
text-align: center;
width: 14.28%;
}
.days div {
padding: 10px 0;
margin-bottom: 10px;
transition: all 0.4s;
}
.prev_date {
color: #999;
}
.today {
background-color: #585858;
color: #fff;
}
.days div:hover {
cursor: pointer;
background-color: #dfe6e9
}
.prev,
.next {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 23px;
background-color: rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.prev:hover,
.next:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.2);
}
#month {
font-size: 5vh;
font-weight: 400;
}
#tab{
position: absolute;
top: 90%;
left: 28%;
}
</style>Das Label ist wäre:
Code
<label id="Termindatum" for="termindatum">Datum
<input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" readonly>
</label>Komme nun leider nicht auf eine Funktionstüchtige Funktion zur Datenübergabe. Danke schon mal für hilfreiche Antworten.