1) Date Input with JS Calendar

A JS Calendar, which allows to enter a date into a form with an input check. The manual input fields are generated only when the JS in on!


See

Alternatives that should work with this basic technique also shown here:


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

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

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

  • $phpwcms['allow_cntPHP_rt'] = 1;



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

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



Opportunities:

  • For German language adjustable (eg, text and form field: [Tag][Monat][Jahr] instead of [Monat][Tag][Jahr]
  • Determine start to the week, Sunday or Monday
  • Output of the calendar week option
  • Date format DD.MM.YYYY possible
  • graphics determined
  • Many values​​, such as font, size, color adjustable

The settings are made at the beginning of the js file.

Settings

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


Frontend output

Simple form with date input:

Operation:

The script generates a hidden field with registered result, This hidden field must be created with the same name in the CP.

For the field type is text (special) highly recommended, because we have the opportunity to catch incorrect entries:

Text (special) with the name entry date_input and these value entries:

type="DATE"
default="{DATE_SHORT}"
dateformat="d.m.Y"

(See picture below)

The Field Name date_input we find in the script call back.

The template for the calendar looks like this:

{ERROR:date_input}[B]{LABEL:date_input}[/B]
<script>DateInput('date_input', true, 'DD.MM.YYYY')</script>


At the end of the template field, the JS file is included:

[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]

(See picture below)

The JS file is only for the form linked to, so do not be entered in the Page Template. (see also: Skript in den <head> Bereich)

The script is located in “template/inc_js/calendarDateInput/calendarDateInputX.js”


BE Form

BE Template receiver

(Pretty nonsensical example)

BE Template


BE Script Template

Receiver template

Receiver template

Hallo Sir-Oblong-Fitz-Oblong,

Name:   {name}

E-Mail: {email}

Ergänzung:
------------------------------
{ergaenzung}
------------------------------
Das Feld Datum: {date_input}
------------------------------

Das war´s - Danke.


Template

Template

<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]


Since r411 please use

<!-- JS: {TEMPLATE}inc_js/calendarDateInput/calendarDateInputX.js -->

instead of

[PHP]
$GLOBALS['block']['custom_htmlhead']['calendarDateInputX.js']= getJavaScriptSourceLink('template/inc_js/calendarDateInput/calendarDateInputX.js');
[/PHP]
english/phpwcms-system/article/contentparts/form/special-applications/calendar/date-with-js-calendar.txt · Last modified: 2011/08/25 09:26 by Knut Heermann (flip-flop)
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