Customising Datepicker

I am using the Datepicker to create a reservation enquiry form. It works OK except for 2 issues (well, these are the only I have encountered so far):

1) I cannot get the date to go in UK format. I have followed another thread on this forum that deals with that but no matter what I do it always goes to the default setting, which is mm/dd/yyyy.

2) Is there any way of setting it so that a user cannot set the departure date before the arrival date? At the moment there seems to be no validation to allow a message to say 'the date you entered is before the arrival date'. Can this be done?

In response to 2) above:

I believe that would require some customisation of the jquery code.

Kevin Luck's site has some good examples of such customisation.

This example seems to be close to what you are after.

I use the "Compare Date Fields" extension from Kaosweaver for cases like this.

This extension compares dates to ensure the order of the dates are correct. This helps reservations systems where departing dates need to be before returning dates.

It's free of charge and can be downloaded here:
details.php?id=19

Regards
Rune

Originally Said By: Rune

  I use the "Compare Date Fields" extension from Kaosweaver for cases like this.

This extension compares dates to ensure the order of the dates are correct. This helps reservations systems where departing dates need to be before returning dates.

It's free of charge and can be downloaded here:
details.php?id=19

Regards
Rune  

Thanks Rune. That works perfectly as a client-side solution. It would be good to find a server-side one though eventually.

Can anyone help me out with the UK date part? It's really important and I can't get anything to work. Thanks.

Make a backup first as I've only just worked this out and it may have flaws!!!!!

Open up jquery-ui1.7.1.custom.min.js which is inside the CSSFormBuilder/Datepicker folder somewhere

Find dateFormat:"mm/dd/yy" change it to dateFormat:"dd/mm/yy"

Then on the page where you have your form find

var Date_group_Best_day_Spry = new Spry.Widget.ValidationTextField("Date_group_Best_day_Spry", "date", { format:'mm/dd/yyyy' , validateOn:["blur"]});

and change that date format as well so that the validation works.

I tried a test form and it worked for me. I haven't tried entering it into a database or sending the form.

Good luck.

Thank you, John. It does work indeed.

You're very welcome. Glad it worked :)

Is there a way for the calendar of the date picker to be displayed when clicking on a calendar like image or icon rather than the onBlur method of the text field? If so, what code within the web page and js file has to be modified

You would require some understanding of how the javascript works, but you should be able to modify this code to have the calender point to something other than the text field:

<script type="text/javascript">
$(function(){
	$('#fieldset_group_field').datepicker({
		changeMonth: true,
		changeYear: true,
		onClose: closeDatePicker_fieldset_group_field
	});
});
function closeDatePicker_fieldset_group_field() {
	var tElm = $('#fieldset_group_field');
	if (typeof fieldset_group_field_Spry != null && typeof fieldset_group_field_Spry != "undefined") {
		fieldset_group_field_Spry.validate();
	}
	var docElm = document.getElementById("fieldset_group_field");
	var tBlur = docElm.getAttribute("onBlur");
	if (!tBlur) tBlur = docElm.getAttribute("onblur");
	if (!tBlur) tBlur = docElm.getAttribute("ONBLUR");
	if (tBlur) {
		tBlur = tBlur.replace(/\bthis\b/g, "docElm");
		eval(tBlur);
	}
}
</script>

This currently is pointing to a form element called fieldset_group_field. Unfortunately, since this is custom development, I cannot give you any additional support on how to accomplish this.