Problem.
How to make calendar, that is always shown in the form without <input> field. One must be able to select date and then the value must be submitted with the form. (This was needed for table reservation form for restaurant)
Solution.
NB! For this to work at the same time with Chronoforms built-in Mootools validation, you must be able to make jQuery and Mootools live on the same page without conflicts. How to do that is outside the scope of this guide.
To solve this problem, I used jQuery Datepicker.
1. Load jQuery, jQuery UI and default template for jQuery UI.
Add the following lines between <head> </head> in your Joomla! template's index.php:
2. Open your form in Advanced Form Wizard Mode(It's the default one). From Advanced Elements drag Custom Element (HTML/PHP) to where you want the calendar to appear. Configure it, name all fields Calendar, check the Pure code option, in Code section paste this:
Apply changes.
3. From Advanced Elements drag Hidden Box right after previously inserted Custom Element. Configure it, in Label text write Calendar date, field name will be calendar_date, in Field default value insert:
This will ensure, that your hidden field always has a value(current date), because Datepicker script will insert value only after the first click.
IMHO Current day as a default value makes sense in the most of situations I can think of.
You can change date format to any value you like.
Insert submittedDate into Field id field.
4. In the Events tab from Utilities drag Load JS to On Load. Configure it, paste the following into Code section:
This is the function that shows the calendar and applies some settings to it, I will shortly explain what they do.
minDate: -1 - disables all date fields before today
prevText: "" and nextText: "" - changes Previous and Next text to empty, useful if you wish to insert some image there instead of words
maxDate: "+3M" - shows only 3 months in the future
firstDay: 1 - makes Monday the first day of the week
dateFormat: "mm/dd/yy" - defines date format
onSelect - this part adds selected date as a value to the hidden field we made previously
More settings you can find at jQuery Datepicker.
Apply it and you are set! Auto email template maker will find hidden field, so its very easy to use.
P.S. If you need to localize Datepicker, find appropriate language in this list, then copy contents of the language .js file to the beginning of the script and add this line(in example case you want to translate Datepicker to German):
to the end of our function.
So in this case Load JS will look like this:
How to make calendar, that is always shown in the form without <input> field. One must be able to select date and then the value must be submitted with the form. (This was needed for table reservation form for restaurant)
Solution.
NB! For this to work at the same time with Chronoforms built-in Mootools validation, you must be able to make jQuery and Mootools live on the same page without conflicts. How to do that is outside the scope of this guide.
To solve this problem, I used jQuery Datepicker.
1. Load jQuery, jQuery UI and default template for jQuery UI.
Add the following lines between <head> </head> in your Joomla! template's index.php:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
2. Open your form in Advanced Form Wizard Mode(It's the default one). From Advanced Elements drag Custom Element (HTML/PHP) to where you want the calendar to appear. Configure it, name all fields Calendar, check the Pure code option, in Code section paste this:
<div id="datepicker"></div>
Apply changes.
3. From Advanced Elements drag Hidden Box right after previously inserted Custom Element. Configure it, in Label text write Calendar date, field name will be calendar_date, in Field default value insert:
<?php echo date('m/d/Y'); ?>This will ensure, that your hidden field always has a value(current date), because Datepicker script will insert value only after the first click.
IMHO Current day as a default value makes sense in the most of situations I can think of.
You can change date format to any value you like.
Insert submittedDate into Field id field.
4. In the Events tab from Utilities drag Load JS to On Load. Configure it, paste the following into Code section:
jQuery(function() {
jQuery( "#datepicker" ).datepicker({
minDate: -1,
prevText: "",
nextText: "",
maxDate: "+3M",
firstDay: 1,
dateFormat: "mm/dd/yy",
onSelect: function(dateText, inst) {
jQuery("#submittedDate").val(dateText);
}
});
});
This is the function that shows the calendar and applies some settings to it, I will shortly explain what they do.
minDate: -1 - disables all date fields before today
prevText: "" and nextText: "" - changes Previous and Next text to empty, useful if you wish to insert some image there instead of words
maxDate: "+3M" - shows only 3 months in the future
firstDay: 1 - makes Monday the first day of the week
dateFormat: "mm/dd/yy" - defines date format
onSelect - this part adds selected date as a value to the hidden field we made previously
More settings you can find at jQuery Datepicker.
Apply it and you are set! Auto email template maker will find hidden field, so its very easy to use.
P.S. If you need to localize Datepicker, find appropriate language in this list, then copy contents of the language .js file to the beginning of the script and add this line(in example case you want to translate Datepicker to German):
jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "de" ] );to the end of our function.
So in this case Load JS will look like this:
/* German initialisation for the jQuery UI date picker plugin. */
/* Written by Milian Wolff (mail@milianw.de). */
jQuery(function($){
$.datepicker.regional['de'] = {
closeText: 'schließen',
prevText: '<zurück',
nextText: 'Vor>',
currentText: 'heute',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
weekHeader: 'KW',
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['de']);
});
jQuery(function() {
jQuery( "#datepicker" ).datepicker({
minDate: -1,
prevText: "",
nextText: "",
maxDate: "+3M",
firstDay: 1,
dateFormat: "dd.mm.yy",
onSelect: function(dateText, inst) {
jQuery("#submittedDate").val(dateText);
}
}
);
jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "de" ] );
});
This topic is locked and no more replies can be posted.
