Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Is there a way to make the input a text field rather than a select list?
Comment | File | Size | Author |
---|---|---|---|
#38 | weform_date_popup issue.png | 48.28 KB | harishpatel86 |
Comments
Comment #1
arlinsandbulte CreditAttribution: arlinsandbulte commentedYes, it is in the widget settings of you date field.
Comment #2
gregory.lambert CreditAttribution: gregory.lambert commentedSo I'll be a little more clear. I have a Webform to which I have a field that is of type Date. When I edit the setting for this field I'm able to check 'Enable popup calendar'. Once This is save the rendered output is 3 dropdown boxes (Month, Day, and Year) with the calendar icon inline to the dropdown boxes. I'd like to have the popup calendar functionality but the rendered input type be a simple input box not select.
Comment #3
KarenS CreditAttribution: KarenS commentedThe date field in a Webform is not controlled by the Date module. Webform has its own date field.
Comment #4
quicksketchWebform currently does not have this ability.
Comment #5
breeze76 CreditAttribution: breeze76 commentedI am using webform for D6 and was thinking the same thing.. would be really more pleasing to the user as well...
Comment #6
Anonymous (not verified) CreditAttribution: Anonymous commentedany solutions to this? or did anyone get anywhere?
... perhaps we can all take a look together
Comment #7
Anonymous (not verified) CreditAttribution: Anonymous commentedK, I got this to work.
I don't know how to create a patch and I'm not going to hold up the feature implementation for you guys by trying to learn at this current point in time. So here's what I did.
Essentially, all that is done is copying any code that references "year_textfield" in the components/date.inc file, and making two copies of those blocks of code and changing the "year" in the code to "day" on one of the copies and "month" on the other copy (i.e. "month_textfield").
COPY/CHANGE EVERY INSTANCE.
Then in the js/webform.js, you'll notice the following:
starting @ line 44
starting @ line 51
it should be changed to the following in order to read and write values to the input fields:
starting @ line 44
starting @ line 51
Comment #8
breeze76 CreditAttribution: breeze76 commentedThis looks good, but can someone from the webform group check and make an official path, please...
Comment #9
Anonymous (not verified) CreditAttribution: Anonymous commentedif i knew how the heck to use git or whatever, or it made sense in a single user environment like the on I'm in... I'd be all over it!
my apologies!
Comment #10
breeze76 CreditAttribution: breeze76 commentedCareless, I agree with you.. I have looked at GIT but it is way over my head
Comment #11
vernond CreditAttribution: vernond commented:-) Once you get it, git makes a LOT of sense, no matter how many users your environment has.
Getting back to the issue at hand: Are you guys really truly genuinely convinced that users would rather type out the date fields than select day-month-year them from lists? I personally do not see how this is a "every webform should have it" feature... but then maybe I live a sheltered life.
Comment #12
Anonymous (not verified) CreditAttribution: Anonymous commentedThis is why I feel it's neccessary, rather than a drop down.
It fits better.
Comment #13
FAAREIA CreditAttribution: FAAREIA commentedIt's far better to have one field than 3 fields.
It's better for design (for example, on an "Online reservation" block on the right column of your page).
Plus, the user only click on a textfield box and a pop-up calendar show up and he does no have to select 3 times to complete a date.
hope someone can make a patch, i'll try #7 for now. (nothing happens when i tested XD. i have webform 3.15)
Comment #14
quicksketchI had been resistant to the single textfield instead of 3 fields in the past because 3 fields leaves no doubt about the input format required, it's easy to read, and easy to auto-complete. The "works better in small places" argument behind a single textfield is valid, but I think the real motivator for me now is the HTML5 "date" element, which renders as a textfield in old browsers, but in new browsers (and especially mobile platforms), the built-in date picker is much better than anything you can do with JavaScript.
For example, here's the w3schools date page: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_date
And the way it looks on an iPhone:
The need to support mobile browsers is all the convincing I really need, though we'd keep the date-picker popup for desktop browsers that do not support native date pickers.
Comment #15
FAAREIA CreditAttribution: FAAREIA commentedmmmmmmmmmm, i still work on web pages that crossbrowse IE7+, FF3+, safari 3+. i don't think working with HTML5 for at least 1++ years.
that's not the solution for a crossbrowser site. plus i always starts the css from scratch and change almost every image. i don't think i can easily change that image.
changed the title back.
Comment #16
quicksketchEvery browser all the way back to IE5 or NS4 will render a
type="date"
field as a textfield. Even Firefox 8 (what I'm using right now) doesn't provide a specialized "date" input field, for me it just shows up as a textfield, just like you're requesting. So basically I'm saying we'll do exactly what you want (create a single textfield for date input), but on on browsers that support it, it will use the native date-picker.Comment #17
quicksketchA similar request: #908958: Use HTML5 type="email" for e-mail field input type
Comment #18
quicksketchHere's a starting patch that will use an HTML5 type="date" element. For your purposes, you'll probably find it works like you're wanting.
I'm conflicted about this patch. On one hand I don't think that a single textfield is very user-friendly, especially for dates that don't work well with a popup calendar (like entering a birthday, a calendar is actually unhelpful). On the other hand, I don't think we should include the current calendar as an alternative, because asking the user to choose between "HTML5/Mobile Friendly" and "Drop down select lists" seems like an unnecessary burden. I'll need to think about this for a bit.
Comment #19
quicksketchAfter giving this some thought, I think the option of either the single textfield (as an HTML5 date field really) or the current 3 select lists actually still makes sense to maintain. I still think the current approach of 3 select lists is most suitable for historical dates and birthdays, while a single textfield (plus popup or mobile support) is better for relative dates close to the present day.
To address your concern about HTML5 compatibility, I've file a separate issue at #1375708: Provide a site-wide setting for utilizing HTML5 elements, though I think you'll find HTML5 elements are 100% backwards compatible, providing the option may still be a good idea for users that are forced to meet XHTML validation.
Comment #20
quicksketchComment #21
FAAREIA CreditAttribution: FAAREIA commentedi agree with you quicksketch. the 3 fields are necesary but one field is too for some cases.
plus, you can make a one date field with CSS. You can "display: none" the 3 divs that contains label and input of the 3 fields. Then replace at "webform-calendar.tpl.php" the
<input type=image.... />
of the pop up calendar with an<input type="text" class=anyclass"...../>.
then you have a one field date input =) that's not html5 at the moment.
Comment #22
Anonymous (not verified) CreditAttribution: Anonymous commentedWhat about this technique I have found on google:
http://your-source.nl/en/snippets/replace-drupal-date-popup-html5-date-i...
It is for date field, but I think it could be a good start for webform date field
Regards
Comment #23
CodigoVision CreditAttribution: CodigoVision commentedI used the suggestion from FAAREIA and created a solution that works with In-Field Labels https://drupal.org/project/In-Field-Labels
Add webform-calendar.tpl.php to your theme with the following code:
Then add the following to your css:
You can see a working example on www.hangglidecr.com at the bottom of the page.
Comment #24
leonano CreditAttribution: leonano commentedHow can i change the date format? codigovision, the text is aaaa-mm-dd, my format is dd-mm-yyyy
Comment #25
CodigoVision CreditAttribution: CodigoVision commentedHi Leonano, I don't see a way to change the date format in webform. I know you can set the date format using https://drupal.org/project/entityform if you don't mind going in a completely new direction.
Comment #26
FAAREIA CreditAttribution: FAAREIA commentedHi leonano, perhaps you are looking for:
components/date.inc
You can touch that file and put the date format you need. Line 210 can be, or others, i didn't test them all but i know i it's there, i had the same issue for a previous project.
Hope it helps
Comment #27
Xrobak CreditAttribution: Xrobak commentedSolution #23 works fine but has a notice:
just replace
$component[form_key]
with$component['form_key']
Comment #28
CodigoVision CreditAttribution: CodigoVision commentedThanks Xrobak, I updated my example!
Comment #29
scott859 CreditAttribution: scott859 commentedGreetings,
The solution posted in #23 worked (by applying the code (post #27) fix) for me, thanks for your help on this.
One issue I noticed is that if the user doesn't fill out all the required fields, and thus is prompted to fill out those fields upon form submission, the data in the text field date box(es) isn't saved and has to be filled in again. This happens also with a captcha prompt as well.
If anyone has a solution to this, I would appreciate it!
Comment #30
CodigoVision CreditAttribution: CodigoVision commentedHere is a Javascript solution. You will need to add this to the webform-calendar.tpl.php (because it uses the $idKey variable). This is assuming you've already created the custom webform-calendar.tpl.php in your theme from #23.
The date fields for month, day, and year are still populated after submitting with an error, so all I did was use this javascript to get those values and if the month field does not equal "Month" (the default value) then it adds the date to our custom input field. It also assumes you are using a select field for the year.
If you're not using infield labels you will need to remove the line for the label:
I have updated and tested this on www.hangglidecr.com
Comment #31
scott859 CreditAttribution: scott859 commented@Codigo Vision - Thanks so much!
Comment #32
kyleheney CreditAttribution: kyleheney commentedHi,
I tried the technique above (#23) and it is removing all the date fields... it only shows the calendar icon that pops up when clicked. The issue is that there is no text field that displays what the user selects from the calendar, just the icon itself. Any help is appreciated.
Comment #33
DanChadwick CreditAttribution: DanChadwick commentedPlease note that the 7.x-3.x branch is receiving only critical bug fixes. Version 7.x-4.x has an optional pop-up calendar date picker and there is a separate issue for a HTML5 option.
Comment #34
yetijunior CreditAttribution: yetijunior commentedHi, not sure this is the right place for my question but I am new to drupal please excuse me if not...
I am trying to display a text such as "please select your date" in a popup_date field but cannot make it work at all. I have tried solution #23 but doesn't seems to work ever. I must be missing something somewhere? I am only using 1 module file for my form and a css. The form is display in a block and works fine.
I created a file names webform-calendar.tpl.php in mysite/site/all/themes/mytheme/templates/
My module and css is in mysite/sites/all/modules/own/mymodule.module
I did copy .webform-container-inline.webform-datepicker div.form-item.form-type-select {
display: none;
} in my css
I am using Drupal7.
Do I need to call the theme or something like that?
Thank you in adance for your reply.
Comment #35
apprentia CreditAttribution: apprentia commentedHello,
I have implemented the solution in #23 and have also come up with the date format issue. Then in #26 FAAREIA says :
"Hi leonano, perhaps you are looking for: components/date.inc"
I have also noticed that if you modify line 81 webform.js there is :
$(input).val(year + '-' + month + '-' + day);
and you can get the display to do what you want and still have valid submissions...
However this is probably not the best way of going about it,is there anyone who could point me to where I could understand how webform.js initialises date picker calendar and know how to override it in a proper manner?
Thanks for all your answers in this thread!
Comment #36
Entropia Contingente CreditAttribution: Entropia Contingente at H2H Creative Productions commented@apprentia
Copy webform.js inside your theme folder (guess is more appropriate cause this operation don't implement any logic).
Rework it as you like.
Unset webform's webform.js via THMENAME_js_alter() and add your own copy of webform.js
Some code to replace the yy-mm-dd date format with dd-mm-yy
THEMENAME/template.php
THEMENAME/JS/webform.js
from line 45 to 76
As you can see thre is some changes to reformat the date
The first step is the datepicker configuration
line 46
datepicker api documentation
The second step is to update the interaction on select, via the onSelect option, getting the right data from select elements
line 53 to 55
The third step is to update the beforeShow option, so when selecting the field the value will be in the right format.
line 74
Hope this will be helpful.
Comment #37
d8v15 CreditAttribution: d8v15 commentedHow to change date format to MM-DD-YYYY and the calendar icon is missing
Comment #38
harishpatel86 CreditAttribution: harishpatel86 commented#23 is working to get calendar in popup . But how can get month/year as a drop down select list to change the years and months. For #ref see attached images. For example , suppose i want to change year order current(2017) to previous year(1940) then how can select it.
Comment #39
nshaik@textron.com CreditAttribution: nshaik@textron.com commented@CodigoVision - Thanks a million for the solution!
Comment #40
Beezer75 CreditAttribution: Beezer75 commented#23 did the trick for me. Note that changing the input type to type="date" will make it html5. The only part I'd still like to do is turn off the calendar pop-up on some of the date fields -for example when inputting birth date, us old farts will probably prefer to enter the date versus click back through so many years! When I try to turn off the pop-up it loads the old version of select lists.
Comment #41
davemaxg CreditAttribution: davemaxg commented#23 worked for me too but I wasn't able to see the populated field on the submission page so I wrote this in case anyone can use it.
$('div.webform-submission .webform-datepicker').each(function(index) {
//populate the reconfigured date picker when submission loads
var year = $('select.year', this).val();
var month = $('select.month', this).val();
var day = $('select.day', this).val();
$('input', this).val(year + '-' + month + '-' + day);
});
Comment #42
jatin-vora CreditAttribution: jatin-vora commented@davemaxg
I agreed with your point, I am having same issue of populating date into textbox (after submitting and go to next step and come back to the page of date field the textbox is not getting pre-populate with selected date).
The solution you have provided #41, where do I need to put this code, would you please share that detail?
Comment #43
jatin-vora CreditAttribution: jatin-vora commented@davemaxg
I tried to put it in webform-calendar.tpl.php file just before input box, if you can help