Datepicker - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Datepicker

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Datepicker

Pages: [1]

geschrieben von Herbert1204 am 12.03.2011 - 23:55

Die zwei Textfelder sollen als Start- und Enddatum auf den Datepicker abgestimmt werden. Kann mir jemand das Skript umschreiben?

Vielen Dank

<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>

<img onClick="GetDate(ersterTag)" src="Datepicker.gif" width="16" height="16" border="0" style="cursor

ointer">
<input type="text" id="ersterTag">

<img onClick="GetDate(letzterTag)" src="Datepicker.gif" width="16" height="16" border="0" style="cursor

ointer">
<input type="text" name="letzterTag">

geschrieben von Danny am 13.03.2011 - 12:15

Wie meinst du "sollen als Start- und Enddatum auf den Datepicker abgestimmt werden"? Meinst du das im 2. Feld nur Daten > als das erste Feld auswählbar sein sollen ?

geschrieben von Herbert1204 am 13.03.2011 - 15:43

Danke für Deine Antwort.

Es soll so aussehen und funktionieren, wie auf dieser Seite http://www.kelvinluck.com/assets/jq....tEnd.html.
Das Problem bei mir ist, dass ich keine Ahnung von php habe. Deshalb füge ich nur einfache Javaskripte zusammen.

geschrieben von Herbert1204 am 13.03.2011 - 15:49

so ist der Link richtig

http://www.kelvinluck.com/assets/jq....tEnd.html.

geschrieben von Herbert1204 am 13.03.2011 - 15:51

so ist der Link richtig

http://www.kelvinluck.com/assets/jq....tEnd.html

geschrieben von Herbert1204 am 13.03.2011 - 15:53

http://www.kelvinluck.com/assets/jq....rtEnd.html

geschrieben von Herbert1204 am 13.03.2011 - 15:53

http://www.kelvinluck.com/assets/jquery/
datePicker/v2/demo/datePickerStartEnd.html

geschrieben von Danny am 13.03.2011 - 15:56

Warum verwendest du dann nicht gleich den jQuery Datepicker ? jQuery ist eine Javascript Bibliothek, die viele nützliche Funktionen zum Selektieren und Verändern von Elementen bietet.

Auf der verlinkten Seite ist ja ein Datepicker für jQuery inkl. Beispiel. Oder du verwendest jQuery UI.
Das ist eine auf jQuery aufbauen Bibliothek die UI Elemente wie Slider, Tabs etc. und auch Datepicker zur Verfügung stellt.

Du bindest also die jQuery und die jQuery UI Bibliothek ein und hast mit wenigen Zeilen Code genau das was du möchtest. Ein Beispiel gibt es hier:

http://jqueryui.com/demos/datepicker/#date-range

Siehe auch http://www.jquery.com und http://www.jqueryui.com

Natürlich kannst du auch dein Skript erweitern. Indem du z.B. der getDate Funktion das ausgewählte Datum aus dem ersten Feld übergibst, damit diese das dann auch an DrawCalender weitergeben kann und der dann nur die Tage anzeigt die > als das übergebene sind. Aber warum das Rad neu erfinden wenn es das schon in fertiger und funktionierender Form gibt ?

Gruß Danny