1) Date Input with JS Calendar

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

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

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