NAVIGATION
Table of Contents
2) Datumeing. mit JS Kalender
Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Diese Variante stellt auch das manuelle Eingabefeld bei ausgeschaltetem JS bereit.
URL: calpick.js - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon
Zitat:
calpick.js JavaScript DHMTL Kalenderauswahl. Erzeugt einen klickbaren Button hinter Eingabefeldern, über die mit einem Office-ähnlichen Kalender das Datum ausgewählt werden kann, das dann in das entsprechende Eingabefeld eingetragen wird. Inspiriert vom und mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon (webmaster@moonfam.net) Version 0.6 - die aktuelle Version gibt's immer unter http://flocke.vssd.de/prog/code/js/calpick/ Copyright (C) 2005, 2006, 2007 Volker Siebert <flocke@vssd.de> Alle Rechte vorbehalten. Lizenz: M.I.T. (siehe die beiliegende Datei "README.txt").
Docu: –
Forum: Datumeingabe für Formular-Contenttype
Autor: K.Heermann (flip-flop) (04.11.09)
CMS-Version: >= V1.3.x
Version: V1.0 04.11.09
Bedingung: → /config/phpwcms/conf.inc.php
- $phpwcms['allow_cntPHP_rt'] = 1;
Download: calpick.zip (11.11 KiB, 183 downloads) Patch for phpwcms: Pfad fest eingetragen, Umlaute im text für UTF-8 korrigiert
Möglichkeiten:
- Wochenstarttag bestimmbar, Sonntag oder Montag
- Datumsformat DD.MM.YYYY möglich
- Grafiken bestimmbar
- Viele Werte wie Font, Größe, Farben einstellbar
Die Einstellungen werden am Anfang der JS-Datei vorgenommen oder alternativ im head der Seite.
// Customizable variables ===================================================== var _calDateFormat = 'DMY'; // order of date components (this is fixed! you cannot change it here!) var _calDateSeparator = '.'; // date component separator var _calDateYearDigits = 4; // number of year digits var _calDateFirstDay = 1; // first day of week (0 = sunday, 1 = monday) var _calMonthName = new Array('Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'); var _calDayName = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'); var _calStrOpenClose = 'Klicken öffnet den Kalender'; var _calStrPrevMonth = 'Gehe einen Monat zurück'; var _calStrCurMonth = 'Gehe zum aktuellen Monat'; var _calStrNextMonth = 'Gehe einen Monat weiter'; // Display & behaviour settings if (typeof window._calImageAlign == 'undefined') var _calImageAlign = window._calButtonAlign ? window._calButtonAlign : 'bottom'; if (typeof window._calImageStyle == 'undefined') var _calImageStyle = ''; if (typeof window._calFontFace == 'undefined') var _calFontFace = 'Tahoma';// font to use, separate alternatives by "," if (typeof window._calFontSize == 'undefined') var _calFontSize = 11; // font size in px if (typeof window._calCellWidth == 'undefined') var _calCellWidth = 22; // cell width in px if (typeof window._calCellHeight == 'undefined') var _calCellHeight = 18; // cell height in px if (typeof window._calBorderAdj == 'undefined') var _calBorderAdj = 1; // set to 1 if border increases width/height (CSS for HTML >=4.01) if (typeof window._calLeftDistance == 'undefined') var _calLeftDistance = 4; // horizontal offset from calendar picture if (typeof window._calTopDistance == 'undefined') var _calTopDistance = 4; // vertical offset from top-of-line if (typeof window._calHideDelay == 'undefined') var _calHideDelay = 10000; // 1500; // delay before auto-hide (ms) if (typeof window._calColorWindow == 'undefined') var _calColorWindow = 'window'; if (typeof window._calColorWindowText == 'undefined') var _calColorWindowText = 'windowtext'; if (typeof window._calColorGrayText == 'undefined') var _calColorGrayText = 'buttonface'; if (typeof window._calColorWindowFrame == 'undefined') var _calColorWindowFrame = 'windowframe'; if (typeof window._calColorButtonFace == 'undefined') var _calColorButtonFace = 'buttonface'; if (typeof window._calColorButtonText == 'undefined') var _calColorButtonText = 'buttontext'; if (typeof window._calColorButtonLight == 'undefined') var _calColorButtonLight = 'buttonhighlight'; if (typeof window._calColorButtonShadow == 'undefined') var _calColorButtonShadow = 'buttonshadow'; if (typeof window._calColorSelected == 'undefined') var _calColorSelected = 'highlight'; if (typeof window._calColorSelectedText == 'undefined') var _calColorSelectedText = 'highlighttext'; if (typeof window._calColorCurrentFrame == 'undefined') var _calColorCurrentFrame = '#CC0000'; // Local constants & variables if (typeof window._calPickDir == 'undefined') var _calPickDir = 'template/inc_js/calpick/'; // +KH for phpwcms var _calCalImageSrc = 'calbutton.gif'; var _calPrevImageSrc = 'calprev.gif'; var _calNextImageSrc = 'calnext.gif'; var _calClrImageSrc = 'calclear.gif'; var _calDaysPerMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var _calGenId = 0; var _calActiveObject = null; var _calHiddenBoxes = new Array(); // Calculated styles var _calTotalWidth = 2 + 7 * _calCellWidth; var _calTotalHeight = 2 + 8 * _calCellHeight; var _calAdjCellWidth = _calCellWidth - 2 * _calBorderAdj; var _calAdjCellHeight = _calCellHeight - 2 * _calBorderAdj; var _calStyleFont = 'font-family:' + _calFontFace + ',sans-serif; ' + 'font-size:' + _calFontSize + 'px; ' + 'cursor:default; text-align:center; '; // Customizable variables ====END==============================================
Frontendausgabe
Einfaches Formular mit Datumeingabe (Datumfeld erscheint auch ohne JS):
Arbeitsweise:
Das Skript generiert ein verstecktes Feld mit eingetragenem Ergebnis, dieses versteckte Feld muss im CP mit identischem Namen angelegt werden.
Für den Feldtyp wird Text (spezial) dringend empfohlen, da wir hier die Möglichkeit haben Falscheingaben abzufangen:
Text (spezial) mit dem Namenseintrag date_input und diesen Werteinträgen:
type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"
(Siehe Bild unten)
Den Feldnamen date_input finden wir im Skriptaufruf wieder.
Die Vorlage sieht für den Kalender so aus:
{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
<script>
//<![CDATA[
AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
//]]>
</script>
Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden:
[PHP] $GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.js'); [/PHP]
(Siehe Bild unten)
Die JS-Datei wird nur für das Formular hinzugelinkt, also nicht fest im Seiten-Template eingetragen. (siehe hierzu auch: Skript in den <head> Bereich)
Das Skript liegt in “template/inc_js/calpick/calpick.js”
BE Formular
BE Vorlage Empfänger
(Ziemlich unsinniges Beispiel)
BE Vorlage
BE Skript Vorlage
Empfänger-Vorlage
Hallo Sir-Oblong-Fitz-Oblong,
Name: {name}
E-Mail: {email}
Ergänzung:
------------------------------
{ergaenzung}
------------------------------
Das Feld Datum: {date_input}
------------------------------
Das war´s - Danke.
Vorlage
<div style="width:610px; margin: 0; padding:10px; border-top:1px dotted #bbb; border-bottom:1px dotted #bbb; background: #f6f6f6;"> {ERROR:name}[B]{LABEL:name}[/B][BR]{name}[BR][BR] {ERROR:email}[B]{LABEL:email}[/B][BR]{email}[BR][BR] {ERROR:ergaenzung}[B]{LABEL:ergaenzung}[/B][BR]{ergaenzung}[BR][BR] {ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input} <script> //<![CDATA[ AttachCalendarButton(document.phpwcmsForm{CPID}.date_input); //]]> </script> [BR][BR] {ERROR:nospam}[B]{LABEL:nospam}[/B][BR]{nospam}[BR][BR] {submitIt} </div> [PHP] $GLOBALS['block']['custom_htmlhead']['calpickVar'] = '<script type="text/javascript">'.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= '//<![CDATA['.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= 'var _calImageAlign = "top";'.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= 'var _calTopDistance = 5;'.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= 'var _calImageStyle = "margin-top:" + _calTopDistance + "px";'.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= '//]]>'.LF; $GLOBALS['block']['custom_htmlhead']['calpickVar'].= '</script>'.LF; $GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.js'); [/PHP]
