close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Customising Datepicker

Thread began 3/22/2010 8:57 am by A Sound Design | Last modified 6/24/2010 10:19 pm by Jimmy Wu | 1797 views | 9 replies |

A Sound Design

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?

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

Rune Brynestad

For your second question

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

Sign in to reply to this post

A Sound Design

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.

Sign in to reply to this post

A Sound Design

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

Sign in to reply to this post

John LangerBeta Tester

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.

Sign in to reply to this post

A Sound Design

Thank you, John. It does work indeed.

Sign in to reply to this post

John LangerBeta Tester

You're very welcome. Glad it worked :)

Sign in to reply to this post

zuffster370186

Date picker with image (onClick)

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

Sign in to reply to this post

Jimmy Wu

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.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...