Is there a way to make the input a text field rather than a select list?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

arlinsandbulte’s picture

Yes, it is in the widget settings of you date field.

gregory.lambert’s picture

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

KarenS’s picture

Project: Date » Webform
Version: 7.x-2.x-dev » 7.x-3.x-dev
Component: Date Popup » Code

The date field in a Webform is not controlled by the Date module. Webform has its own date field.

quicksketch’s picture

Title: Replace select list with basic text field input box. » Replace date component select lists with basic text field input box.

Webform currently does not have this ability.

breeze76’s picture

I am using webform for D6 and was thinking the same thing.. would be really more pleasing to the user as well...

Anonymous’s picture

any solutions to this? or did anyone get anywhere?
... perhaps we can all take a look together

Anonymous’s picture

K, 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

      onSelect: function(dateText, inst) {
        var date = dateText.split('-');
        $webformDatepicker.find('select.year, input.year').val(+date[0]);
        $webformDatepicker.find('select.month').val(+date[1]);
        $webformDatepicker.find('select.day').val(+date[2]);
      },

starting @ line 51

        // Get the select list values.
        var year = $webformDatepicker.find('select.year, input.year').val();
        var month = $webformDatepicker.find('select.month').val();
        var day = $webformDatepicker.find('select.day').val();
    it should be changed to the following in order to read and write values to the input fields:

starting @ line 44

      onSelect: function(dateText, inst) {
        var date = dateText.split('-');
        $webformDatepicker.find('select.year, input.year').val(+date[0]);
        $webformDatepicker.find('select.month, input.month').val(+date[1]);
        $webformDatepicker.find('select.day, input.day').val(+date[2]);
      },

starting @ line 51

        // Get the select list values.
        var year = $webformDatepicker.find('select.year, input.year').val();
        var month = $webformDatepicker.find('select.month, input.month').val();
        var day = $webformDatepicker.find('select.day, input.day').val();
breeze76’s picture

This looks good, but can someone from the webform group check and make an official path, please...

Anonymous’s picture

if 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!

breeze76’s picture

Careless, I agree with you.. I have looked at GIT but it is way over my head

vernond’s picture

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

Anonymous’s picture

This is why I feel it's neccessary, rather than a drop down.
It fits better.

FAAREIA’s picture

It'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)

quicksketch’s picture

Title: Replace date component select lists with basic text field input box. » Replace date component select lists with HTML5 date field input box.
FileSize
121 KB

I 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:
iPhone date example

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.

FAAREIA’s picture

Title: Replace date component select lists with HTML5 date field input box. » Replace date component select lists with basic text field input box

mmmmmmmmmm, 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.

quicksketch’s picture

mmmmmmmmmm, i still work on web pages that crossbrowse IE7+, FF3+, safari 3+. i don't think working with HTML5 for at least 1++ years.

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

quicksketch’s picture

quicksketch’s picture

FileSize
11.08 KB

Here'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.

quicksketch’s picture

Title: Replace date component select lists with basic text field input box » Replace date component select lists with HTML5 date field input box

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

quicksketch’s picture

Category: task » feature
Status: Active » Needs work
FAAREIA’s picture

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

Anonymous’s picture

What 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

CodigoVision’s picture

I 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:

<?php
 $idKey = str_replace('_', '-', $component['form_key']); 
?>

<input type="text" id="edit-submitted-<?php print $idKey ?>" class="form-text <?php print implode(' ', $calendar_classes); ?>" alt="<?php print t('Open popup calendar'); ?>" title="<?php print t('Open popup calendar'); ?>" />

Then add the following to your css:

.webform-container-inline.webform-datepicker  div.form-item.form-type-select {
    display: none;
}

You can see a working example on www.hangglidecr.com at the bottom of the page.

leonano’s picture

How can i change the date format? codigovision, the text is aaaa-mm-dd, my format is dd-mm-yyyy

CodigoVision’s picture

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

FAAREIA’s picture

Hi 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

Xrobak’s picture

