Adding a nice Datepicker to a FormBuilder form

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
scooper
Forum Members
Forum Members
Posts: 239
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Adding a nice Datepicker to a FormBuilder form

Post by scooper »

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.

Image

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.
User avatar
Nullig
Power Poster
Power Poster
Posts: 2381
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: Adding a nice Datepicker to a FormBuilder form

Post by Nullig »

Very nice. Thanks for sharing this.

Nullig
konsument
Forum Members
Forum Members
Posts: 137
Joined: Thu Oct 26, 2006 9:20 am
Location: Dresden - Saxony - Germany

Re: Adding a nice Datepicker to a FormBuilder form

Post by konsument »

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?
daymobrew
Forum Members
Forum Members
Posts: 17
Joined: Mon Jan 05, 2009 5:02 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by daymobrew »

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?
holiday road
New Member
New Member
Posts: 6
Joined: Wed Oct 22, 2008 10:17 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by holiday road »

@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?
scooper
Forum Members
Forum Members
Posts: 239
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: Adding a nice Datepicker to a FormBuilder form

Post by scooper »

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.
nOOber
Forum Members
Forum Members
Posts: 63
Joined: Thu Dec 10, 2009 11:29 am

Re: Adding a nice Datepicker to a FormBuilder form

Post by nOOber »

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.
scooper
Forum Members
Forum Members
Posts: 239
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: Adding a nice Datepicker to a FormBuilder form

Post by scooper »

Hard to say what the problem is - do you have a URL that we can take a look at?
maranc
Forum Members
Forum Members
Posts: 249
Joined: Tue May 04, 2010 5:04 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by maranc »

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:




href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" />


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.
tilde
Forum Members
Forum Members
Posts: 105
Joined: Tue Mar 09, 2010 7:05 am
Location: Vendsyssel, Denmark

Re: Adding a nice Datepicker to a FormBuilder form

Post by tilde »

This calendar is very nice.

How do I get this calendar in the Danish language.

Søren
scooper
Forum Members
Forum Members
Posts: 239
Joined: Fri Dec 09, 2005 12:36 pm
Location: Marlow, UK

Re: Adding a nice Datepicker to a FormBuilder form

Post by scooper »

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.
User avatar
kerryshamblin
Forum Members
Forum Members
Posts: 87
Joined: Wed Apr 14, 2010 5:21 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by kerryshamblin »

Cheers, scooper!
boby
Forum Members
Forum Members
Posts: 94
Joined: Thu Feb 21, 2008 11:31 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by boby »

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
boby
Forum Members
Forum Members
Posts: 94
Joined: Thu Feb 21, 2008 11:31 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by boby »

Ok, the blank was not the problem...
boby
Forum Members
Forum Members
Posts: 94
Joined: Thu Feb 21, 2008 11:31 pm

Re: Adding a nice Datepicker to a FormBuilder form

Post by boby »

Well, it works!

I switched off another jquery call from the showtime module
Locked

Return to “Tips and Tricks”