jQuery datePicker

[tomathen]

Hallo und einen schönen Sonntag,
ich habe lange nach einem datePicker gesucht, der bei zwei Feldern (von - bis) eine Verbindung zwischen dem Feld "von" zum Feld "bis" herstellt. Soll heißen, wie bei vielen Buchungsseiten kann nach Auswahl des "von" Datums das "bis" Datum nicht mehr vor dem "von" Datum liegen und auch nicht gewählt werden.
Ich habe oft das Problem, dass ich Anfragen erhalte die z.B. so aussehen, von 10.07 bis 25.01, weil der User nicht merkt, dass er beim "bis" Datum wieder im aktuellen Monat ist.

Lange Rede kurzer Sinn, ich habe hier einen solchen picker gefunden

http://2008.kelvinluck.com/assets/jquery/datePicker/v2/demo/

Das wäre dann in der Liste der Start and end date picker.

Leider bin ich völlig überfordert diesen in mein NOF Formular einzubinden.

Vielleicht kann mir bei Gelegenheit jemand etwas auf die Sprünge helfen??

Herzlichen Dank
Tom

[nettesekel]

Und welche der gefühlten 1000 Demos auf der Seite entspricht jener die dein Herz begehrt?

[tomathen]

Man nettesekel, das hatte ich doch extra geschrieben!  

Das wäre dann in der Liste der Start and end date picker.

[nettesekel]

Und warum sagst du das ner alten, kranken Frau nicht gleich? 

[nettesekel]

Also, ich habe das jetzt nicht ausprobiert, aber mal in den Quältext gesehen.

Demnach musst du dir dort die Dateien

date.js
jquery.datePicker.js
datePicker.css

herunterladen und in deiner Seite zwischen den Headtags verlinken... ein wenig Code kommt auch gleich noch mit dazu. Das Ganze sollte dann so aussehen. (Pfade zu den Scripts musst du entsprechend deiner Publizierungsstruktur anpassen. Und natürlich die Scripts auf den Server laden.

Code: HTML5

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
2. <script type="text/javascript" src="./date.js"></script>
3. <script type="text/javascript" src="./jquery.datePicker.js"></script>
4. <link rel="stylesheet" type="text/css" media="screen" href="./datePicker.css">
5.  
6.                 <script type="text/javascript" charset="utf-8">
7.                         $(function()
8.             {
9.                                 $('.date-pick').datePicker()
10.                                 $('#start-date').bind(
11.                                         'dpClosed',
12.                                         function(e, selectedDates)
13.                                         {
14.                                                 var d = selectedDates[0];
15.                                                 if (d) {
16.                                                         d = new Date(d);
17.                                                         $('#end-date').dpSetStartDate(d.addDays(1).asString());
18.                                                 }
19.                                         }
20.                                 );
21.                                 $('#end-date').bind(
22.                                         'dpClosed',
23.                                         function(e, selectedDates)
24.                                         {
25.                                                 var d = selectedDates[0];
26.                                                 if (d) {
27.                                                         d = new Date(d);
28.                                                         $('#start-date').dpSetEndDate(d.addDays(-1).asString());
29.                                                 }
30.                                         }
31.                                 );
32.             });
33.                 </script>

Dann bastelst du dir ein kleines Kalender-Icon (calendar.png) und fügst der CSS-Datei folgenden Code hinzu. Das Icon muss natürlich da liegen, wo du es in der CSS-Datei angibst.

Code: HTML5

1. /* located in demo.css and creates a little calendar icon
2.  * instead of a text link for "Choose date"
3.  */
4. a.dp-choose-date {
5.         float: left;
6.         width: 16px;
7.         height: 16px;
8.         padding: 0;
9.         margin: 5px 3px 0;
10.         display: block;
11.         text-indent: -2000px;
12.         overflow: hidden;
13.         background: url(calendar.png) no-repeat;
14. }
15. a.dp-choose-date.dp-disabled {
16.         background-position: 0 -20px;
17.         cursor: default;
18. }
19. /* makes the input field shorter once the date picker code
20.  * has run (to allow space for the calendar icon
21.  */
22. input.dp-applied {
23.         width: 140px;
24.         float: left;
25. }

Zum guten Schluss fügst du deine Formularfelder, ein nennst das erste Feld "start-date" und gibst über den HTML-Button in den Tag folgenden Codeschnipsel ein

Code: HTML5

1. id="start-date" class="date-pick"

das zweite Feld muss "end-date" heißen und mit folgendem Code gespickt werden

Code: HTML5

1. id="end-date" class="date-pick"

Das sollte es gewesen sein. Wie gesagt, nicht ausprobiert nur mal so aus dem Kaffeesatz...

[tomathen]

Super nettesekel  Vielen Dank für deine Mühe 
Das werde ich dann einfach mal ausprobieren!!!!

[tomathen]

Vielen Daaaaaank nettesekel, hat hervorragend geklappt!!!
Thanks again!