• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 16 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Adding a nice Datepicker to a FormBuilder form
PostPosted: Fri Aug 14, 2009 4:21 pm 
Offline
Forum Members
Forum Members
User avatar

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Fri Aug 14, 2009 6:41 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Fri Feb 02, 2007 4:31 pm
Posts: 2385
Location: Comox Valley, BC
Very nice. Thanks for sharing this.

Nullig


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Mon Feb 01, 2010 11:50 am 
Offline
Forum Members
Forum Members

Joined: Thu Oct 26, 2006 9:20 am
Posts: 137
Location: Dresden - Saxony - Germany
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?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Wed Feb 17, 2010 2:15 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Tue Aug 03, 2010 7:51 am 
Offline
New Member
New Member

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Thu Aug 05, 2010 8:24 am 
Offline
Forum Members
Forum Members
User avatar

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Thu Aug 05, 2010 9:57 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Tue Aug 10, 2010 1:28 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Dec 09, 2005 12:36 pm
Posts: 237
Location: Marlow, UK
Hard to say what the problem is - do you have a URL that we can take a look at?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Wed Aug 11, 2010 7:41 pm 
Offline
Forum Members
Forum Members

Joined: Tue May 04, 2010 5:04 pm
Posts: 249
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Wed Aug 25, 2010 5:05 am 
Offline
Forum Members
Forum Members

Joined: Tue Mar 09, 2010 7:05 am
Posts: 105
Location: Vendsyssel, Denmark
This calendar is very nice.

How do I get this calendar in the Danish language.

Søren


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Wed Aug 25, 2010 8:59 am 
Offline
Forum Members
Forum Members
User avatar

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Tue May 24, 2011 3:19 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Apr 14, 2010 5:21 pm
Posts: 87
Cheers, scooper!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Thu Nov 24, 2011 6:10 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Thu Nov 24, 2011 6:29 pm 
Offline
Forum Members
Forum Members

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Adding a nice Datepicker to a FormBuilder form
PostPosted: Thu Nov 24, 2011 7:15 pm 
Offline
Forum Members
Forum Members

Joined: Thu Feb 21, 2008 11:31 pm
Posts: 94
Well, it works!

I switched off another jquery call from the showtime module


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 16 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Hosting Nation - Managed CMSMS Hosting