Differences

This shows you the differences between two versions of the page.

--- deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:datum-mit-js-kalender [2009/10/30 15:54]
Knut Heermann (flip-flop)
+++ deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:datum-mit-js-kalender [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
-{{indexmenu_n>400}}
+{{indexmenu_n>10}}
-====== Datumeingabe mit JS Kalender ======
+====== 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
   * [[http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm#at|Jason's Date Input Calendar]]
-  * [[http://calendar.moonscript.com/dateinput.cfm|ason Moon's Fool-Proof Date Input Calendar Script]]
+  * [[http://calendar.moonscript.com/dateinput.cfm|Jason Moon's Fool-Proof Date Input Calendar Script]]
-Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. \\
+Alternativen, die mit dieser hier gezeigten Grundtechnik auch funktionieren sollten:
+  * [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - Mit konzeptionellen Anleihen beim Kalender-Element von 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]]
-**Autor:** [[http://planmatrix.de|K.Heermann]] (flip-flop) (30.10.09)// \\
+**Autor:** [[http://planmatrix.de|K.Heermann]] (flip-flop) (30.10.09) \\
 **CMS-Version:** >= V1.3.x  \\
 **Version:** V1.0  //30.10.09// \\
+\\
+----
+**Bedingung:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
+  * $phpwcms['allow_cntPHP_rt']   = 1;
+**Bedingung:**  -> Datum umstellen in %%/config/phpwcms/conf.template_default.inc.php%%, siehe [[http://forum.phpwcms.org/viewtopic.php?p=132838#p132838|Re: Datumeingabe für Formular-Contenttype]]\\
+  *  %%$template_default['date']['short'] = 'd.m.Y';%%
-Download: {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:calendardateinput.zip|calendardateinput.js}} German patched (DD.MM.YYY)
 \\
-**Möglichkeiten:**
+----
+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.//
 ----
-----
-FIXME
+\\
+===== 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.
+<code js|h Einstellungen |h>
+// 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==============================================
+</code>
+===== Frontendausgabe =====
+Einfaches Formular mit Datumeingabe: \\
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput_fe01_01.gif|}}
+===== 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:
+<code html>
+type="DATE"
+default="{DATE_SHORT}"
+dateformat="d.m.Y"
+</code>
+//(Siehe Bild unten)//
+Den Feldnamen **date_input** finden wir im Skriptaufruf wieder.
+**Die Vorlage** sieht für den Kalender so aus:
+<code html>
+{ERROR:date_input}[B]{LABEL:date_input}[/B]
+<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>
+</code>
+\\
+Am Ende des Vorlagenfeldes wird die JS-Datei eingebunden:
+<code php>
+[PHP]
+$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
+[/PHP]
+</code>
+//(Siehe Bild unten)//
+Die JS-Datei wird nur für das Formular hinzugelinkt, also nicht fest im Seiten-Template eingetragen. //(siehe hierzu auch: [[deutsch:technik:aufruf-interner-funktionen:skript-in-den-head-bereich]])//
+Das Skript liegt in "template/inc_js/calendarDateInput/calendarDateInputX.js"
+\\
+==== BE Formular ====
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput02_01.gif|}}
+==== BE Vorlage Empfänger ====
+//(Ziemlich unsinniges Beispiel)//
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput03_01.gif|}}
+==== BE Vorlage ====
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput04_01.gif|}}
+\\
+===== BE Skript Vorlage  =====
+==== Empfänger-Vorlage ====
+<code htnl|h Empfänger-Vorlage |h>
+Hallo Sir-Oblong-Fitz-Oblong,
+Name:   {name}
+E-Mail: {email}
+Ergänzung:
+------------------------------
+{ergaenzung}
+------------------------------
+Das Feld Datum: {date_input}
+------------------------------
+Das war´s - Danke.
+</code>
+\\
+==== Vorlage ====
+<code html|h Vorlage |h>
+<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]
+</code>

deutsch/phpwcms-system/artikel/contentparts/formular/spezielle-anwendungen/kalender/datum-mit-js-kalender.1256914484.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions