NAVIGATION
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}} | {{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]] | 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 \\ | **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: ===== | ===== Möglichkeiten: ===== | ||
- | * Sprache nach deutsch umstellbar (Texte und z.B. Formfeld: **[Tag][Monat][Jahr]** anstatt [**Monat][Tag][Jahr]** | ||
* Wochenstarttag bestimmbar, Sonntag oder Montag | * Wochenstarttag bestimmbar, Sonntag oder Montag | ||
- | * Ausgabe Kalenderwoche optional | ||
* Datumsformat DD.MM.YYYY möglich | * Datumsformat DD.MM.YYYY möglich | ||
* Grafiken bestimmbar | * Grafiken bestimmbar | ||
* Viele Werte wie Font, Größe, Farben einstellbar | * 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 ===================================================== | // 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ä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 öffnet den Kalender'; |
- | var HideWait = 20; // Number of seconds before the calendar will disappear | + | var _calStrPrevMonth = 'Gehe einen Monat zurü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============================================== | // Customizable variables ====END============================================== | ||
Line 132: | Line 152: | ||
===== Frontendausgabe ===== | ===== 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: ===== | ===== Arbeitsweise: ===== | ||
Line 155: | Line 175: | ||
**Die Vorlage** sieht für den Kalender so aus: | **Die Vorlage** sieht für den Kalender so aus: | ||
<code html> | <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> | </code> | ||
\\ | \\ | ||
Line 162: | Line 186: | ||
<code php> | <code php> | ||
[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] | [/PHP] | ||
</code> | </code> | ||
//(Siehe Bild unten)// | //(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 ==== | ==== 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> | <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] | {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] | [BR][BR] | ||
Line 237: | Line 265: | ||
[PHP] | [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] | [/PHP] | ||
</code> | </code> |