JavaScript calendar date input with Makumba

A regular date input will be rendered with 1 to 6 input boxes for the day, month, year, hour, minutes and seconds, depending on the date format you chose using the format="" attribute in <mak:input>.
For example,

<mak:input name="birthdate" format="dd MMM yyyy"/>

will render as follows:

Additionally, Makumba can provide a JavaScript-based calendar chooser. To enable this widget, you need to:

Download the needed JavaScripts:

Include the script in your page. You can do that in two ways:

If you have access to the page header use javascript include

<head>
...
<script type="text/javascript" src="kruseAnchorPosition.js"></script>
<script type="text/javascript" src="kruseCalendarPopup.js"></script>
<script type="text/javascript" src="kruseDateFunctions.js"></script>
<script type="text/javascript" src="krusePopupWindow.js"></script>
<script type="text/javascript" src="makumbaDateFunctions.js"></script>
...
</head>

When the page header is not in the JSP you work with and you want to keep everything close to the form which contains the chooser you can include the script server side, like this

<SCRIPT LANGUAGE="JavaScript">
<%@include file="kruseAnchorPosition.js" %>
<%@include file="kruseCalendarPopup.js" %>
<%@include file="kruseDateFunctions.js" %>
<%@include file="krusePopupWindow.js" %>
<%@include file="makumbaDateFunctions.js" %>
</script>

Say you have a form that contains a date input as follows

<mak:...form ...>
<mak:input name="birthDate"/>
<input type="submit">
</mak:...form>

By default, for date inputs, following code will be added after your input:

<script language="javascript" type="text/javascript">
var birthdateCalendar = new CalendarPopup("makCalendarDiv");
birthdateCalendar.showYearNavigation();
birthdateCalendar.setReturnFunction("setMultipleValuesbirthdate");
function setMultipleValuesbirthdate(y,m,d) {
  document.getElementById('birthdate_0').selectedIndex=LZ(d)-1;
  document.getElementById('birthdate_1').selectedIndex=LZ(m)-1;
  document.getElementById('birthdate_2').value=y;
};
</script>
<a class="calendarEditor" href="#" onClick="birthdateCalendar.showCalendar('birthdateAnchor', getDateString(document.getElementById('birthdate_2'), document.getElementById('birthdate_1'), document.getElementById('birthdate_0'))); return false;" title="Pick date in calendar" name="birthdateAnchor" ID="birthdateAnchor"> </a>
<div id="makCalendarDiv" style="position:absolute; visibility:hidden; background-color:white; layer-background-color:white;"></div>

You can turn this off by modifying the <mak:input> tag, using the attribute calendarEditor, and setting it to "false":

<mak:input name="birthDate" calendarEditor="false" />

The rendering of the inputs will be the same, until you define a style for the class used in the <a> tag, e.g.
```
.calendarEditor {
  background: url(calendar.gif) left center no-repeat;
  padding-left: 16px;
  height: 16px;
}
```
which will result in:

Please note that the icon might not appear in some browsers, e.g. in Safari.

To add text or other formatting to your calendar link, you can use the calendarEditorLink attribute:

<mak:input name="birthDate" calendarEditorLink="[calendar]" />

Which will result in the link being generated as

<a class="calendarEditor" href="#" onClick="birthdateCalendar.showCalendar('birthdateAnchor', getDateString(document.getElementById('birthdate_2'), document.getElementById('birthdate_1'), document.getElementById('birthdate_0'))); return false;" title="Pick date in calendar" name="birthdateAnchor" ID="birthdateAnchor"> </a>

and will render as:

[calendar]

Note that you can use any kind of HTML in the calendarEditorLink="" attribute, e.g. also the <img ... > tag.

The calendar appearance can be customised with CSS, the sample style used here can be found in calendarStyle.css.