{{indexmenu_n>10}}
====== 1) Datumeing. mit JS Kalender ======
**Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Die manuellen Eingabefelder werden nur bei eingeschaltetem JS generiert!!** \\
\\
Siehe dazu
* [[http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm#at|Jason's Date Input Calendar]]
* [[http://calendar.moonscript.com/dateinput.cfm|Jason Moon's Fool-Proof Date Input Calendar Script]]
Alternativen, die mit dieser hier gezeigten Grundtechnik auch funktionieren sollten:
* [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon
* [[http://dev.base86.com/scripts/datepicker_calendar_eightysix.html|Calender Eightysix]] //(Ajax and Mootools v1.2.3)//
\\
Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?f=16&t=19448&start=0|Datumeingabe für Formular-Contenttype]]
**Autor:** [[http://planmatrix.de|K.Heermann]] (flip-flop) (30.10.09) \\
**CMS-Version:** >= V1.3.x \\
**Version:** V1.0 //30.10.09// \\
\\
----
**Bedingung:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
* $phpwcms['allow_cntPHP_rt'] = 1;
**Bedingung:** -> Datum umstellen in %%/config/phpwcms/conf.template_default.inc.php%%, siehe [[http://forum.phpwcms.org/viewtopic.php?p=132838#p132838|Re: Datumeingabe für Formular-Contenttype]]\\
* %%$template_default['date']['short'] = 'd.m.Y';%%
\\
----
Download: {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput.zip|calendardateinput.js}} //Patch for german date form DD.MM.YYY//
**Update: V1.1 03.11.2009** \\
**Download:** {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinputX.zip|calendarDateInputX.js}} //Patch for german date form DD.MM.YYY, Week number (DIN 1355 / ISO 8601) and many custom vars.//
----
\\
===== Möglichkeiten: =====
* Sprache nach deutsch umstellbar (Texte und z.B. Formfeld: **[Tag][Monat][Jahr]** anstatt [**Monat][Tag][Jahr]**
* Wochenstarttag bestimmbar, Sonntag oder Montag
* Ausgabe Kalenderwoche optional
* 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.
// 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==============================================
===== Frontendausgabe =====
Einfaches Formular mit Datumeingabe: \\
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput_fe01_01.gif|}}
===== 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]
\\
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: [[deutsch:technik:aufruf-interner-funktionen:skript-in-den-head-bereich]])//
Das Skript liegt in "template/inc_js/calendarDateInput/calendarDateInputX.js"
\\
==== BE Formular ====
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput02_01.gif|}}
==== BE Vorlage Empfänger ====
//(Ziemlich unsinniges Beispiel)//
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput03_01.gif|}}
==== BE Vorlage ====
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput04_01.gif|}}
\\
===== 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 ====
{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][BR]
{ERROR:nospam}[B]{LABEL:nospam}[/B][BR]{nospam}[BR][BR]
{submitIt}
[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]