NAVIGATION
This is an old revision of the document!
Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Diese Variante stellt auch das manelle Eingabefeld mit 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, dass 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
Download: calpick.zip (11.11 KiB, 223 downloads) Patch for phpwcms
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]