Issue summary: View changes

Solution #23 works fine but has a notice:

Notice: Use of undefined constant form_key - assumed 'form_key' in function include()

just replace $component[form_key] with $component['form_key']

CodigoVision’s picture

Thanks Xrobak, I updated my example!

scott859’s picture

Greetings,

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!

CodigoVision’s picture

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

<script type="text/javascript">
(function ($) {
    $(document).ready(function() {
        var dateId = "edit-submitted-<?php print $idKey; ?>";
        var month = $('#' + dateId + '-month option:selected').text();
        var day = $('#' + dateId + '-day option:selected').text();
        var year = $('#' + dateId + '-year option:selected').text();
        if (month !== 'Month'){
            var date = new Date(month + ' ' + day +','+ year);
            $('#' + dateId).val($.datepicker.formatDate('yy-m-dd',date));
            $("label[for='" + dateId + "']").css({opacity:0});
        }
    });
})(jQuery);
</script>

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:

$("label[for='" + dateId + "']").css({opacity:0});

I have updated and tested this on www.hangglidecr.com

scott859’s picture

@Codigo Vision - Thanks so much!

kyleheney’s picture

Hi,

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.

DanChadwick’s picture

Status: Needs work » Closed (won't fix)

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

yetijunior’s picture

Hi, 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.

apprentia’s picture

Hello,

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!

Entropia Contingente’s picture

@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

function THEMENAME_js_alter(&$javascript){
  if(isset($javascript['sites/all/modules/contrib/webform/js/webform.js'])){
    unset($javascript['sites/all/modules/contrib/webform/js/webform.js']);
    drupal_add_js(path_to_theme() . '/js/webform.js');
  }
}

THEMENAME/JS/webform.js

from line 45 to 76

$calendar.datepicker({
      dateFormat: 'dd-mm-yy',
      yearRange: startYear + ':' + endYear,
      firstDay: parseInt(firstDay),
      minDate: startDate,
      maxDate: endDate,
      onSelect: function(dateText, inst) {
        var date = dateText.split('-');
        $webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change');
        $webformDatepicker.find('select.month').val(+date[1]).trigger('change');
        $webformDatepicker.find('select.day').val(+date[0]).trigger('change');
      },
      beforeShow: function(input, inst) {
        // Get the select list values.
        var year = $webformDatepicker.find('select.year, input.year').val();
        var month = $webformDatepicker.find('select.month').val();
        var day = $webformDatepicker.find('select.day').val();

        // If empty, default to the current year/month/day in the popup.
        var today = new Date();
        year = year ? year : today.getFullYear();
        month = month ? month : today.getMonth() + 1;
        day = day ? day : today.getDate();

        // Make sure that the default year fits in the available options.
        year = (year < startYear || year > endYear) ? startYear : year;

        // jQuery UI Datepicker will read the input field and base its date off
        // of that, even though in our case the input field is a button.
        $(input).val(day + '-' + month + '-' + year);
      }
    });

As you can see thre is some changes to reformat the date

The first step is the datepicker configuration

line 46

 dateFormat: 'dd-mm-yy',

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

        $webformDatepicker.find('select.year, input.year').val(+date[2]).trigger('change');
        $webformDatepicker.find('select.month').val(+date[1]).trigger('change');
        $webformDatepicker.find('select.day').val(+date[0]).trigger('change');

The third step is to update the beforeShow option, so when selecting the field the value will be in the right format.

line 74

        $(input).val(day + '-' + month + '-' + year);

Hope this will be helpful.

d8v15’s picture

How to change date format to MM-DD-YYYY and the calendar icon is missing

harishpatel86’s picture

FileSize
48.28 KB

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

nshaik@textron.com’s picture

@CodigoVision - Thanks a million for the solution!

Beezer75’s picture

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

davemaxg’s picture

#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);
});

jatin-vora’s picture

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

jatin-vora’s picture

@davemaxg
I tried to put it in webform-calendar.tpl.php file just before input box, if you can help