NAVIGATION
Table of Contents
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: calpick.js - With conceptual loans from the Calendar element of Jason Moon
Quote:
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").
Docu: –
Forum: Datumeingabe für Formular-Contenttype
Author: K.Heermann (flip-flop) (04.11.09)
CMS-Version: >= V1.3.x
Version: V1.0 04.11.09
Condition: → /config/phpwcms/conf.inc.php
- $phpwcms['allow_cntPHP_rt'] = 1;
Download: calpick.zip (11.11 KiB, 183 downloads) 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.
// 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ärz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'); var _calDayName = new Array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'); var _calStrOpenClose = 'Klicken öffnet den Kalender'; var _calStrPrevMonth = 'Gehe einen Monat zurü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==============================================
Frontend output
Simpe form with date input (Date field is also available without JS):
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"
(ee 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][BR]{date_input}
<script>
//<![CDATA[
AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
//]]>
</script>
At the end of the template field, the JS file included:
[PHP] $GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.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: Skript in den <head> Bereich)
The script is located in “template/inc_js/calpick/calpick.js”
BE Form
BE Template receiver
(Pretty nonsensical example)
BE Template
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
<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]
Since r411 please use
<!-- JS: // calpick var var _calImageAlign = "top"; var _calTopDistance = 5; var _calImageStyle = "margin-top:" + _calTopDistance + "px"; --> <!-- JS: {TEMPLATE}inc_js/calpick/calpick.js -->
instead of
[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]
