Hallo,
ich stehe nun vor einem neuen, etwas kleinerem Problem, aber ich komme irgendwie nicht drauf.
Der Kalender öffnet sich, sobald man auf ein Icon klickt. Wenn man ein entspr. Datum ausgewählt hat, schließt sich der Kalender wieder. Es soll nun das aktuell selektierte Datum bei wiederholtem Öffnen des Kalenders, also indem man wieder auf das Icon klickt farblich hinterlegt werden.
Hier ist auch schon das Problem. Die Zelle der Tabelle wird nur dann farblich hinterlegt, wenn man einen Monat zurück- und dann wieder vorgeht. Es soll aber auch ohne dieses Blättern funktionieren.
Mein aktueller HTML-Code:
<html>
<head>
<title>JavaScript-Calendar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript" src="calendar.js"></script>
</head>
<body>
<table>
<tr>
<td>Date:</td>
<td>
<form name="dateform" action="">
<input type="text" size="20" name="date"><a href="#" onClick="show('calendar');"><img src="calendar.gif"></a>
</form>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="check" value="Check Date" onClick="checkDatum()">
</td>
</tr>
<tr>
<td> </td>
<td>
<div id="calendar" style="display:none">
<script language="javascript">callCalendar();</script>
</div>
</td>
</tr>
</table>
</body>
</html>
Alles anzeigen
Mein aktueller JS-Code:
//überprüft, ob ein bestimmtes Jahr ein Schaltjahr ist
function leapyear (year) {
if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
return true;
}
return false;
}
//definiert den Header des Kalenders, also Monat und Wochentage
function header (year, month) {
var nameOfMonth = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
if (year < 999) {
year+=1900;
}
calendarDivContent = "";
calendarDivContent += ("<div id=\"tab\"><table>");
calendarDivContent += ("<tr><td><div align=\"left\">");
if (month == 0) {
calendarDivContent += ("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\"><<</a></div></td>");
}
else {
calendarDivContent += ("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\"><<</a></div></td>");
}
calendarDivContent += ("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
if (month == 11) {
calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">>></a></div></td></tr>");
}
else {
calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">>></a></div></td></tr>");
}
calendarDivContent += ("<tr>");
for (i = 0; i <= 6; i++) {
calendarDivContent += ("<td>" + nameOfDay[i] + "</td>");
}
calendarDivContent += ("</tr>");
}
//hier werden die einzelnen Tage in die richtigen Zellen eingetragen
function fillTable (year, month) {
if (year < 999) {
year+=1900;
}
var date = new Date(year, month, 1);
var dateGermanWeek = new Array(7,1,2,3,4,5,6);
var numberOfDays;
if (leapyear(year)) {
numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
else {
numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
var counterDaysMonth = 1;
for (i = 1; i <= 5; i++) {
calendarDivContent += ("<tr>");
for (j = 1; j <= 7; j++) {
if (i == 1 && j < dateGermanWeek[date.getDay()]) {
calendarDivContent += ("<td> </td>");
}
else if (counterDaysMonth <= numberOfDays[month]) {
if (counterDaysMonth + "." + (month+1) + "." + year == document.dateform.date.value) {
calendarDivContent += ("<td style=\"background-color:red\"><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar');style=\"cursor:pointer;\">"+ counterDaysMonth +"</a></td>");
}
else {
calendarDivContent += ("<td><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar'); \" style=\"cursor:pointer\">"+ counterDaysMonth +"</a></td>");
}
counterDaysMonth++;
}
else {
calendarDivContent += ("<td> </td>");
}
}
calendarDivContent += ("</tr>");
}
calendarDivContent += ("</table></div>");
calendarDiv = document.getElementById("calendar");
calendarDiv.innerHTML = calendarDivContent;
}
//erzeugt vollständigen Kalender
function Calendar (year, month) {
header(year, month);
fillTable(year, month);
}
//diese Funktion ruft den eigentl. Kalender auf
function callCalendar() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
if (document.dateform.date.value) {
var string = document.dateform.date.value.replace(/[^0-9^\.]/g, '');
var split = string.split(".");
var month = parseInt(split[1] || 0, 10);
var year = parseInt(split[2] || 0, 10);
}
Calendar(year,month);
}
//Funktion zum Anzeigen des Kalenders
function show (div) {
with(document.getElementById(div).style) {
if (display == "none") {
display = "inline";
}
else {
display = "none";
}
}
}
//Funktion zum Verbergen des Kalenders
function hide (div) {
with (document.getElementById(div).style) {
if (display == "none") {
display = "none";
}
else {
display = "none";
}
}
}
//Ermittelt das vollständige Jahr
function getFullYear(date) {
if (!date) {
date = new Date();
}
if (typeof date.getFullYear != 'undefined') {
return date.getFullYear();
}
var year = date.getYear();
if (year < 1000) {
year += 2000;
}
return year;
}
//Überprüft, ob ein bestimmtes Datum gültig ist
function checkDate(string) {
if(!string) {
return false;
}
string += '';
string = string.replace(/[^0-9^\.]/g, '');
var split = string.split(".");
var day = parseInt(split[0], 10);
var month = parseInt(split[1] || 0, 10);
var year = parseInt(split[2] || 0, 10);
if(isNaN(year)) year = getFullYear();
var check = new Date(year, month - 1, day);
var day2 = check.getDate();
var year2 = getFullYear(check);
var month2 = check.getMonth() + 1;
if (year2 == year && month == month2 && day == day2) {
return true;
}
return false;
}
//Aufruf von obiger Funktion
function checkDatum () {
if (checkDate(document.dateform.date.value)) {
alert("Das Datum " + document.dateform.date.value + " ist gültig!");
}
else {
alert("Das Datum ist ungültig!");
}
}
Alles anzeigen
Ich hab das komplette Paket auch angehängt.
Vielen Dank schonmal!
.