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: calpick.js - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon

Zitat:

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").


Docu: –
Forum: Datumeingabe für Formular-Contenttype

Autor: K.Heermann (flip-flop) (04.11.09)
CMS-Version: >= V1.3.x
Version: V1.0 04.11.09

Bedingung:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_cntPHP_rt'] = 1;



Download: calpick.zip (11.11 KiB, 46 downloads) 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.

Einstellungen in der JS Datei

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

Frontendausgabe

Einfaches Formular mit Datumeingabe (Datumfeld erscheint auch ohne JS):

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:

type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"

(Siehe Bild unten)

Den Feldnamen date_input finden wir im Skriptaufruf wieder.

Die Vorlage sieht für den Kalender so aus:

{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
<script>
//<![CDATA[
AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
//]]>
</script>


Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden:

[PHP]
$GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.js');
[/PHP]

(Siehe Bild unten)

Die JS-Datei wird nur für das Formular hinzugelinkt, also nicht fest im Seiten-Template eingetragen. (siehe hierzu auch: Skript in den <head> Bereich)

Das Skript liegt in “template/inc_js/calpick/calpick.js”


BE Formular

BE Vorlage Empfänger

(Ziemlich unsinniges Beispiel)

BE Vorlage


BE Skript Vorlage

Empfänger-Vorlage

Empfänger-Vorlage

Hallo Sir-Oblong-Fitz-Oblong,

Name:   {name}

E-Mail: {email}

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

Das war´s - Danke.


Vorlage

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]
deutsch/phpwcms-system/artikel/contentparts/formular/spezielle-anwendungen/kalender/datum-mit-js-kalender-2.txt · Last modified: 2011/08/25 08:22 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