1) Datumeing. mit JS Kalender

Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Die manuellen Eingabefelder werden nur bei eingeschaltetem JS generiert!!


Siehe dazu

Alternativen, die mit dieser hier gezeigten Grundtechnik auch funktionieren sollten:


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

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


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

  • $phpwcms['allow_cntPHP_rt'] = 1;

Bedingung: → Datum umstellen in /config/phpwcms/conf.template_default.inc.php, siehe Re: Datumeingabe für Formular-Contenttype

  • $template_default['date']['short'] = 'd.m.Y';



Download: calendardateinput.js (8.33 KiB, 222 downloads) Patch for german date form DD.MM.YYY

Update: V1.1 03.11.2009
Download: calendarDateInputX.js (10.48 KiB, 187 downloads) Patch for german date form DD.MM.YYY, Week number (DIN 1355 / ISO 8601) and many custom vars.



Möglichkeiten:

  • Sprache nach deutsch umstellbar (Texte und z.B. Formfeld: [Tag][Monat][Jahr] anstatt [Monat][Tag][Jahr]
  • Wochenstarttag bestimmbar, Sonntag oder Montag
  • Ausgabe Kalenderwoche optional
  • 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.

Einstellungen

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

Frontendausgabe

Einfaches Formular mit Datumeingabe:

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]
<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>


Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden:

[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.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/calendarDateInput/calendarDateInputX.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: #f0f0f0;">
 
{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]
<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>
[BR][BR]
 
{ERROR:nospam}[B]{LABEL:nospam}[/B][BR]{nospam}[BR][BR]
 
{submitIt}
 
</div>
 
 
[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]
deutsch/phpwcms-system/artikel/contentparts/formular/spezielle-anwendungen/kalender/datum-mit-js-kalender.txt · Last modified: 2018/06/03 18:08 (external edit)
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