nicht angemeldet
Datepicker
Ich habe hier ein Skript (siehe unten) mit einem Datepicker und zwei Textfelder. Nun sollen die zwei Textfelder als Start- und Enddatum auf den Datepicker abgestimmt werden. Kann mir jemand das Skript umschreiben?
Hier das Skript:
<script language="JavaScript" type="text/javascript">
var HighlightToday = true;
var DisablePast = true;
var MonthNames = new Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember");
var now = new Date();
var dest = null;
var ny = now.getFullYear(); // Today's Date
var nm = now.getMonth();
var nd = now.getDate();
var sy = 0;
var sm = 0;
var sd = 0;
var y = now.getFullYear(); // Working Date
var m = now.getMonth();
var d = now.getDate();
var l = 0;
var t = 0;
var MonthLengths = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
/*
Function: GetDate(control)
Arguments:
control = ID of destination control
*/
function GetDate() {
EnsureCalendarExists();
DestroyCalendar();
if(arguments[0] == null || arguments[0] == "") {
alert("ERROR: Destination control required in funciton call GetDate()");
return;
} else {
dest = arguments[0];
}
y = now.getFullYear();
m = now.getMonth();
d = now.getDate();
sm = 0;
sd = 0;
sy = 0;
var cdval = dest.value;
if(/\d{1,2}.\d{1,2}.\d{4}/.test(dest.value)) {
var vParts = cdval.split("/"); // assume mm/dd/yyyy
sm = vParts[0] - 1;
sd = vParts[1];
sy = vParts[2];
m=sm;
d=sd;
y=sy;
}
/* Calendar is displayed 125 pixels above the destination element
or (somewhat) over top of it. ;)*/
l = dest.offsetLeft + dest.offsetParent.offsetLeft;
t = dest.offsetTop + 0;
if(t < 0) t = 0; // >
DrawCalendar();
}
/*
function DestoryCalendar()
Purpose: Destory any already drawn calendar so a new one can be drawn
*/
function DestroyCalendar() {
var cal = document.getElementById("dpCalendar");
if(cal != null) {
cal.innerHTML = null;
cal.style.display = "none";
}
return
}
function DrawCalendar() {
DestroyCalendar();
cal = document.getElementById("dpCalendar");
cal.style.left = l + "px";
cal.style.top = t + "px";
var sCal = "<table><tr><td class="cellButton"><a href="javascript: PrevMonth();" title="Previous Month"><<</a></td>"+
"<td class="cellMonth" width="80%" colspan="5">"+MonthNames[m]+" "+y+"</td>"+
"<td class="cellButton"><a href="javascript: NextMonth();" title="Next Month">>></a></td></tr>"+
"<tr><td>So</td><td>Mo</td><td>Di</td><td>Mi</td><td>Do</td><td>Fr</td><td>Sa</td></tr>";
var wDay = 1;
var wDate = new Date(y,m,wDay);
if(isLeapYear(wDate)) {
MonthLengths[1] = 29;
} else {
MonthLengths[1] = 28;
}
var dayclass = "";
var isToday = false;
for(var r=1; r<7; r++) {
sCal = sCal + "<tr>";
for(var c=0; c<7; c++) {
var wDate = new Date(y,m,wDay);
if(wDate.getDay() == c && wDay<=MonthLengths[m]) {
if(wDate.getDate()==sd && wDate.getMonth()==sm && wDate.getFullYear()==sy) {
dayclass = "cellSelected";
isToday = true;
} else if(wDate.getDate()==nd && wDate.getMonth()==nm && wDate.getFullYear()==ny && HighlightToday) {
dayclass = "cellToday";
isToday = true;
} else {
dayclass = "cellDay";
isToday = false;
}
if(((now > wDate) && !DisablePast) || (now <= wDate) || isToday) { // >
sCal = sCal + "<td class=""+dayclass+""><a href="javascript: ReturnDay("+wDay+");">"+wDay+"</a></td>";
} else {
sCal = sCal + "<td class=""+dayclass+"">"+wDay+"</td>";
}
wDay++;
} else {
sCal = sCal + "<td class="unused"></td>";
}
}
sCal = sCal + "</tr>";
}
sCal = sCal + "<tr><td colspan="4" class="unused"></td><td colspan="3" class="cellCancel"><a href="javascript: DestroyCalendar();">Cancel</a></td></tr></table>"
cal.innerHTML = sCal;
cal.style.display = "inline";
}
function PrevMonth() {
m--;
if(m==-1) {
m = 11;
y--;
}
DrawCalendar();
}
function NextMonth() {
m++;
if(m==12) {
m = 0;
y++;
}
DrawCalendar();
}
function ReturnDay(day) {
cDest = document.getElementById(dest);
dest.value = day+". "+MonthNames[m]+" "+y;
DestroyCalendar();
}
function EnsureCalendarExists() {
if(document.getElementById("dpCalendar") == null) {
var eCalendar = document.createElement("div");
eCalendar.setAttribute("id", "dpCalendar");
document.body.appendChild(eCalendar);
}
}
function isLeapYear(dTest) {
var y = dTest.getYear();
var bReturn = false;
if(y % 4 == 0) {
if(y % 100 != 0) {
bReturn = true;
} else {
if (y % 400 == 0) {
bReturn = true;
}
}
}
return bReturn;
}
</script>
<style type="text/css">
#dpCalendar {
display: none; /* Important, do not change */
position: absolute; /* Important, do not change */
background-color: #eeeeee;
color: black;
font-size: xx-small;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 150px;
}
/* The table of the Calendar */
#dpCalendar table {
border: 1px solid black;
background-color: #eeeeee;
color: black;
font-size: xx-small;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
}
/* The Next/Previous buttons */
#dpCalendar .cellButton {
background-color: #ddddff;
color: black;
}
/* The Month/Year title cell */
#dpCalendar .cellMonth {
background-color: #ddddff;
color: black;
text-align: center;
}
/* Any regular day of the month cell */
#dpCalendar .cellDay {
background-color: #ddddff;
color: black;
text-align: center;
}
/* The day of the month cell that is selected */
#dpCalendar .cellSelected {
border: 1px solid red;
background-color: #ffdddd;
color: black;
text-align: center;
}
/* The day of the month cell that is Today */
#dpCalendar .cellToday {
background-color: #ddffdd;
color: black;
text-align: center;
}
/* Any cell in a month that is unused (ie: Not a Day in that month) */
#dpCalendar .unused {
background-color: transparent;
color: black;
}
/* The cancel button */
#dpCalendar .cellCancel {
background-color: #cccccc;
color: black;
border: 1px solid black;
text-align: center;
}
/* The clickable text inside the calendar */
#dpCalendar a {
text-decoration: none;
background-color: transparent;
color: blue;
}
</style>
<p> <p>
<p> <p>
<p> <p>
<p> <p>
<p> <p>
<img onClick="GetDate(ersterTag)" src="Datepicker.gif" width="16" height="16" border="0" style="cursor:pointer">
<input type="text" readonly id="ersterTag" style="font-weight:bold; font-size:11pt; text-align:left; border-color:white; border-style:solid; width:145px;" size="20">
<img onClick="GetDate(letzterTag)" src="Datepicker.gif" width="16" height="16" border="0" style="cursor:pointer">
<input type="text" readonly name="letzterTag" style="font-weight:bold; font-size:11pt; text-align:left; border-color:white; border-style:solid; width:145px;" size="20">
-
Moin Moin!
Ich habe hier ein Skript (siehe unten) mit einem Datepicker und zwei Textfelder. Nun sollen die zwei Textfelder als Start- und Enddatum auf den Datepicker abgestimmt werden. Kann mir jemand das Skript umschreiben?
Zur Info: Du bist hier nicht bei RentACoder. Was hast Du versucht, woran bist Du gescheitert?
Oder hast Du keinen Bock? Dann solltest Du das klar als Job-Angebot kennzeichnen. Schreib auch gleich dazu, wie viel Dir der Job wert ist.
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".