{{indexmenu_n>10}}
====== 1) Date Input with JS Calendar ======
**A JS Calendar, which allows to enter a date into a form with an input check. The manual input fields are generated only when the JS in on!** \\
\\
See
* [[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]]
Alternatives that should work with this basic technique also shown here:
* [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - With conceptual loans from the Calendar element of 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]]
**Author:** [[http://planmatrix.de|K.Heermann]] (flip-flop) (30.10.09) \\
**CMS-Version:** >= V1.3.x \\
**Version:** V1.0 //30.10.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: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.//
----
\\
===== Opportunities: =====
* For German language adjustable (eg, text and form field: **[Tag][Monat][Jahr]** instead of [**Monat][Tag][Jahr]**
* Determine start to the week, Sunday or Monday
* Output of the calendar week option
* Date format DD.MM.YYYY possible
* graphics determined
* Many values, such as font, size, color adjustable
The settings are made at the beginning of the js file.
// 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==============================================
\\
===== Frontend output =====
Simple form with date input: \\
{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput_fe01_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:
type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"
//(See picture below)//
The Field Name **date_input** we find in the script call back.
**The template** for the calendar looks like this:
{ERROR:date_input}[B]{LABEL:date_input}[/B]
\\
At the end of the template field, the JS file is included:
[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]
//(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/calendarDateInput/calendarDateInputX.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:calendardateinput04_01.gif|}}
\\
===== BE Script Template =====
==== Receiver template ====
Hallo Sir-Oblong-Fitz-Oblong,
Name: {name}
E-Mail: {email}
Ergänzung:
------------------------------
{ergaenzung}
------------------------------
Das Feld Datum: {date_input}
------------------------------
Das war´s - Danke.
\\
==== Template ====
{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]
\\
**Since r411 please use**
[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]