{{indexmenu_n>20}}

====== 2) Date Input with JS Calendar ======

**A JS Calendar, which allows to enter a date into a form with an input check. This version also provides the manual input field if JS is swithed to off.** \\

\\
URL: [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - With conceptual loans from the Calendar element of Jason Moon

Quote: 
<file>
calpick.js

Creates a clickable button
behind the input fields on the with an Office-like  calendar 
the date can be selected


JavaScript DHMTL Calendar selection. Creates a clickable button
behind the input fields, the one with Office-like calendar
the date can be selected. The selection is in the appropriate
Field entered.

Inspired by and with conceptual borrowings from the calendar item
Jason Moon (webmaster@moonfam.net)

Version 0.6 - always the current version you will find at 
http://flocke.vssd.de/prog/code/js/calpick/

Copyright (C) 2005, 2006, 2007 Volker Siebert <flocke@vssd.de>
All rights reserved.

Lizenz: M.I.T. (see the attached file "README.txt").
</file>
\\

Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?f=16&t=19448&start=0|Datumeingabe für Formular-Contenttype]]

**Author:** [[http://planmatrix.de|K.Heermann]] (flip-flop) (04.11.09) \\
**CMS-Version:** >= V1.3.x  \\
**Version:** V1.0  //04.11.09// \\
\\ 

**Condition:**  -> [[http://www.phpwcms-docu.de/conf_inc_php_en.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: Path clearly entered,  text umlauts in UTF-8 corrected//



----

\\


===== Opportunities: =====

  * Be determined start to the week, Sunday or Monday
  * Date format DD.MM.YYYY possible
  * Ggraphics determined
  * Many values​​, such as font, size, color adjustable

The settings are made at the beginning of the JS file, or alternatively in the head of the page.

<code js|h Settings in JS file |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>


===== Frontend output =====

Simpe form with date input //(Date field is also available without JS)//: \\
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_fe_01_01.gif|}}

===== Operation: =====

The script generates a hidden field with registered result. This hidden field must be created with the same name in the CP..

For the field type is **text (special)** highly recommended, because we have the opportunity to catch incorrect entries:

**Text (special)** with the name entry **date_input** and these value entries::
<code html>
type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"
</code> 
//(ee picture below)//


The Field Name **date_input** we find in the script call back.  


**The template** for the calendar looks like this: 
<code html>
{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
<script>
//<![CDATA[
AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
//]]>
</script>
</code>
\\
At the end of the template field, the JS file included: 
<code php>
[PHP]
$GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.js');
[/PHP]
</code>
//(See picture below)//

The JS file is only for the form linked to, so do not be entered in the Page Template. //(see also: [[deutsch:technik:aufruf-interner-funktionen:skript-in-den-head-bereich]])//

The script is located in "template/inc_js/calpick/calpick.js"

\\

==== BE Form ====

{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput02_01.gif|}}

==== BE Template receiver ====

//(Pretty nonsensical example)//

{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput03_01.gif|}}

==== BE Template ====

{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_be_04_01.gif|}}

\\

===== BE Script Template  =====

==== Receiver template ====


<code htnl|h Receiver template |h>
Hallo Sir-Oblong-Fitz-Oblong,

Name:   {name}

E-Mail: {email}

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

Das war´s - Danke.
</code>

\\

==== Template ====


<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>

\\
**Since r411 please use**

<code html>
<!-- JS:
// calpick var
var _calImageAlign = "top";
var _calTopDistance = 5;
var _calImageStyle = "margin-top:" + _calTopDistance + "px";
-->
<!-- JS: {TEMPLATE}inc_js/calpick/calpick.js -->
</code>
instead of

<code html>
[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>