WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Date picker? (12 posts)

  1. zotsf
    Member
    Posted 4 years ago #

    Has anyone implemented a date picker for this plugin? If so, would you please share how you did so?

    Thanks.

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

  2. zotsf
    Member
    Posted 3 years ago #

    I've added the standard jQuery datepicker by installing the appropriate jquery ui .js and .css files, adding an identifying ID to the contact form 7 form field, and calling jQuery's datepicker(); on that ID.

  3. edtstu
    Member
    Posted 3 years ago #

    Can you give any more details?

  4. edtstu
    Member
    Posted 3 years ago #

    anyone?

  5. adaldesign
    Member
    Posted 3 years ago #

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript" src="scripts/datePicker/date.js"></script>
      <script type="text/javascript" src="scripts/datePicker/jquery.datePicker.min-2.1.2.js"></script>
      <link rel="stylesheet" type="text/css" media="screen" href="scripts/datePicker/dates.css">

    Change the above script calls to reference the actual files (search for the date picker on google).

    Then give "datePicker" class to text fields in your form:

    [text date1 class:datePicker]

    Then use this to make the change:

    $('.datePicker').datePicker({clickInput:true})

    Good luck!

  6. adaldesign
    Member
    Posted 3 years ago #

    But I wouldn't call this issue quite resolved... I would like to use this solution as a fallback only.

    Contact form 7 should have support for <input type="date" />

  7. quentinio
    Member
    Posted 3 years ago #

    Hey thanks for that adaldesign! Just what I needed!

    For further reference, at least with the latest jQueryUI, the function should be in lower case:

    $('.datePicker').datepicker({clickInput:true})

    Thanks!

  8. jmh
    Member
    Posted 3 years ago #

    This worked great for me. Had to make the "datepicker" lowercase as quentinio suggested.

    Thanks!

  9. buxol
    Member
    Posted 3 years ago #

    Would you guys please explain where I should change this code?
    I can't get it to work... feel like such a noob. :-)

  10. jmh
    Member
    Posted 3 years ago #

    You would put something like this in your header:

    <script type="text/javascript">
    $(document).ready(function() {
    
    	$('.datepicker').datepicker({clickInput:true})
    
    });
    </script>

    and then add:

    class:datepicker

    to the field you want the datepicker on in your contact7 form.

  11. phycel
    Member
    Posted 3 years ago #

    I know this is somewhat of an older thread, but thought I'd share this nifty plugin for people who want to take the easy way out integrating a datepicker with cf7.

    http://wordpress.org/extend/plugins/cf7-calendar/

  12. NicoJulius
    Member
    Posted 3 years ago #

    Because a lot of people are looking for this I wrote a little tutorial about this:
    http://www.wordpressninja.com/2011/06/how-to-add-a-jquery-datepicker-to-your-contact-form-7/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic