WordPress.org

Forums

Contact Form 7
Date Picker problem (32 posts)

  1. Tifa
    Member
    Posted 1 year ago #

    I notice that the date picker does not work on all browsers. I don't think its a plugin conflict coz I disabled/enabled all plugins. Does anyone also have this problem? And is there a fix for this?

    Thanks

    http://wordpress.org/extend/plugins/contact-form-7/

  2. breeze76
    Member
    Posted 1 year ago #

    How do you even get the date picker to work? I cannot figure that one out..

  3. Tifa
    Member
    Posted 1 year ago #

    You "generate tag" then choose "date" from the drop down menu. See screenshot: http://wordpress.org/extend/plugins/contact-form-7/screenshots/

    Anyway, this date tag has been working before. Not sure if its the latest wordpress update that caused this not to work.

  4. breeze76
    Member
    Posted 1 year ago #

    I got it, I did not know that I needed to get the plugin for the date picker.. got it and it works.. Thanks...

  5. breeze76
    Member
    Posted 1 year ago #

    How and where do I format the date field size? I tried it in mt CSS where I have the rest of the form formatted but the date field will not take.

  6. Tifa
    Member
    Posted 1 year ago #

    You have to add a class first. When you generate there's this input for class, you should put it there. And the output would be something like this:
    [date date-938 class:myclass]

    The bold letters are added as class after the name of the date input. Now with a class, you can style it via css

  7. breeze76
    Member
    Posted 1 year ago #

    MegaToon Tv, It was styling with my css but the width was not, so I with the help of the plugin creator, he mentioned to me about setting in the setup of the field.. so, instead of formatting the width in the css I just do it in the setup, I wish it would just take in my css, I hate having to either code each field like you mentioned or having to set it for the fields that needs to be specific... thanks for the info though will keep that in mind, to bad it could not be a global or automatic thing...

  8. Tifa
    Member
    Posted 1 year ago #

    I think sometimes its global, depending on your theme. Check on your stylesheet if you have something like:

    input.textfield, textarea {width:500px;}

    you could always add width using code above. Sometimes it might be:
    .entry-content input

    If you can't find any, then you can use the code above

  9. netistix
    Member
    Posted 1 year ago #

    The Date tag works in Chrome but not in IE9. I am waiting patiently for an IE9 fix.

  10. witchdoc
    Member
    Posted 1 year ago #

    Same - can't get it working in Safari or FF either. Everything is updated to latest too. Need fix, please!

  11. Evdberg
    Member
    Posted 1 year ago #

    I have the same issue - Date tag works in Chrome and Safari but not in IE9.
    Any News on a fix ?

  12. markob83
    Member
    Posted 1 year ago #

    I was having the same problem so I used the jQuery UI Datepicker.

    It's pretty easy to use. Just download and upload jquery-ui.css/jquery-ui.js to your wp theme and add this script to your footer or header -

    `<script>
    $(document).ready(function(){
    $('.datepicker').datepicker({
    autoclose: true
    });
    });
    </script>`

    After that, go to CF7 and generate a text-field and assign the class "datepicker".

    You will now have a working datepicker in your contact form that works in chrome, ie, ff, and safari.

    Example

  13. dewetvanrensburg
    Member
    Posted 1 year ago #

    Thanks for the solution markob83, but I can't get it to work.
    I downloaded the following files :

    http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
    http://code.jquery.com/jquery-1.9.1.js
    http://code.jquery.com/ui/1.10.3/jquery-ui.js

    I uploaded the js files to the location all my other js files are saved, and did the same with the css file.

    I then added the code you provided to my header file, and created a new text field, and assigned the class "datepicker" - but I just get a normal text field when visiting the page.

    Any help would be appreciated.

  14. markob83
    Member
    Posted 1 year ago #

    Can you provide a link to your site?

  15. markob83
    Member
    Posted 1 year ago #

    @dewetvanrensburg delete everything you added. I created a plugin to help you out. You can download it here

    Install and activate the plugin and generate a text field with "cf7-datepicker" as the id.

    example -

    [text text-589 id:cf7-datepicker]

  16. dewetvanrensburg
    Member
    Posted 1 year ago #

    @markob83
    Thank you so much for your reply - I deleted everything I added, and downloaded and installed the plugin - but still no joy.
    Here is a link to my form : http://dewetvanrensburg.me/sites/expert/central-kalahari/
    I only tested in Chrome and Firefox, but the datepicker is not working, and I also can't enter any text to the newly added text field.

    Again, any help and/or suggestion would be appreciated.

  17. markob83
    Member
    Posted 1 year ago #

    Oops, I found a bug. I updated the plugin. Delete the old one and try this one

    sorry about that

  18. dewetvanrensburg
    Member
    Posted 1 year ago #

    @markob83 - still nothing - am I missing something?
    http://dewetvanrensburg.me/sites/expert/central-kalahari/

  19. markob83
    Member
    Posted 1 year ago #

    Try using the Twenty Twelve theme

  20. dewetvanrensburg
    Member
    Posted 1 year ago #

    Thanks @markob83 - it's working with Twenty Twelve - but I need a solution that will work with the theme I am using :(

  21. markob83
    Member
    Posted 1 year ago #

    Can you send me a copy of your theme? My email address is markob83@yahoo.com. I can take a look at it tomorrow.

  22. red5
    Member
    Posted 1 year ago #

    I'm having the same problem with the date picker. I'll try the jquery solution, but would really like for the plugin to work. The date picker works in chrome, opera, and ios. Does not work with firefox, safari, or ie.

  23. buzztone
    Member
    Posted 1 year ago #

    Contact Form 7 has some Datepicker support via the new HTML5 date input type (see http://contactform7.com/date-field/) but this is currently only supported on some browsers - see http://www.wufoo.com/html5/types/4-date.html

  24. anishjmc
    Member
    Posted 1 year ago #

    Hi, Its fixed for me.Thanks dewetvanrensburg

  25. Innovnate
    Member
    Posted 1 year ago #

    markob83 - for me, your plugin would work for one date field, but not a second - any way to make it work for two seperate date fields?

  26. anishjmc
    Member
    Posted 1 year ago #

    Hi Markob83,

    There was same problem for me too.I managed to get rid of it with adding the new date picker name to the script in header file like below

    <script>
    $(function()
    {
    $.noConflict();
    $( "#datepicker" ).datepicker();
    $( "#datepicker1" ).datepicker();
    });
    </script>

  27. nikoslefkas
    Member
    Posted 1 year ago #

    Here is the solution by the Contact Form 7 FAQ page.

    Does Contact Form 7 support HTML5 input types?

    Yes. Contact Form 7 3.4 and higher support form-tags corresponding to these HTML5 input types: email, tel, url, number, range and date.

    If you don’t wish to use HTML5 input types, you can disable this by adding the following code into your theme’s functions.php file:
    1

    add_filter( 'wpcf7_support_html5', '__return_false' );

    Note that even the most current browsers partially support HTML5. For example, the latest Firefox doesn’t support the date input type (that allows you to choose a date from a calendar user interface) and the number input type (that allows you to input a number value from a spinbox UI) yet — so Firefox provides a general text input field as a fallback instead of a calendar and spinbox UI. This may confuse users because they can’t detect what type of input value this field expects. So, you may feel that it is better to wait for all browsers to support all HTML5 features completely.

    But you don’t need to wait! Contact Form 7 offers a better solution. Contact Form 7 is able to provide jQuery UI-based fallback for the date and number input fields. By using this solution, you can provide calendar UI for the date field and spinbox UI for the number field, respectively, even with Firefox or Internet Explorer.

    By default, this fallback feature is disabled because it loads extra JavaScript and CSS (makes for poor performance) and it is only necessary for websites that use the date or the number input fields. If you use the date or number input fields and wish to use this jQuery UI-based fallback feature, add the following code into your theme’s functions.php file and activate the feature:
    1

    add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

  28. Greg007
    Member
    Posted 1 year ago #

    Hello, I need a contact form for my taxi website, but I would like to have a date form where you click on a calendar and select a date.
    Can this plugin work that way?

    I generated date form, but you have to type a date manually, it does not look professional to me. :)

    If this plugin cannot work that way, and recommendations for a plugin?
    Thanks!

  29. Greg007
    Member
    Posted 1 year ago #

    OK, just found the solution using google and made the date drop form... ;)

    If you know something better for me, write anyway...

  30. flick
    Member
    Posted 1 year ago #

    Can confirm that @nikoslefkas's reply from the CF7 FAQ section does work for me:

    Adding this to the theme functions.php -
    add_filter( 'wpcf7_support_html5_fallback', '__return_true' );

    The change is most drastic in Firefox.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic