PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Putting datepicker script in header.php works but kills the js slider.

  1. Can't get the datepicker script working AND keeping the slider it to work properly. Putting the the script in the header.php does the filtering of the dates in the datepicker. So the
    '
    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($) {

    $( "#input_1_68" ).datepicker({ defaultDate: '+3d', minDate: '+3d', beforeShowDay: $.datepicker.noWeekends ,gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
    });
    </script>' seems right.
    BUT.... then the js slider on the homepage doesn't appear anymore. Removing the script brings back the slider, but more more date exclusions... The same issue on multiple themes. Been trying for a over a day now to get it working. The Jquery page is great, if you know already js and how to implement it.

    Guess some conflicting js...

    Posted 9 years ago on Wednesday October 31, 2012 | Permalink
  2. Please post a link to the page on your site where the form is embedded so we can take a look. Thank you.

    Posted 9 years ago on Wednesday October 31, 2012 | Permalink
  3. Its on 'http://www.bmwservicespecialist.nl/' Don't be scared... its in Dutch
    The (working) datepicker is located on http://www.bmwservicespecialist.nl/afspraak-maken/ on the bottom ("voorkeurs datum", meaning "preferred date")

    Posted 9 years ago on Wednesday October 31, 2012 | Permalink
  4. On this page:
    http://www.bmwservicespecialist.nl/afspraak-maken/

    I see the datepicker and the modifications you made to restrict dates. That appears to be working.

    On this page:
    http://www.bmwservicespecialist.nl/

    I see this error:

    Timestamp: 10/31/2012 12:36:54 PM
    Error: TypeError: $.datepicker is undefined
    Source File: http://www.bmwservicespecialist.nl/
    Line: 73

    That's because you're trying to apply jQuery to an element which does not exist in the page. If you want to include the script in the head of the page, you can make it load only on this one page by wrapping the code section in a conditional like

    [php]
    <?php if (is_page(2239)) { ?>
    <script>
        // jquery to restrict the date range
    </script>
    <?php } ?>

    That will ensure your jQuery is output only on page 2239.

    The proper way to do it is as I detailed earlier, enqueuing the script whenever the form is called, but you can also conditionally include the script on just this page. If you need the script on another page, you will need to update the conditional.

    Posted 9 years ago on Wednesday October 31, 2012 | Permalink
  5. Thx for your (fast!) support.

    Works for http://www.bmwservicespecialist.nl/afspraak-maken/ perfectly.
    Made a seperate date_restriction.js in /js an added the '// change the 11 here to your form ID
    add_action('gform_enqueue_scripts_1', 'enqueue_date_restriction', 10, 2);
    function enqueue_date_restriction($form, $is_ajax) {
    // the script to restrict the dates is stored in the child theme /js/ subdirectory, and depends on jQuery
    wp_enqueue_script('date_restriction', get_stylesheet_directory_uri() . '/js/date_restriction.js', array('jquery'));
    }' in functions.php

    But.... tried the same solution on http://www.autobedrijfderooy.nl/afspraak-maken/
    and that didn't work (weird....)
    The date field is input 21 on form 18.

    So changed the the form number in date_restriction.js into #input_18_21
    and changed the function to '// change the 11 here to your form ID
    add_action('gform_enqueue_scripts_18', 'enqueue_date_restriction', 10, 2);
    function enqueue_date_restriction($form, $is_ajax) {
    // the script to restrict the dates is stored in the child theme /js/ subdirectory, and depends on jQuery
    wp_enqueue_script('date_restriction', get_stylesheet_directory_uri() . '/js/date_restriction.js', array('jquery'));
    }
    '
    Somehow the restriction script isn't used on that input (21_18)...

    Stan

    Posted 9 years ago on Thursday November 1, 2012 | Permalink