NAVIGATION
Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Die manuellen Eingabefelder werden nur bei eingeschaltetem JS generiert!!
Siehe dazu
Alternativen, die mit dieser hier gezeigten Grundtechnik auch funktionieren sollten:
Docu: –
Forum: Datumeingabe für Formular-Contenttype
Autor: K.Heermann (flip-flop) (30.10.09)
CMS-Version: >= V1.3.x
Version: V1.0 30.10.09
Bedingung: → /config/phpwcms/conf.inc.php
Bedingung: → Datum umstellen in /config/phpwcms/conf.template_default.inc.php, siehe Re: Datumeingabe für Formular-Contenttype
Download: calendardateinput.js (8.33 KiB, 237 downloads) Patch for german date form DD.MM.YYY
Update: V1.1 03.11.2009
Download: calendarDateInputX.js (10.48 KiB, 200 downloads) Patch for german date form DD.MM.YYY, Week number (DIN 1355 / ISO 8601) and many custom vars.
Die Einstellungen werden am Anfang der JS-Datei vorgenommen.
// Customizable variables ===================================================== var lang_de = 1; // +KH: Language German 0=[Month][Day][Year] and German Text 1=[Day][Month][Year] and English text var myStartDay = 1; // +KH: Calendar start day- default: Sunday = 0 | Monday = 1 var myWeekNo = 1; // +KH: Calendar week No: Off= 0 | On = 1 var DefaultDateFormat = 'DD.MM.YYYY'; // +KH: If no date format is supplied, this will be used instead var HideWait = 20; // Number of seconds before the calendar will disappear var Y2kPivotPoint = 76; // 2-digit years before this point will be created in the 21st century var UnselectedMonthText = ''; // Text to display in the 1st month list item when the date isn't required var spacer = 'img/leer.gif'; // gif transp. , important // Calender Head var ImageURL = 'img/dynCal/dynCalendar.gif'; // Calendar image var NextURL = 'img/dynCal/next.gif'; // Next image var PrevURL = 'img/dynCal/prev.gif'; // Prev image var TopRowBGColor = '#d4d0c8'; // bg Head var CalHeadTxt = 'Zeige aktuellen Monat'; // Calendar grid var DayBGColor = '#aaa'; // hover var CalBGColor = '#f0f0f0'; // grid var DaySelectTextColor = 'color:white;font-weight:bold;'; var DaySelectTextStyle = 'border:1px solid darkred; padding:0px;'; var DayTextColor = 'color:black;'; var FontSize = 12; // Calendar grid [px] var FontFamily = 'Tahoma'; var CalendarGridTd = 'letter-spacing:normal;line-height:normal;font-family:' + FontFamily + ',Sans-Serif;font-size:' + FontSize + 'px;'; // Calendar pull down var CalendarPullDownSelect = 'letter-spacing:.06em; font-family:Verdana,Sans-Serif; font-size:12px;'; var CalendarPullDownInput = 'letter-spacing:.06em; font-family:Verdana,Sans-Serif; font-size:12px;'; var CellWidth = 25; // Cell width of Day No Cell var WeekNoCellWidth = 30; // +KH: Cell width of Calendar week if available var CellHeight = 18; // Height of all cells var WeekNoCellBorder = 'border-right:1px solid #ccc;color:#666;background:#f5f5f5;'; // Style for week Number var ClickToSelectTxt = 'Klick für die Anzeige des '; // var ClickToSelectTxt = 'Click to select today'; var ClickToViewTxt = 'Klick: Anzeige des '; // var ClickToViewTxt = 'Click to view '; var ClickTxt = 'Klick: '; // var ClickToViewTxt = 'Click: '; var CalHideTxt = 'Kalender verstecken'; // var CalHideTxt = 'Hide Calendar'; var CalShowTxt = 'Kalender anzeigen'; // var CalShowTxt = 'Show Calendar'; var TodayTxt = 'heutigen Tag'; // var TodayTxt = 'today'; if (myStartDay) var WeekDays = new Array('Mo','Di','Mi','Do','Fr','Sa','So'); else var WeekDays = new Array('So','Mo','Di','Mi','Do','Fr','Sa'); if (lang_de) var myWeekNoTxt = 'KW'; // Calendar week else var myWeekNoTxt = 'CW'; if (lang_de) var MonthNames = new Array('Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'); else var MonthNames = new Array('January','February','March','April','May','June','July','August','September','October','November','December'); // Customizable variables ====END==============================================
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] <script>DateInput('date_input', true, 'DD.MM.YYYY')</script>
Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden:
[PHP] $GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.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/calendarDateInput/calendarDateInputX.js”
Hallo Sir-Oblong-Fitz-Oblong, Name: {name} E-Mail: {email} Ergänzung: ------------------------------ {ergaenzung} ------------------------------ Das Feld Datum: {date_input} ------------------------------ Das war´s - Danke.
<div style="width:610px; margin: 0; padding:10px; border-top:1px dotted #bbb; border-bottom:1px dotted #bbb; background: #f0f0f0;"> {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] <script>DateInput('date_input', true, 'DD.MM.YYYY')</script> [BR][BR] {ERROR:nospam}[B]{LABEL:nospam}[/B][BR]{nospam}[BR][BR] {submitIt} </div> [PHP] $GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js'); [/PHP]