WebMaker provides automatic functionality to show date selection calendar windows for date type controls
In most cases, this will be perfectly fine, but in some scenarios you may want to use a different type of calendar to better match the style or functionality of your overall application.
In these situations it is possible to override the built in functionality. To do this, you should add a JavaScript file to your application using the advanced options on the left of the Application Map screen. In this script file you would then need to redefine the hyf.calendar.showCalendar function to override the built in version. The example script fragment shown below illustrates how this function should work.
(Please note that this example replaces the calendar with a simple prompt window asking the user to enter the date. This would not be useful in a real applicaiton, but should illustrate the process involved in plugging in an alternative control.)
In reality, this is likely to be separated into two functions, as there will be a delay between showing the calendar, and the user actually selecting a value, but this should illustrate the principles involved.
It is important to remember that when overriding the built in calendar functionality, the additional configuration options provided in FormMaker (such as calendar type and display method) will not be supported. If you need to access these settings however, they can be found in the hyf.calendar.config[fieldId] object.
Making these changes will affect what calendar is displayed when the specific calendar button is clicked. It would also be possible to show a calendar automatically when clicking into the field by defining appropriate onfocus/onblur events for it.
In most cases, this will be perfectly fine, but in some scenarios you may want to use a different type of calendar to better match the style or functionality of your overall application.
In these situations it is possible to override the built in functionality. To do this, you should add a JavaScript file to your application using the advanced options on the left of the Application Map screen. In this script file you would then need to redefine the hyf.calendar.showCalendar function to override the built in version. The example script fragment shown below illustrates how this function should work.
(Please note that this example replaces the calendar with a simple prompt window asking the user to enter the date. This would not be useful in a real applicaiton, but should illustrate the process involved in plugging in an alternative control.)
/**
* Example of overriding the built in calendar functionality to instead show a
* custom date entry control.
*
* @param fieldId The id of the field that the calendar should be shown for.
* This will always match the name entered for the field in the studio.
* @param repeatId If the field is contained within a repeat component, then this value will
* indicate the specific entry within the repeat that the calendar should be shown for.
* In this case the full id of the relevant HTML input control will be 'repeatId + fieldId'
* If the field is not within a repeat then this parameter will not be provided
*/
hyf.calendar.showCalendar = function(fieldId, repeatId)
{
if (typeof(repeatId) == 'undefined')
repeatId = '';
//find the HTML field (text box) the calendar should be shown for
var field = document.getElementById(repeatId + fieldId);
//work out what format the selected date should be displayed in
var format = field.getAttribute('_display_date_format');
if (format == null)
format = field.getAttribute('_data_date_format');
//Retrieve the new date value. This is where you would actually need to interact
//with the required calendar control
var newDate = prompt('Please enter date in format ' + format);
//update the value shown in the field.
field.value = newDate;
//call any onchange events defined for the field
if (typeof(field.onchange) == 'function')
field.onchange(null);
}
In reality, this is likely to be separated into two functions, as there will be a delay between showing the calendar, and the user actually selecting a value, but this should illustrate the principles involved.
It is important to remember that when overriding the built in calendar functionality, the additional configuration options provided in FormMaker (such as calendar type and display method) will not be supported. If you need to access these settings however, they can be found in the hyf.calendar.config[fieldId] object.
Making these changes will affect what calendar is displayed when the specific calendar button is clicked. It would also be possible to show a calendar automatically when clicking into the field by defining appropriate onfocus/onblur events for it.