CMS Made Simple Forums
https://forum.cmsmadesimple.org/

Adding a nice Datepicker to a FormBuilder form
https://forum.cmsmadesimple.org/viewtopic.php?f=4&t=36459
Page 1 of 2

Author:  scooper [ Fri Aug 14, 2009 4:21 pm ]
Post subject:  Adding a nice Datepicker to a FormBuilder form

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.

$1

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).

\$1:
{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.

Author:  Nullig [ Fri Aug 14, 2009 6:41 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

Very nice. Thanks for sharing this.

Nullig

Author:  konsument [ Mon Feb 01, 2010 11:50 am ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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?

Author:  daymobrew [ Wed Feb 17, 2010 2:15 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

konsument \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?
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?

Author:  holiday road [ Tue Aug 03, 2010 7:51 am ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

@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?

Author:  scooper [ Thu Aug 05, 2010 8:24 am ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

holiday road \holiday road:
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 \holiday road:
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.

Author:  nOOber [ Thu Aug 05, 2010 9:57 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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.

Author:  scooper [ Tue Aug 10, 2010 1:28 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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

Author:  maranc [ Wed Aug 11, 2010 7:41 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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.

Author:  tilde [ Wed Aug 25, 2010 5:05 am ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

This calendar is very nice.

How do I get this calendar in the Danish language.

Søren

Author:  scooper [ Wed Aug 25, 2010 8:59 am ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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:

\$1:

<__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.

Author:  kerryshamblin [ Tue May 24, 2011 3:19 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

Cheers, scooper!

Author:  boby [ Thu Nov 24, 2011 6:10 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

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:
\$1:
<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

Author:  boby [ Thu Nov 24, 2011 6:29 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

Ok, the blank was not the problem...

Author:  boby [ Thu Nov 24, 2011 7:15 pm ]
Post subject:  Re: Adding a nice Datepicker to a FormBuilder form

Well, it works!

I switched off another jquery call from the showtime module

Page 1 of 2 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/