Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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.
Comment | File | Size | Author |
---|---|---|---|
#68 | 2010-04-19_12.23.52.png | 91.92 KB | Danny Englander |
#65 | webform_date_popup6.patch | 10.44 KB | quicksketch |
#65 | webform_date_popup7.patch | 10.39 KB | quicksketch |
#65 | calendar.png | 210 bytes | quicksketch |
#65 | webform-date-popup.png | 32.92 KB | quicksketch |
Comments
Comment #1
nedjoThis looks like it's for the webform module rather than javascript tools.
Comment #2
quicksketchThis 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.
Comment #3
quicksketchWe 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.
Comment #4
pvasener CreditAttribution: pvasener commentedI 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.
Comment #5
roczei CreditAttribution: roczei commentedhttp://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
Comment #6
Johannes De Boeck CreditAttribution: Johannes De Boeck commentedThanks 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
Comment #7
aterchin CreditAttribution: aterchin commentedbump. 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.
Comment #8
nedjoThere 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.
Comment #9
jazzitup CreditAttribution: jazzitup commentedIs 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...
Comment #10
quicksketchNo, 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.
Comment #11
quicksketchMarked http://drupal.org/node/252609 as duplicate.
Comment #12
Anonymous (not verified) CreditAttribution: Anonymous commentedWhy 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...
Comment #13
quicksketchAn 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).
Comment #14
Gribnif CreditAttribution: Gribnif commentedHere'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?
Comment #15
quicksketchNice! 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?
Comment #16
Gribnif CreditAttribution: Gribnif commentedIMHO, 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.
Comment #17
quicksketchI totally agree. I was just pointing out that YUI behaves mostly the way I'd like it to, unlike the the jQuery calendar.
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
Comment #18
quicksketchOh, 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
Comment #19
primerg CreditAttribution: primerg commentedsubscribing. do we have updates on this issue?
Comment #20
khan2ims CreditAttribution: khan2ims commentedSubscribing...
Comment #21
ntg CreditAttribution: ntg commentedSubscribing
Comment #22
taxicab221 CreditAttribution: taxicab221 commentedSubscribing
Comment #23
nelslynn CreditAttribution: nelslynn commentedSubscribing
Comment #24
Gerard CreditAttribution: Gerard commentedSubscribing
Comment #25
drupalok CreditAttribution: drupalok commentedSubscribing
Comment #26
jusyjim CreditAttribution: jusyjim commentedsubscribing
Comment #27
jwinton CreditAttribution: jwinton commentedsubscribing
Comment #28
geraldferguson CreditAttribution: geraldferguson commentedyet another subscriber
Comment #29
bocky CreditAttribution: bocky commentedSubscribing...
Comment #30
stefan81 CreditAttribution: stefan81 commentedsubscribing
Comment #31
site_issues CreditAttribution: site_issues commentedsubscribing
Comment #32
jeffschulerjQuery 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.
Comment #33
jeffschulerA 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:)
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.
Comment #34
haggins CreditAttribution: haggins commentedsubscribing
Comment #35
chorrylan CreditAttribution: chorrylan commentedsubscribing
Comment #36
jdlind38 CreditAttribution: jdlind38 commentedI'm also in need of a date popup solution for some fields in my webform...
Comment #37
jeffschulerHere 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.
Comment #38
mcpuddin CreditAttribution: mcpuddin commentedPatch 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
Comment #39
outbackbrazil CreditAttribution: outbackbrazil commentedHow do I get this patch(thread #37) integrated into the webform module?
Cheers,
Comment #40
jeffschuler@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.
Comment #41
bryancasler CreditAttribution: bryancasler commentedI 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.
Comment #42
jeffschuler@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.
Comment #43
bryancasler CreditAttribution: bryancasler commentedSorry my setup has changed so much since then that I would not be able to re-duplicate that scenario.
Comment #44
imclean CreditAttribution: imclean commentedApplied patch from #37 to Webform 6.x-2.9 and all is working well so far. A very useful addition, thanks.
Comment #45
imclean CreditAttribution: imclean commentedOne 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.
Comment #46
imclean CreditAttribution: imclean commentedHere'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;
:Comment #47
mmenegon CreditAttribution: mmenegon commentedHi 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
Comment #48
jasom CreditAttribution: jasom commented#37 works nice
Comment #49
richygecko CreditAttribution: richygecko commentedpatch #37 working fine for me as well.
Comment #50
GiorgosKCan 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
Comment #51
Mark B CreditAttribution: Mark B commentedPatch #37 worked great for me (D6.14, date 2.4, webform 2.9)
Comment #52
mettam CreditAttribution: mettam commentedPatch #37 and the extra code in #47 are working for me so far in D6.15, Date 2.4 and Webform 3.x-dev.
Comment #53
jdiggety CreditAttribution: jdiggety commentedPatch #37 is working well for me as well. Recommend it gets folded in. D6.15, Date 2.4, Webform 2.9
Comment #54
sgabe CreditAttribution: sgabe commentedPatch in #37 works for me with the modification too in #46, thanks!
Comment #55
mnlund CreditAttribution: mnlund commentedHunk 1 and 2 fails on current 3 version
Comment #56
theohawse CreditAttribution: theohawse commentedSubscribing
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).
Comment #57
silurius CreditAttribution: silurius commentedSubscribing. 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)?
Comment #58
quicksketchNeither 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.
Comment #59
quicksketchThis 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.
Comment #60
silurius CreditAttribution: silurius commentedAh, 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.
Comment #61
jazzitup CreditAttribution: jazzitup commented@silurious: Why don't you go with something like this:
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerMul...
Comment #62
jackylam CreditAttribution: jackylam commentedCould you post the patch working for Drupal 6.15+date 2.4+webform 3.x-dev? I cannot apply the patch cleanly. Thanks.
Comment #63
eforth CreditAttribution: eforth commentedFEEDBACK - both patch and quick dirty little mod worked fine! Using Webform 6.x-2.9
Comment #64
quicksketchI'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:
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.
Comment #65
quicksketchHere 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.
Comment #66
quicksketchI'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.
Comment #67
quicksketch@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.
Comment #68
Danny EnglanderI 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.
Comment #69
quicksketchThe 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.
Comment #70
Danny Englanderquicksketch - 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.
Comment #72
devkinetic CreditAttribution: devkinetic commentedThis 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.
Comment #73
quicksketchdevkinetic: I've moved your request to a new issue: #832952: Popup calendar does not work within Panels.
Comment #74
raiz123456 CreditAttribution: raiz123456 commentedHi 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.
Comment #75
jazzitup CreditAttribution: jazzitup commented@raiz123456: Patch it manually. Learn how: http://drupal.org/node/534548
Comment #76
crystaldawn CreditAttribution: crystaldawn commentedI 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.
Comment #77
quicksketchPlease open a new issue with your concerns. This particular request has been complete for almost a year.
Comment #78
phelix CreditAttribution: phelix commentedHow can we get this calendar to by default open up with today's day instead of January 2011? Is this possible?
Comment #79
sarhansg CreditAttribution: sarhansg commentedAny one has the answer to this? Also is it possible to restrict the time value (e.g. only allow 9am to 6pm)?
Comment #80
vernond CreditAttribution: vernond commented@phelix - Enter the word 'today' or 'now' (without the quotes) in the Default value textfield on the date component edit page.