Oft wird gefragt, wie man im Form CP ein Datumsfeld (mit Popup-Kalender) erstellt werden kann. Das ist ganz einfach mit jquery und ohne phpwcms-Hack realisierbar.
Hier ein Beispiel (Bitte das Formular nicht abschicken, denn die Website ist live und unsere Redakteurin wird die Krise schieben, wenn sie mit Testmails zugemüllt wird);
http://www.asiabeat.net/ (auf den Link in "Get A Listing" klicken)
1. jdPicker runterladen: http://jdpicker.p4ul.info
2. CSS-Datei und dazugehörige Grafiken ins Template importieren
3. jquery.jdpicker.js speichern unter: template/inc_js/
4. Link zum Skript im Template einbauen:
ACHTUNG: baut man das Skript im <head>-Bereich des Templates ein, wird es im Frontend vor dem JQuery-Core geladen. Das Datum-Modul funktioniert dann nicht. Deshalb gleich an erster Stelle im Bereich "main" einfügen.
Code: Select all
<script type ="text/javascript" src="template/inc_js/jquery.jdpicker.js"></script>5. CP Form: text (single line) | name: your_input | class: jdpicker
6: Speichern und testen.
Varianten:
Für ein zweites Datumsfeld (in meinem Beispiel "Event End Date"), einfach ein zweites Formularfeld erstellen:
text (single line) | name: your_input_2 | class: jdpicker
Möchte man anstelle eines Popup-Kalender einen "statischen Kalender" ohne Eingabefeld haben, einfach einen anderen Feldtyp wählen:
Kalender 1: hidden | name: your_input | class: jdpicker
Kalender 2: hidden | name: your_input_2 | class: jdpicker
Für Konfigurationsmöglichkeiten, http://jdpicker.p4ul.info besuchen. Jedoch eine kurze Erklärung wie ich meine zwei Felder konfiguriert habe:
Standardmässig wird das Datum so ausgegeben: YYYY/mm/dd
Da ich jedoch das Datum von phpwcms in die MySQL-Datenbank schreiben lasse, wird dieses Format benötigt: YYYY-mm-dd
Und so wirds gemacht:
1. jquery.jdpicker.js in einem Editor öffnen
2. Zeile 58 abändern:
Code: Select all
date_format: "YYYY-mm-dd"Code: Select all
default: Code: Select all
case "YYYY-mm-dd":
default:
this.reg = new RegExp(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/);
this.date_decode = "new Date(matches[1], parseInt(matches[2]-1), matches[3]);";
this.date_encode = 'date.getFullYear() + "-" + this.strpad(date.getMonth()+1) + "-" + this.strpad(date.getDate());';
this.date_encode_s = 'this.strpad(date.getMonth()+1) + "/" + this.strpad(date.getDate());';
break;
Zeilen 45 bis 58 sind für die Konfiguration zuständig. Erklärung dazu wie schon erwähnt auf http://jdpicker.p4ul.info
Hats geklappt?
Santscho
zu gunsten des Users.