Entwicklung - Javascript/Ajax - Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1

Javascript/Ajax: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1

Seite 1/2

manu (49)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1

Mittwoch, 11. Juni 2008 21:28

  • 6.0/6 Votes: 1
6.0/6 Votes: 1
Seit einiger Zeit benutze ich für verschiedene Projekte den Datepicker von Sven Wappler, der wiederum auf dem Datepicker von Eulerian Studios fußt.

Sinn eines Datepickers ist es, statt zu einer manuellen Datumseingabe aufzufordern einen Kalender anzuzeigen, über den man sein Datum per Klick wählen kann.

Der Datepicker von Sven ist ein wenig hübscher und besser im Handling als das Original, allerdings ist er nicht mit der aktuellen Prototype- bzw. Scriptaculous-Version (1.6.0.1 bzw. 1.8.1) kompatibel, so dass ich die im Moment aktuelle Version von Eulerian folgendermaßen angepaßt habe:



Der Datepicker ist unobtrusive (unaufdringlich,dezent), was bedeutet, dass die entsprechende Funktionalität erst nach dem Laden des Dokuments (onload) dynamisch hinzugefügt wird (sofern Javascript akiviert ist).

Das Einbinden ist recht trivial:
Im <head> der Webseite werden die Javascript-Dateien von Prototype, Scriptaculous und dem Datepicker eingebunden; dazu kommt noch die datepicker.css.

HTML4STRICT: (Auswählen)<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>

<link href="css/datepicker.css" rel="stylesheet" type="text/css" />


Im <body> folgt dann das Input-Feld, an das der Datepicker gehangen wird:

HTML4STRICT: (Auswählen)<input type="text" id="date" name="date" class="date" />

Mit diesem kurzen Javascript-Schnipsel wird nun an das Element mit der ID date der Datepicker gehangen:

HTML4STRICT: (Auswählen)<script type="text/javascript">
    /*<[CDATA[*/
    var datepicker    = new DatePicker({
    relative    : 'date',
    language    : 'de'
    });
    /*]]>
*/
</script>


Möchte man mehrere Datepicker einbinden, würde der Code zum Einbinden schnell unübersichtlich, daher empfiehlt sich dieser kleine Javascript-Schnipsel, der alle Objekte mit dem Datepicker versieht, die die css-Klasse 'date' haben (Man sollte natürlich allen Objekten eindeutige IDs zuweisen):

JAVASCRIPT: (Auswählen)function initDatepickers() {
    $$("*").findAll(function(node) {
        return Element.hasClassName(node,'date');
    }).each(function(node) {
        datepickers[node.id] = new DatePicker({
            relative             : node.id,
            language             : 'de',
            enableCloseEffect : false,
            enableShowEffect     : true,
            closeEffect            : 'squish',
            showEffect            : 'appear'
        });
        datepickers[node.id].setDateFormat([ "dd", "mm", "yyyy" ], ".");
    });
}
Event.observe(window, 'load', initDatepickers, false);


Diese Funktion befindet sich neben Prototype 1.6.0.1, Scriptaculous 1.8.1, der datepicker.js, der datepicker.css den Grafiken und der Beispiel-Datei (index.html) im Download-Paket als datepicker.init.js und kann im <head> der Seite geladen werden.

Hier steht der Datepicker zum Download bereit:


Vielen Dank an Sven und die Eulerian Studios!
Signatur:\\\"I have not failed. I\\\'ve just found 10,000 ways that won\\\'t work.\\\" - Thomas Alva Edison (1847-1931)

sgruendel (50)

sgruendel

31.07.2008 09:51

Eisingen

  • 1 Postings, noch 49 bis zum nächsten Level (50)

Postings: 1

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Donnerstag, 31. Juli 2008 10:14

Hi,

vielen Dank, genau das habe ich gesucht.  Ich habe noch einen Fehler bei den Sprachen festgestellt: Spanisch ist als 'sp' hinterlegt, der ISO-Code ist aber 'es'.  Einfach die drei Array-Indizes in datepicker.js entsprechend korrigieren, dann geht's!


Viele Grüße,
Stefan

manu (49)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@sgruendel)

Donnerstag, 31. Juli 2008 10:35

