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-2 [2009/11/04 10:13]
Knut Heermann (flip-flop) created
+++ deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:datum-mit-js-kalender-2 [2018/06/03 18:08] (current)
@@ Line 1: / Line 1: @@
 {{indexmenu_n>20}}
-====== Datumeing. mit JS Kalender ======
+====== 2) Datumeing. mit JS Kalender ======
-**Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt.** \\
+**Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Diese Variante stellt auch das manuelle Eingabefeld bei ausgeschaltetem JS bereit.** \\
 \\
-Siehe dazu
+URL: [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon
-  * [[http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm#at|Jason's Date Input Calendar]]
-  * [[http://calendar.moonscript.com/dateinput.cfm|Jason Moon's Fool-Proof Date Input Calendar Script]]
-Alternativen, die mit dieser hier gezeigten Grundtechnik auch funktionieren sollten:
+Zitat:
-  * [[http://flocke.vssd.de/prog/code/js/calpick/|calpick.js]] - Mit konzeptionellen Anleihen beim Kalender-Element von Jason Moon
+<file>
-  * [[http://dev.base86.com/scripts/datepicker_calendar_eightysix.html|Calender Eightysix]] //(Ajax and Mootools v1.2.3)//
+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").
+</file>
 \\
@@ Line 19: / Line 33: @@
 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) (04.11.09) \\
 **CMS-Version:** >= V1.3.x  \\
-**Version:** V1.0  //30.10.09// \\
+**Version:** V1.0  //04.11.09// \\
 \\
@@ Line 30: / Line 44: @@
 ----
-Download: {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput.zip|calendardateinput.js}} //Patch for german date form DD.MM.YYY//
+**Download:** {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick.zip|calpick.zip}} //Patch for phpwcms: Pfad fest eingetragen, Umlaute im text für UTF-8 korrigiert//
-**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.//
 ----
@@ Line 42: / Line 55: @@
 ===== 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.
+Die Einstellungen werden am Anfang der JS-Datei vorgenommen oder alternativ im head der Seite.
-<code js|h Einstellungen |h>
+<code js|h Einstellungen in der JS Datei |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 _calDateFormat     = 'DMY';	// order of date components (this is fixed! you cannot change it here!)
-var myStartDay  = 1;                  // +KH: Calendar start day- default: Sunday = 0 | Monday = 1
+var _calDateSeparator  = '.';	// date component separator
-var myWeekNo    = 1;                  // +KH: Calendar week No: Off= 0 | On = 1
+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 DefaultDateFormat   = 'DD.MM.YYYY'; // +KH: If no date format is supplied, this will be used instead
+var _calStrOpenClose   = 'Klicken &ouml;ffnet den Kalender';
-var HideWait            = 20;            // Number of seconds before the calendar will disappear
+var _calStrPrevMonth   = 'Gehe einen Monat zur&uuml;ck';
-var Y2kPivotPoint       = 76;           // 2-digit years before this point will be created in the 21st century
+var _calStrCurMonth    = 'Gehe zum aktuellen Monat';
-var UnselectedMonthText = '';           // Text to display in the 1st month list item when the date isn't required
+var _calStrNextMonth   = 'Gehe einen Monat weiter';
-var spacer        = 'img/leer.gif';   // gif transp. , important
+// 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)
-// Calender Head
+if (typeof window._calColorWindow == 'undefined')
-var ImageURL      = 'img/dynCal/dynCalendar.gif';  // Calendar image
+	var _calColorWindow       = 'window';
-var NextURL       = 'img/dynCal/next.gif';         // Next image
+if (typeof window._calColorWindowText == 'undefined')
-var PrevURL       = 'img/dynCal/prev.gif';         // Prev image
+	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';
-var TopRowBGColor = '#d4d0c8';                     // bg Head
+// Local constants & variables
-var CalHeadTxt    = 'Zeige aktuellen Monat';
+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; ';
-// 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==============================================
@@ Line 132: / Line 152: @@
 ===== Frontendausgabe =====
-Einfaches Formular mit Datumeingabe: \\
+Einfaches Formular mit Datumeingabe //(Datumfeld erscheint auch ohne JS)//: \\
-{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput_fe01_01.gif|}}
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_fe_01_01.gif|}}
 ===== Arbeitsweise: =====
@@ Line 155: / Line 175: @@
 **Die Vorlage** sieht für den Kalender so aus:
 <code html>
-{ERROR:date_input}[B]{LABEL:date_input}[/B]
+{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
-<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>
+<script>
+//<![CDATA[
+AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
+//]]>
+</script>
 </code>
 \\
@@ Line 162: / Line 186: @@
 <code php>
 [PHP]
-$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
+$GLOBALS['block']['custom_htmlhead']['calpick.js']= getJavaScriptSourceLink('template/inc_js/calpick/calpick.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:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:deutsch:technik:aufruf-interner-funktionen:skript-in-den-head-bereich]])//
+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"
+Das Skript liegt in "template/inc_js/calpick/calpick.js"
 \\
@@ Line 185: / Line 209: @@
 ==== BE Vorlage ====
-{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:calendardateinput04_01.gif|}}
+{{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_be_04_01.gif|}}
 \\
@@ Line 216: / Line 240: @@
 <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;">
+<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]
@@ Line 225: / Line 249: @@
-{ERROR:date_input}[B]{LABEL:date_input}[/B]
+{ERROR:date_input}[B]{LABEL:date_input}[/B][BR]{date_input}
-<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>
+<script>
+//<![CDATA[
+AttachCalendarButton(document.phpwcmsForm{CPID}.date_input);
+//]]>
+</script>
 [BR][BR]
@@ Line 237: / Line 265: @@
 [PHP]
-$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
+$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]
 </code>

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

Show page Old revisions