WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Datepicker
Is it possible to Start a second date field from value in 1st (3 posts)

  1. bignose2
    Member
    Posted 2 years ago #

    Hi,

    I have a Contact Form 7 with the datepicker pluging.

    I have booking dates with a start date & end Date
    I would like the second "To date" to automatically being from the month, or even the day that was entered in the From field.
    Ideally prevent the date being entered to be before the From Date, but not essential.

    Is there a way to do this, preferably quite easy.

    Thanks I/A

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

  2. Esther
    Member
    Posted 1 year ago #

    Hi,
    I have the exact same request. Any suggestions? I can write some javascript.

    Thanks

  3. bignose2
    Member
    Posted 1 year ago #

    Hi,
    I did not really know what I was doing & new to java etc but put together stuff I found around, the howtoaddajquerydatepicker below gave me 95% of what I needed & just a huge amount of trial & error did the rest.
    Works really well, my http://www.fpkennels.com bookings link at bottom shows how well it can work. (please don't "send" as this is my working business)

    I have included my rambling notes, might give some hints, been a while since I did it so can't be much more help than that.

    Not as complicated or tricky as it may look (or it did to me or first viewing)

    The only small thing is the field size seems to be fixed, so a little wide for a date & if my www window is made small my from & to dates are not side by side.
    Also, Not 100% sure but having to put the code in via the theme editor I think if the theme is updated you might loose the code so keep a copy. Don't think it is saved or backup online

    There have been a few updates to contact form 7 & stuff so perhaps there are better solutions.

    Jquery-ui - Datepicker
    http://www.wordpressninja.com/2011/06/how-to-add-a-jquery-datepicker-to-your-contact-form-7/

    http://jqueryui.com/
    datepicker, download, I think I like the dark hive (can't seem to just link & change the these, seems download the whole lot?
    Upload as zip, in root, extract BUT add the folder /jqueryui so not directly in root.
    Remember page numbers as won't execute.
    Upper & lower case have dramatic effect, even True won't work must be true, s(S)electedDate etc.

    Don't include anything is URL's between the www. & fpkennels.com - I had wp-content (or whatever) and it did not load

    Nb: theme not in its own folder, upload whole zip ..
    Also do we need to load for each date, don't think so, perhaps leave as safe & might want to have different functions for different dates, unlikely but perhaps for different forms.

    =============
    <?php wp_enqueue_script("jquery"); ?>

    <?php wp_head(); ?>

    <?php
    //jQuery
    if(($post->ID==200) OR ($post->ID==211)){
    //this code only runs when the current page is our contact page!
    //ADD THE NECESSARY FILES
    // --> css
    echo '<link rel="stylesheet" <link rel="stylesheet" href="http://www.fpkennels.com/jquery-ui/development-bundle/themes/dark-hive/jquery.ui.all.css">';
    // --> jQuery javascript
    echo '<script src="http://www.fpkennels.com/jquery-ui/development-bundle/jquery-1.5.1.js"></script>';
    // --> jQueryUI core
    echo '<script src="http://www.fpkennels.com/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>';
    // --> jQueryUI datepicker
    echo '<script src="http://www.fpkennels.com/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>';
    //TURN TEXT FIELD INTO DATEPICKER
    echo '<script type="text/javascript">';
    echo 'jQuery(function($){';
    echo '$( "#Date1From" ).datepicker({';
    // echo 'defaultDate: "+1w",';
    echo 'changeMonth: false,';
    // echo 'changeYear: true,';
    echo 'numberOfMonths: 2,';
    echo 'minDate: -0,';
    echo 'dateFormat: "dd-M-yy",';
    echo 'onSelect: function( selectedDate ) {';
    // Earliest date? not sure why end-date? can understand below is after start-date
    echo '$( "#Date1To" ).datepicker( "option", "minDate", selectedDate );';
    echo '}';
    echo '});';
    echo '$( "#Date1To" ).datepicker({';
    // echo 'defaultDate: "+1w",';
    echo 'changeMonth: false,';
    echo 'numberOfMonths: 2,';
    echo 'dateFormat: "dd-M-yy",'; // oddly if not dateformat here min & max go a bit odd
    echo 'onSelect: function( selectedDate ) {';
    echo '$( "#Date1From" ).datepicker( "option", "maxDate", selectedDate );';
    echo '}';
    echo '});';
    echo '});';
    echo '</script>';
    }
    ?>

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic