Hey everyone,

I needed a calendar/date component that was better than those dropdowns. I used the JSTools/JSCalendar module and I wrote a component that can be added to the webforms. I had trouble getting it to specify the format and afew other config parameters. Maybe I can work with you to figure out how to add it. Anyway. I attached the file, feel free to include it in CVS/releases if you like.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

nedjo’s picture

Project: Javascript Tools » Webform
Version: master »
Component: Jscalendar » Code

This looks like it's for the webform module rather than javascript tools.

quicksketch’s picture

This looks pretty cool. I didn't know there was a JSCalendar module. Both the time and date components need a TLC to help them become more compatible with 3rd-party modules. The list of requested features for webform is getting a little lengthy, so I don't think I'll have time to put this together.

quicksketch’s picture

Status: Active » Postponed

We have no plans to include the JS calendar into this release of webform. I'm planning on starting a 'new' webform which uses CCK fields instead of small customized solutions. The date.module already supports this functionality.

pvasener’s picture

I used this component with my Drupal 4.7 version of Webform and it was completely fulfilling my needs. Now, as I intend to migrate to Drupal 5.0, is there a Drupal 5 compatible version of it available? It would also be great to have it as part of the supported components of the module.

roczei’s picture

http://atlantis.ki.iif.hu/drupal/webform+jscalendar.drupal5.1.tgz

Here is the Drupal 5.1 version. :-)

calendar.inc (date+time)

calendar_date.inc (date)

Gabor

Johannes De Boeck’s picture

Thanks a lot Gabor..
this is exactly what i was looking for but unfortunately it gives me an error with Drupal 5.3:

* warning: mysql_real_escape_string() expects parameter 1 to be string, array given in D:\xampp\htdocs\aude\includes\database.mysql.inc on line 400.
* warning: mysql_real_escape_string() expects parameter 1 to be string, array given in D:\xampp\htdocs\aude\includes\database.mysql.inc on line 400.

any thoughts on this?

best regards
Johannes

aterchin’s picture

Version: » 5.x-1.7

bump. i'd really be interested in this too. just updated to 5.5. havent had a chance to do the include yet but i want the jscalendar functionality if at all possible.

nedjo’s picture

There are no plans for a 6.x version of the JSCalendar module, as the original jscalendar library is no longer maintained. I believe a jQuery-based date picker was integrated into the Date package.

jazzitup’s picture

Version: 5.x-1.7 » 5.x-1.9
Status: Postponed » Active

Is it possible to use jQuery 'Date popup' with Webform yet?
I'll try to succeed with this and if you'd like to help me, please don't hesitate to drop me a line...

quicksketch’s picture

No, this still isn't possible with Webform. We'd need to convert webform's date.inc to use #type = 'date' instead of 3 separate fields. This would also probably involve a database update to make date fields store as timestamps instead of individual values.

quicksketch’s picture

Marked http://drupal.org/node/252609 as duplicate.

Anonymous’s picture

Why not integrate it with the Date popup module? It's based on jquery and there's another modules using it.

http://cvs.drupal.org/viewvc.py/drupal/contributions/modules/date/date_p...

quicksketch’s picture

Version: 5.x-1.9 » 6.x-2.x-dev

An update on where Webform stands in regard to this request:

- Webform was refactored since my comment in #3, but CCK fields still aren't ready to be used by 3rd party modules, so no progress on that front.
- I've looked at the Date popup module before, but unfortunately it only works with plain-text fields (like the submitted date when editing nodes). This means that it operates differently than Webform's existing date.inc and cannot be used easily.
- I also looked into JS tool's popup calendar, but it operates in a way similar to the Date popup module and has been discontinued in Drupal 6.

So ultimately I'd still like to have a date popup, but no solution currently is available for Webform to use (easily).

Gribnif’s picture

Status: Active » Needs review
FileSize
5.15 KB

Here's a patch to make webform's date element use date_popup. It essentially converts the separate month and date fields into a single text field on the way in, and parses them back out before returning control to the regular date field processing code. There are no changes to the way the data is stored in the the database.

The only down side to this is that it doesn't degrade gracefully. If the user's browser doesn't do Javascript, they will get a textfield instead of the nice selects that the date component normally uses. So perhaps this should be an option in the date component?

quicksketch’s picture

Nice! Thanks Gribnif. Yeah, I've also noticed that date_popup doesn't degrade whatsoever, hence why I've avoided using it. The optimal solution would be a date popup that modifies the normal "date" component in Drupal (the one with 3 select lists for month/day/year).

I noticed YUI has support for this: http://developer.yahoo.com/yui/examples/calendar/formsel.html, and there's even a Drupal module that implements it: http://drupal.org/project/yui_calendar. Unfortunately it requires the YUI JS library, adding a bit of overhead and there isn't a jQuery alternative.

If this gets included, we'll definitely need to make in an option, rather than forcing it upon all elements. What does everyone else think?

Gribnif’s picture

IMHO, it would be silly to add the overhead of a second JS library (YUI) for this feature. Also, unless it's just not this way in the demo, the YUI calendar isn't a popup. It always takes up a lot of real estate, because it's always visible.

It would be far better to rewrite the JQuery one to gracefully degrade the selects, rather than a text field. It might even be possible to do this by adding some JS, without modifying the JQuery calendar code at all.

quicksketch’s picture

IMHO, it would be silly to add the overhead of a second JS library (YUI) for this feature. Also, unless it's just not this way in the demo, the YUI calendar isn't a popup. It always takes up a lot of real estate, because it's always visible.

I totally agree. I was just pointing out that YUI behaves mostly the way I'd like it to, unlike the the jQuery calendar.

It would be far better to rewrite the JQuery one to gracefully degrade the selects, rather than a text field. It might even be possible to do this by adding some JS, without modifying the JQuery calendar code at all.

I'd be really interested in this. I'd love if the "supported" jQuery calendar had this ability. If necessary, I also wouldn't mind making a "calendar.js" file to go along with the date component.

I also recalled another option, the excellent jCalendar plugin written by Ted Serbinski (m3averick) at http://tedserbinski.com/jcalendar/index.html, which works beautifully. Unfortunately he's stopped development on it because it's been deprecated in preference of http://plugins.jquery.com/project/jquery-calendar

quicksketch’s picture

Oh, looks like jquery-calendar *does* support drop-down selects, with "a little bit of wiring" according to the demo site: http://ui.jquery.com/repository/latest/demos/functional/#ui-gen-9

primerg’s picture

subscribing. do we have updates on this issue?

khan2ims’s picture

Subscribing...

ntg’s picture

Subscribing

taxicab221’s picture

Subscribing

nelslynn’s picture

Subscribing

Gerard’s picture

Subscribing

drupalok’s picture

Subscribing

jusyjim’s picture

subscribing

jwinton’s picture

subscribing

geraldferguson’s picture

yet another subscriber

bocky’s picture

Subscribing...

stefan81’s picture

subscribing

site_issues’s picture

subscribing

jeffschuler’s picture

jQuery Calendar is now called jQuery UI Datepicker, and part of the official jQuery UI. I'm not certain whether multiple altField and altFormat options could be specified to tie the picker to multiple fields.

Keith Wood's fork/implementation, though, distinctly includes facilities for connecting the picker to multiple form elements: on http://keith-wood.name/datepick.html, click the Miscellaneous tab, and see the Linked to drop-downs example.

jeffschuler’s picture

A suggestion to get this moving again...

It seems to me we're looking at 3 options for date selection, (which I'll name to show my bias:)

  • Fine: Text field for full date
  • Decent: Drop downs for Y, M, D
  • Best: Calendar picker

Since 95% of web users have Javascript enabled, I suggest we provide the Best functionality to that 95%, and degrade to Fine for the other 5% -- instead of just providing Decent for everybody.

So, we offload the picker functionality to Date Popup -- via Gribnif's patch -- then focus/consolidate efforts on helping Date Popup to degrade to Decent.

haggins’s picture

subscribing

chorrylan’s picture

subscribing

jdlind38’s picture

I'm also in need of a date popup solution for some fields in my webform...

jeffschuler’s picture

FileSize
5.55 KB

Here is Gribnif's patch from #14, rerolled for the current Webform 6.x-2.x-dev.

It seems to work appropriately: provided the Date Popup calendar to me in a webform date field, and the dates I chose were correctly reflected by the form submission results.

This patch works for the 6.x-2.7 Webform release, as well.

mcpuddin’s picture

Version: 6.x-2.x-dev » 6.x-2.7

Patch worked great 6.x-2.7

Just make sure you install the Date module first (that is where Date Popup calendar comes from) http://drupal.org/project/date

outbackbrazil’s picture

Category: feature » support
Status: Needs review » Patch (to be ported)

How do I get this patch(thread #37) integrated into the webform module?
Cheers,

jeffschuler’s picture

Version: 6.x-2.7 » 6.x-2.x-dev
Status: Patch (to be ported) » Needs review

@outbackbrazil: the best way to help possibly get this change into Webform is to apply the patch in #37 to Webform 6.x-2.x-dev, (or 6.x-2.7,) test it out as thoroughly as you're able, and report back here on what you found.

"Patch (to be ported)" status is generally reserved for a patch that's been committed to a development version but needs to be backported to an earlier release.

Setting status and version back.

bryancasler’s picture

I get a straight up WSOD after applying the patch in #37. I also made sure I had the Date and Date-Pop Up module enabled before hand.

jeffschuler’s picture

@animelion: what version of Drupal, Webform, and Date?
Are you using JQuery UI?
Can you look at your webserver (& Drupal) error logs to see what the error was? -- Check out the WSOD diagnosis page.

bryancasler’s picture

Sorry my setup has changed so much since then that I would not be able to re-duplicate that scenario.

imclean’s picture

Applied patch from #37 to Webform 6.x-2.9 and all is working well so far. A very useful addition, thanks.

imclean’s picture

One feature request (or perhaps 2). As quicksketch mentioned in #15, would it be possible to make this an option on a per-field basis? For e.g. I'd like a "Date of Birth" field to have the usual dropdowns.

Also, is it possible to change the default year range of 3 years either side of the current year? The year fields already exist in the configuration for the date field but the popup seems to ignore them.

imclean’s picture

Here's a quick and dirty to allow date_popup to use the date range specified in the webform date field configuration. The following lines go in date.inc after it has been patched (#37), line 125 right after $form_item['#date_format'] = $date_format; :

    // Get year range 
    $current_year = date('Y', strtotime('now'));
    $form_item['#date_year_range'] = ($component['extra']['year_start'] - $current_year) . ':+' . ($component['extra']['year_end'] - $current_year);
mmenegon’s picture

Hi all,

Pretty new to all this, so apologies beforehand...

Tried to apply the patch with Webform 6.x-2.9 and got the following error:

Fatal error: require_once() [function.require]: Failed opening required './sites/all/modules/webform/components/date.inc' (include_path='.;C:\www\php\pear\') in C:\www\htdocs\drupal\src\drupal\includes\module.inc on line 262

Any help would be greatly appreciated...

M

jasom’s picture

#37 works nice

richygecko’s picture

patch #37 working fine for me as well.

GiorgosK’s picture

Version: 6.x-2.x-dev » 6.x-2.9
Category: support » feature

Can we turn this into a feature request

#37 from @jeffschuler works like a charm with date_popup from date 2.4 with webform 2.9

changing version to 2.9 since there is no dev version to download

Mark B’s picture

Patch #37 worked great for me (D6.14, date 2.4, webform 2.9)

mettam’s picture

Version: 6.x-2.9 »

Patch #37 and the extra code in #47 are working for me so far in D6.15, Date 2.4 and Webform 3.x-dev.

jdiggety’s picture

Patch #37 is working well for me as well. Recommend it gets folded in. D6.15, Date 2.4, Webform 2.9

sgabe’s picture

Patch in #37 works for me with the modification too in #46, thanks!

mnlund’s picture

Hunk 1 and 2 fails on current 3 version

theohawse’s picture

Subscribing

In 3.x version the date field is showning up as drop downs, works just fine for me, for now
the popup feature would be very nice, not sure what ramsalt means by hunk 1 and 2,
but it looks like others have made this work. (I'm no good at patching to try).

silurius’s picture

Version: » 6.x-2.9

Subscribing. Will #37 and #46 get rolled into the next release? What's the status?

Also, is it possible to select more than one date in a given picker (as is the case with YUI I believe)?

quicksketch’s picture

Version: 6.x-2.9 » 6.x-3.x-dev
Status: Needs review » Needs work

Neither the patches will be rolled into the release because they (still) don't work the way I want them to. I want the date picker to work exactly the same way Webform works currently, only put a little popup calendar next to it. I don't want to have a textfield, ever. Unfortunately this is the way the date picker currently works as far as I know.

Additionally this will only be in the 3.x versions as no new features are being added to 2.x.

quicksketch’s picture

Also, is it possible to select more than one date in a given picker (as is the case with YUI I believe)?

This definitely won't be supported, because our date component only supports one date-per-field on the database side. Of course you can just add multiple date components though.

silurius’s picture

Ah, thanks very much for the update and feedback, quicksketch. My multi-selection use case involves the submission of anywhere from one to a dozen dates in a given transaction, so that last requirement has become kind of a must have here.

Since these dates cover a 6 month period, I suppose I can work around it by offering list boxes for each month, with each list box including every day of that month. Kind of kludgy, but probably passable. Thanks again.

jazzitup’s picture

@silurious: Why don't you go with something like this:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMul...

jackylam’s picture

Could you post the patch working for Drupal 6.15+date 2.4+webform 3.x-dev? I cannot apply the patch cleanly. Thanks.

eforth’s picture

FEEDBACK - both patch and quick dirty little mod worked fine! Using Webform 6.x-2.9

quicksketch’s picture

I'm finally turning my attention to this issue. I've moved the CSS/JS files around in #767674: Move CSS/JS to dedicated directories. so that we'll have a logical place to implement our own JavaScript for the date component on the front-end.

As far as I've seen, the jQuery UI Date selector should be mature enough to handle the UI that I want. Basically as accurately summarized by jeffschuler in #33:

It seems to me we're looking at 3 options for date selection, (which I'll name to show my bias:)

  • Fine: Text field for full date
  • Decent: Drop downs for Y, M, D
  • Best: Calendar picker

Though instead of having Best and Fine, I want to have Best and Decent. Essentially, I don't want to ever have to use a textfield for entering a date. Even if you have JavaScript, the textfield is still shown which is terribly confusing.

So the plan is basically this:
- In Drupal 6 if you have the Date Popup Module installed you'll get an option to use the popup calendar. We'll utilize Date Popup to add the jQuery UI datepicker JavaScript, but we won't actually use the #type = date_popup element, because it doesn't support drop-down selects.
- In Drupal 7 we don't need to require anything because jQuery UI, including the datepicker JS, is built-in.

quicksketch’s picture

Status: Needs work » Needs review
FileSize
32.92 KB
210 bytes
10.39 KB
10.44 KB

Here we are finally. This patch works as described in #64. If you have date_popup module installed on Drupal 6, it adds and option for the popup calendar. If you don't have it, Webform acts exactly the way it does currently (see attached screenshot).

Additionally it supports the following:
- Properly restricts start/end years.
- May be toggled per field. Since as imclean noted in #45, date pickers don't make sense for "Date of birth" fields or for historical dates.
- The popup pairs both ways with the select lists, so you can choose "Nov" and "2010", leave the day empty, and then the popup will match the month and year, allowing you to choose the day.

Surprisingly however, there are absolutely NO icons for a calendar included in date_popup or in jQuery UI, so I had to add one of my own. Perhaps in the future date popup module can include a similar icon, though since it's not required at all in Drupal 7, maybe we'd need to add it to core some how. Hmm.

Anyway, this patch requires that you manually create an "images" directory inside of webform and put calendar.png inside of it. I may just put this into CVS and make another beta to ease the testing process, since this requires both that you're running the latest dev and that you can apply a patch and put the new image into place.

quicksketch’s picture

Title: Calendar Date selector component » Add popup calendar to date component
Status: Needs review » Fixed

I've committed to 3.x so that people can get their hands on a usable version in 3.x beta 5, which I'll be making this weekend.

quicksketch’s picture

Also, is it possible to change the default year range of 3 years either side of the current year? The year fields already exist in the configuration for the date field but the popup seems to ignore them.

@imclean: I took your request and made a separate issue for it over at #767812: Add relative date support to start and end years. Fortunately it seems that the jQuery datepicker also supports ranges just as easily as hard dates, so it should be a trivial enhancement.

Danny Englander’s picture

FileSize
91.92 KB

I have tested this out and it works nicely but find that having both drop down menus and a pop up calendar is too much, it would be ideal to have the page load with just the pop up calendar in the open position. See my annotated attachment.

quicksketch’s picture

The calendar icon should be inline with the rest of the fields, it looks like CSS is pushing it down to the next level. Please open a new issue for your request of having an inline calendar.

Danny Englander’s picture

quicksketch - I wanted it that way for theming, so I used CSS to push it down but you are correct it would be an inline function which I failed to mention. Similar to what's on this page:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/inlineDatePic...
thanks, I will open a new issue.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

devkinetic’s picture

Status: Closed (fixed) » Needs work

This functionality breaks the panels module.

Create a webform with a date field and this popup enabled. Add it to a panels page (full not teaser). Save.

Return to the editing of the panel page and pop open firebug. The following error is returned:

$calendar[0] is undefined
var startYear = $calendar[0].class...bform-calendar-start-(\d+).*/, '$1');

Now when you edit the settings of any panels component (the modal that pops up) and hit the finish button, the modal will never close and firebug will display the above noted error.

quicksketch’s picture

Status: Needs work » Closed (fixed)

devkinetic: I've moved your request to a new issue: #832952: Popup calendar does not work within Panels.

raiz123456’s picture

Hi all,

I am new to drupal, if anyone could make a patch for calendar in webform module, though I also have jQuery UI module but could not able to work, but could not resolved the issue.
i have incorporated calendar.inc in components but when I tried to use it could not appear in webform though found in drop-down but calendar field is not been added.Plz help?
Please help how can I use patch because when I tried to use patch < webform_date_popup7.patch
its giving me error.

jazzitup’s picture

@raiz123456: Patch it manually. Learn how: http://drupal.org/node/534548

crystaldawn’s picture

Status: Closed (fixed) » Needs work

I must say that I concur with #68 on this issue of aethestics. It's pointless to have the dropdowns eating up real estate on the page and not having the calendar display on the page kinda defeats the purpose of this whole mess to begin with. The whole point was to get a nice calendar UI. The point wasnt to get a nice calendar UI and then hide it so non-technical users cant find it! The option to hide the dropdowns and have it automatically open make the most sense to me. It would eliminate the need for the calendar icon as well. I've got these working on my site, but only after having added extra JS myself for onload and using ugly css display:none which is like the biggest no no ever. These types of work arounds shouldnt be required imho. We have had good progress with this issue albeit it took forever, but I dont think this particular feature is complete yet in its current state and hopefully wont take another 4 years for it to mature like this issue itself took lol. All of the aesthetics should be options btw. Maybe someone out there actually wants the clunky drop downs for people still using a Lynx/Links/Gopher browser lol. Fallbacks based on JS support is a good idea although I dont even bother with that anymore these days because if the browser isnt using JS, its likely either some security buff who wont care about page look anyways or some oddball phone with a screen the size of a nickel in which case the page probably looks like crap anyways.

quicksketch’s picture

Status: Needs work » Closed (fixed)

Please open a new issue with your concerns. This particular request has been complete for almost a year.

phelix’s picture

How can we get this calendar to by default open up with today's day instead of January 2011? Is this possible?

sarhansg’s picture

Any one has the answer to this? Also is it possible to restrict the time value (e.g. only allow 9am to 6pm)?

vernond’s picture

@phelix - Enter the word 'today' or 'now' (without the quotes) in the Default value textfield on the date component edit page.