Hallo Stefan,

danke für den Hinweis, spanisch hatte ich noch nicht gecheckt...
Signatur:\"I have not failed. I\'ve just found 10,000 ways that won\'t work.\" - Thomas Alva Edison (1847-1931)

JBassen (30)

JBassen

30.07.2009 16:22

  • 3 Postings, noch 47 bis zum nächsten Level (50)

Postings: 3

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Donnerstag, 30. Juli 2009 16:32

Hi manu,

bin grade über den Datepicker gestoplert. Super Sache!
Leider ist mir beim Testen und Ausprobieren aufgefallen, dass der Datepicker im IE8 nicht mehr richtig dargestellt wird.

Vielleicht könntest du eine überarbeitete Version online stellen?

Viele Grüße!

manu (49)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@JBassen)

Donnerstag, 30. Juli 2009 17:26

Hallo JBassen,

wow, erst 9 und schon mit dem Prototpe-Frmework beschäftigt? *scnr*
Das dürfte von einem Bug in Prototype selbst her rühren. Ich habe hier was gefunden.

Installiere doch mal die aktuellste Prototype-Version und poste mal, obs damit funktioniert...

Gruß,
Manu
Signatur:\"I have not failed. I\'ve just found 10,000 ways that won\'t work.\" - Thomas Alva Edison (1847-1931)

JBassen (30)

JBassen

30.07.2009 16:22

  • 3 Postings, noch 47 bis zum nächsten Level (50)

Postings: 3

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Freitag, 31. Juli 2009 10:12

Hey manu,

nene.. Bin schon ein paar Jahre älter. Hatte mich bislang nur noch nicht ums Profil gekümmert.

Ich habe die aktuellste Version vom Prototype heruntergeladen und eingebuden. Das Resultat ist leider unverändert. Das Problem tritt auch nur im IE8, wenn ich diesen in der Kompatibilitätsansicht laufen lasse funktioniert es wunderbar. Den Link, den du gepostet hast, verstehe ich leider nicht so ganz..

Desweiteren stellt sich mir die Frage, ob es irgendwie mölich ist das nur ein bestimmter Zeitraum im Kalender ausgewählt werden kann. Dafür gibts zZ noch keine Möglichkeit oder?

Gruß
Editiert:Freitag, 31. Juli 2009 10:15

manu (49)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@JBassen)

Freitag, 31. Juli 2009 10:25

Morgen,


ja, war nicht so ganz ernst zu nehmen...

Ich hab leider gerade nicht so viel Zeit, mich mit Protoype auseinander zu setzen - daher würde ich vorschlagen, solange einfach den IE8 in den Zwangs-Kompatibilitätsmodus zu setzen. Für den IE8 gibt es dafür extra ein Meta-Tag:
HTML4STRICT: (Auswählen)<meta http-equiv="X-UA-Compatible" content="IE=7" />
Zu Deiner zweiten Frage: ich habe dazu in einem Projekt einfach 2 Datepicker eingebunden: Start- und Enddatum... Vll. kommt das ja auch für Dich in Frage.

Gruß,
Manu

Signatur:\"I have not failed. I\'ve just found 10,000 ways that won\'t work.\" - Thomas Alva Edison (1847-1931)

JBassen (30)

JBassen

30.07.2009 16:22

  • 3 Postings, noch 47 bis zum nächsten Level (50)

Postings: 3

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Freitag, 31. Juli 2009 14:24

Ok, werde dann vorrübergehend den Kompatibilitätsmodus erzwigen. Wäre super, wenn du bei Gelegenheit trotzdem nochmal drüber schauen könntest und es vllt. kompatibel machst ;)..

Mit 2 Datepickern klappt das leider nicht. Ich habe zwei Datumswerte die ich an den Kalender übergeben würde. Der Kalender soll dann alle Tage zwischen den beiden Werten zulassen und alle anderen Tage deaktivieren, bzw. nicht auswählbar machen..

Gruß Jan

manu (49)

manu

03.09.2002 23:07

Aachen

  • 876 Postings, noch 24 bis zum nächsten Level (900)

Postings: 876

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@JBassen)

Freitag, 31. Juli 2009 15:26

Ich werds mir mal anschauen, aber kann im Moment noch nichts versprechen...

