Published on
Some datepickers show an icon to let users know that the input is a datepicker, the ChronoForms v4 MooTools datepicker doesn't do this by default. This FAQ shows you how to add an icon, or a text link that will open the datepicker.
The first step is to add a Text Box element to your form in the Preview box (not a Datetime Picker element!). Configure this to have an appropriate name and id. I have used the id datepicker_a
Note: this FAQ will not work with the standard DatePicker element in the ChronoForms v4 elements list because it is not possible (so far as I know) to identify the datapicker object that is created.
To get this element to work as a datepicker some code needs to be loaded with the form page. In the form Actions tab drag a Custom Code action into the On Load element and add this code:
<?php
$document =& JFactory::getDocument();
// make sure that MooTools is loaded
JHTML::_( 'behavior.mootools' );
$cf_url = JURI::root().'components/com_chronoforms/js/datepicker_moo/';
// you can change the uncommented line here to change the style
$datepicker_style = $form->form_params->get( 'datepicker_moo_style', 'datepicker_dashboard' );
$document->addStyleSheet( $cf_url.$datepicker_style.'/'.$datepicker_style.'.css' );
// set the datepicker language
$lang =& JFactory::getLanguage();
$tag = $lang->getTag();
if ( !$tag ) {
$tag = $lang->getDefault();
}
$use_tag = 'en-US';
if ( file_exists( $cf_url.'Locale.'.$tag.'.DatePicker.js' ) ) {
$use_tag = $this->tag;
}
// load the datepicker script files
$document->addScript( $cf_url.'Locale.'.$use_tag.'.DatePicker.js' );
$document->addScript( $cf_url.'Picker.js' );
$document->addScript( $cf_url.'Picker.Attach.js' );
$document->addScript( $cf_url.'Picker.Date.js' );
?>
If you have a another standard Datetime picker element on the page, or are using the Custom MooTools Datepicker action this may not be needed.
Now drag a Load JS action into the On Load event and add this code to it. This is the code to create a new datepicker and add the image next to it:
var datepicker_a, dp_thumbnail_a;
window.addEvent('domready', function() {
var dp;
dp = $('datepicker_a');
// set up the start datepicker
datepicker_a = new Picker.Date(dp, {
pickerClass: 'datepicker_dashboard',
format: '%Y-%m-%d',
allowEmpty: true,
useFadeInOut: !Browser.ie
});
// add a new image element
dp_thumbnail_a = new Element('img', {
src: '/images/calendar.gif',
styles: {
paddingLeft: '6px'
}
});
// insert the image after the text input
dp_thumbnail_a.inject(dp, 'after');
// link the datepicker to the image
datepicker_a.attach(dp_thumbnail_a);
});
Replace the first highlighted code datepicker_a with the id of the Text Box element you are using if that is different.
Replace the second highlighted code /images/calendar.gif with the absolute path to the icon you want to show.
You can find a wide range of calendar icons with a Google Search, please check that you have the necessary permissions to use the icon you choose.
You will also need a Show HTML action in the On Load event to display the form HTML.
If you wish, you can change the PickerClass and format options too.
Save your form and check that the code works correctly.
Note that the calendar will open in a different position if you click the icon instead of the input box.
Variations
Text link
You can use a text link instead of an image by changing the dp_thumbnail_a block of code like this:
// add a new image element
dp_thumbnail_a = new Element('span', {
text: 'select a date',
styles: {
paddingLeft: '6px',
color: 'blue',
textDecoration: 'underline'
}
});
In this case the form shows the text 'select a date' in blue and underlined to look like a link.
Hidden input
Instead of a Text Box input you can use a Hidden input so that only the icon or the link appears on the page. Be careful with this though as the selected data is then not visible to the user and you may get more errors.
Display re-formatted date
By adding another span element after the icon or link and using the onSelect event of the DataPicker you can show the selected date as a formatted string independently of the format used for the form data. Here is the full code for a DatePicker using a icon, hidden input and text display. The main changes from the previous example are highlighted.
var datepicker_a, dp_thumbnail_a;
window.addEvent('domready', function() {
var dp;
dp = $('datepicker_a');
dp.setProperty('type', 'hidden');
// set up the start datepicker
datepicker_a = new Picker.Date(dp, {
pickerClass: 'datepicker_dashboard',
format: '%Y-%m-%d',
allowEmpty: true,
useFadeInOut: !Browser.ie,
onSelect: function(date){
dp_confirm_a.set('text', date.format('%d %b %Y'));
}
});
// add a new image element
dp_thumbnail_a = new Element('img', {
src: '/images/calendar.gif',
styles: {
paddingLeft: '6px'
}
});
// add a new span element
dp_confirm_a = new Element('span', {
text: '',
styles: {
paddingLeft: '6px'
}
});
// insert the icon and span after the text input
dp_confirm_a.inject(dp, 'after');
dp_thumbnail_a.inject(dp, 'after');
// link the datepicker to the image
datepicker_a.attach(dp_thumbnail_a);
});
Comments: