CMS Made Simple Forums

Posted: **Fri Aug 14, 2009 4:21 pm**

I've just been adding a nice jQueryUI date picker to a form for a client who didn't want to use the normal FormBuilder drop down date pickers.

You can see an example over here.

It was very easy to do and since it's a Friday I thought I'd write it up in case anyone else needed to do it.

So...first, you'll need to add a class of 'datepicker' to any text inputs you want bring up a calendar.

Then add the following to the 'Page specific metadata' box on the page that has the form (or add it to a template if you'd rather).

Code: Select all

{literal}

<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></__script>
<link type="text/css" rel="stylesheet" 
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" />

<__script__ type="text/javascript">
$(document).ready(function() {
	$(function() {$('div.datepicker input').datepicker({dateFormat: 'd M yy'});});
});
</__script>

{/literal}

Don't forget those Smarty 'literal' tags otherwise you'll upset things.

This pulls the jQuery files from the Google CDN so there's no need to upload any javascript to your site. Easy for you and hey, probably a good thing to do for several reasons.

You can choose a different theme by pulling in a different css file or you can use your own.

Enjoy.

s.

Posted: **Fri Aug 14, 2009 6:41 pm**

Very nice. Thanks for sharing this.

Nullig

Posted: **Mon Feb 01, 2010 11:50 am**

Yes. Nice indeed..but:

I have an small contact teaser which is on every page on a sidebar. As soon as I display a gallery and with it all the necessary scripts (jquery.js and jquery.fancybox.js) the datepicker doesnt work.

Does anybody has an idea what could be wrong here?

Posted: **Wed Feb 17, 2010 2:15 pm**

konsument wrote: Yes. Nice indeed..but:

I have an small contact teaser which is on every page on a sidebar. As soon as I display a gallery and with it all the necessary scripts (jquery.js and jquery.fancybox.js) the datepicker doesnt work. :-[

Does anybody has an idea what could be wrong here?

Look at the html source for your broken page - is jquery being included more than once?
If it is then this is a probable cause of the problem.

Can you post a link to the page?

Posted: **Tue Aug 03, 2010 7:51 am**

@scooper: excellent work, just what I have been looking for.
A couple of questions...
1. the date selected doesn't appear in the email that is generated ( all the other form info is in the email, except the date selected).

2. is there a way to select multiple dates?
I am looking for a way for multiple date selection. eg. click 4 or 5 dates on a calendar?

Posted: **Thu Aug 05, 2010 8:24 am**

holiday road wrote: 1. the date selected doesn't appear in the email that is generated ( all the other form info is in the email, except the date selected).

I'd just check the email template first; on the 'Advanced Settings' tab of your Email Results to form entry. Make sure that the date field is being included in the template. I'm often changing or adding fields and then forgetting to update the email template.
The jQuery datepicker shouldn't make any difference to whether the info gets posted - it's just filling in the same form field using javascript rather than typing it in directly. If you still have trouble though you can try disabling the datepicker and just try the plain text input and if that works we can have a closer look.

holiday road wrote: 2. is there a way to select multiple dates?
I am looking for a way for multiple date selection. eg. click 4 or 5 dates on a calendar?

You can certainly add more than one datepicker to a form - the same code should work ok (just updated my demo with a second datepicker and it's fine).

If you wanted to have the ability to select more than one date on a single calendar then that's going to be trickier. The current jQuery UI datepicker doesn't do it, so you'd have to use and alternative. Both
http://keith-wood.name/datepick.html
and
http://www.kelvinluck.com/assets/jquery ... tiple.html
look to be able to do it (I've not tried them though).

I have to say though that from a usability point of view (as well as it being easier to implement) I'd be tempted just to keep the datepickers separate.

s.

Posted: **Thu Aug 05, 2010 9:57 pm**

strange, doesn`t work at all.

formbuilder 0.6.2
CMS-Version 1.8

the date picker doesn´t show up, no other jquery on the site.

Posted: **Tue Aug 10, 2010 1:28 pm**

Hard to say what the problem is - do you have a URL that we can take a look at?

Posted: **Wed Aug 11, 2010 7:41 pm**

I had the same problem (not working) but solution for me was call JQuery form my FTP and jq-ui too (from the same path). I dont know why, but when I call JQ and jq-ui from path like:

script jq-ui didn't work... (but JQ worked)

I have created on my FTP path ..../main_js and call scripts from it (JQ and jq-ui, the same with css). Now everything is working.

Best regards,
Marek A.

Posted: **Wed Aug 25, 2010 5:05 am**

This calendar is very nice.

How do I get this calendar in the Danish language.

Søren

Posted: **Wed Aug 25, 2010 8:59 am**

The calendar itself is part of the frankly great jQuery User Interface library.
There's lots of information about what you can do with it over at their website http://jqueryui.com/.

There's a page with specific information on how to localize the calendar.

If you're feeling really lazy then all you have to do is include the localization file for Danish after you include the jquery-ui script. So something like:

Code: Select all


<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></__script>
<__script__ type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-da.js"></__script>

Works when I've just tried it.

You'll probably want to load the jquery.ui.datepicker-da.js file from your server though.

s.

Posted: **Tue May 24, 2011 3:19 pm**

Cheers, scooper!

Posted: **Thu Nov 24, 2011 6:10 pm**

The calendar doesn't show up with formbuilder 0.7.1 and cmsms 1.10.2.

I had a look at the source code of the page and found:

Code: Select all

<div class=" datepicker">

There is a blank space at the beginning of the class. Is this the problem?
If yes, how can I get rid of it?

Thanks

Posted: **Thu Nov 24, 2011 6:29 pm**

Ok, the blank was not the problem...

Posted: **Thu Nov 24, 2011 7:15 pm**

Well, it works!

I switched off another jquery call from the showtime module

CMS Made Simple Forums

Adding a nice Datepicker to a FormBuilder form

Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form

Re: Adding a nice Datepicker to a FormBuilder form