Aber eine interessante Aufgabenstellung
Ich hoffe, davon zu hören ;D

Gruß,
Manu
Signatur:\"I have not failed. I\'ve just found 10,000 ways that won\'t work.\" - Thomas Alva Edison (1847-1931)

ndorphin

ndorphin

29.08.2009 02:30

  • 1 Postings, noch 49 bis zum nächsten Level (50)

Postings: 1

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Samstag, 29. August 2009 02:37

Für das Dartsellungsproblem im IE8 gibts folgenden Workaround (vielleicht gehts auch noch anders):

Folgende Funktion erstellen, z.B. in der datepicker.js oder sonstwo in einer eingebunden JS-Datei:

function msieversion()
{
   var ua = window.navigator.userAgent
   var msie = ua.indexOf ( "MSIE " )
   if ( msie > 0 )      // If Internet Explorer, return version number
      return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
   else                 // If another browser, return 0
      return 0
}

folgenden Code in der datepicker.js Datei suchen und ändern (Änderung fett markiert):

    /* hack for buggy form elements layering in IE */
    _wrap_in_iframe : function ( content ) {
        return    ( Prototype.Browser.IE && msieversion() < 8) ? " ....
Editiert:Samstag, 29. August 2009 02:43

str

str

24.02.2011 13:01

  • 5 Postings, noch 45 bis zum nächsten Level (50)

Postings: 5

Re: Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1 (@manu)

Donnerstag, 24. Februar 2011 13:16

Der Thread ist zwar schon etwas älter, aber vielleicht interessiert es ja noch jemanden. Ich habe
  • einen Bug im disableFutureDate behoben
  • neue Eigenschaften setPastDateLimit und setFutureDateLimit hinzugefügt, die exaktes einschränken des möglichen Zeitraums erlauben
  • das ganze auf das aktuelle Scriptaculous 1.9.0 aktualisiert, was den IE8-Bug behebt

Hier könnt ihr es downloaden
Bookmark setzen!:Zu Google Bookmark hinzufügen.Zu bloglines hinzufügen.Zu Newsgator hinzufügen.Zu FURL hinzufügen.Zu DIGG hinzufügen.Zu Webnews hinzufügen.Zu Netscape hinzufügen.Zu Yahoo MyWeb hinzufügen.Zu spurl.net hinzufügen.Zu diigo hinzufügen.Zu Newsvine hinzufügen.Zu del.icio.us hinzufügen.Zu SIMPIFY hinzufügen.Zu Mister Wong hinzufügen.Zu Linkarena hinzufügen.Zu isio.de hinzufügen.Zu Oneview hinzufügen.Zu yigg.de hinzufügen.Zu reddit hinzufügen.Zu StumbleUpon hinzufügen.Zu Slashdot hinzufügen.Zu Blinklist hinzufügen.Zu Technorati hinzufügen.Zu Blogmarks hinzufügen.Zu Blinkbits hinzufügen.Zu ma.gnolia hinzufügen.Zu smarking.com hinzufügen.Zu Netvouz hinzufügen.Zu co.mments hinzufügen.Zu Connotea hinzufügen.Zu de.lirio.us hinzufügen.
Seite 1/2

Specials

Bytefresser Specials: Anno 1404

Umfrage

Welches ist Dein Lieblings-Anno?

(40 Stimmen)

1. Ganz klar: Anno 1800!
2. Anno 2205
3. Anno 2070
4. Anno 1404
5. Anno 1701
6. Anno 1503
7. Anno 1602
8. Anno Online

Benutzer-Counter

Besucher gesamt: 1.182.353
Besucher heute: 5
Besucher gestern: 61
Max. Besucher/Tag: 900
Gerade online: 8
Max. online: 77
Seiten gesamt: 20.680.337
Aufrufe diese Seite: 14.661

Tag-Cloud

  studios     freitag     html4strict     scriptaculous     prototype     bytefresser     auswählen     datepicker     kalender     samstag     kompatibilit     postings     funktion     einbinden     @jbassen     signatur     thomas     entwicklung     edison     aachen     javascript     moment     eulerian     stefan     level     version     donnerstag     @sgruendel     editiert     @manu