{{indexmenu_n>20}}

====== 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: [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon

Zitat: 
<file>
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").
</file>
\\

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) (04.11.09) \\
**CMS-Version:** >= V1.3.x  \\
**Version:** V1.0  //04.11.09// \\
\\ 

**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_cntPHP_rt']   = 1;

\\

----
**Download:** {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick.zip|calpick.zip}} //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.

<code js|h Einstellungen in der JS Datei |h>
// 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&auml;rz', 'April', 'Mai', 'Juni', 'Juli',
                                   'August', 'September', 'Oktober', 'November', 'Dezember');
var _calDayName        = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');

var _calStrOpenClose   = 'Klicken &ouml;ffnet den Kalender';
var _calStrPrevMonth   = 'Gehe einen Monat zur&uuml;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==============================================
</code>


===== Frontendausgabe =====

Einfaches Formular mit Datumeingabe //(Datumfeld erscheint auch ohne JS)//: \\
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_fe_01_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:
<code html>
type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"
</code> 
//(Siehe Bild unten)//


Den Feldnamen **date_input** finden wir im Skriptaufruf wieder.  


**Die Vorlage** sieht für den Kalender so aus: 
<code html>
{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
<script>
//<![CDATA[
AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
//]]>
</script>
</code>
\\
Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden: 
<code php>
[PHP]
$GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.js');
[/PHP]
</code>
//(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/calpick/calpick.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:calpick_be_04_01.gif|}}

\\

===== BE Skript Vorlage  =====

==== Empfänger-Vorlage ====


<code htnl|h Empfänger-Vorlage |h>
Hallo Sir-Oblong-Fitz-Oblong,

Name:   {name}

E-Mail: {email}

Ergänzung: 
------------------------------
{ergaenzung}
------------------------------
Das Feld Datum: {date_input}
------------------------------

Das war´s - Danke.
</code>

\\
==== Vorlage ====


<code html|h Vorlage |h>
<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]
</code>