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, 54 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.

Settings in JS file

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

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

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

Vorlage

<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]
english/phpwcms-system/article/contentparts/form/special-applications/calendar/date-with-js-calendar-2.txt · Last modified: 2011/08/25 09:36 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0