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 11:14] Knut Heermann (flip-flop) |
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. Diese Variante stellt auch das manelle Eingabefeld mit ausgeschaltetem JS bereit.** \\ | + | **Ein JS Kalender, der die Datumeingabe mit Prüfung in ein Formularfeld erlaubt. Diese Variante stellt auch das manuelle Eingabefeld bei ausgeschaltetem JS bereit.** \\ |
\\ | \\ | ||
Line 14: | Line 14: | ||
JavaScript DHMTL Kalenderauswahl. Erzeugt einen klickbaren Button | JavaScript DHMTL Kalenderauswahl. Erzeugt einen klickbaren Button | ||
hinter Eingabefeldern, über die mit einem Office-ähnlichen Kalender | hinter Eingabefeldern, über die mit einem Office-ähnlichen Kalender | ||
- | das Datum ausgewählt werden kann, dass dann in das entsprechende | + | das Datum ausgewählt werden kann, das dann in das entsprechende |
Eingabefeld eingetragen wird. | Eingabefeld eingetragen wird. | ||
Line 44: | Line 44: | ||
---- | ---- | ||
- | Download: {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick.zip|calpick.zip}} //Patch for phpwcms// | + | **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// |
Line 152: | 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 175: | 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 182: | 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> | ||
Line 189: | Line 193: | ||
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]])// | 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 205: | Line 209: | ||
==== BE Vorlage ==== | ==== BE Vorlage ==== | ||
- | {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calendardateinput04_01.gif|}} | + | {{:deutsch:phpwcms-system:artikel:contentparts:formular:spezielle-anwendungen:kalender:calpick_be_04_01.gif|}} |
\\ | \\ | ||
Line 236: | 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 245: | 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 257: | 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> |