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.

Date picker excluding todays date &...

  1. I know its been explained before, but when it comes to jquery, i havent even earned my noob wings yet.

    I would like to exclude today's date and certain days in the week from my date picker. If anybody can help me that would be great. I have looked at the documentation found here..http://jqueryui.com/datepicker/ and it may as well be hieroglyphs, it doesnt make sense to me at all.

    Thanks for the help in advance!

    Posted 12 years ago on Friday October 26, 2012 | Permalink
  2. I have actually found a little code to exclude certain days of the week, but i do not know where to paste it...I have tried pasting it within my theme's custom javascript section, but it had no effect.

    $("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 1 && day != 2)];
        }
    })​​​​​;​

    where monday would be 1 and tuesday would be 2. Any point in the right direction would be helpful. Thanks guys!

    Posted 12 years ago on Monday October 29, 2012 | Permalink
  3. JavaScript code normally goes in the theme's head section (header.php sometimes.) You will only need it on pages with your form though. In that case, you can save this jQuery to a file (call it date_restriction.js):

    [js]
    jQuery("#datepicker").datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay();
            return [(day != 1 && day != 2)];
        }
    })​​​​​;​

    (Change the $ to jQuery though, since $ won't work straight away in WordPress.)

    Then include that file only when the specific form is called using the gform_enqueue_scripts hook:

    [php]
    // change the 11 here to your form ID
    add_action('gform_enqueue_scripts_11', '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'));
    }
    Posted 12 years ago on Monday October 29, 2012 | Permalink
  4. looks fairly simple...but where would i paste that "gform_enqueue_scripts" hook?

    Posted 12 years ago on Monday October 29, 2012 | Permalink
  5. so if i wanted them only to schedule for tuesdays thursdays and saturdays the code would be...

    jQuery("#datepicker").datepicker({
    	    beforeShowDay: function(date) {
    	        var day = date.getDay();
    	        return [(day != 0 && day != 1 && day != 3 && day != 5)];
    	    }
    	});
    Posted 12 years ago on Monday October 29, 2012 | Permalink
  6. ive tried adding that hook code to within the "gravityforms.js" itself and it didnt work

    Posted 12 years ago on Monday October 29, 2012 | Permalink
  7. The gform_enqueue_scripts hook and related function are pasted into your theme's functions.php. The jQuery, as I wrote it, will be placed in an external file stored in a js/ folder in your child theme.

    Sorry I did not provide this link earlier:
    http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F#PHP

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  8. Ok, everything is loaded properly. Added the code to the functions.php file of my theme, the js/ folder was found under my theme's assets file, so i tried using the code you provided, then i tried it with using 'assets/js/date_restriction.js'.

    Still nothing works...i even tried simply adding the date restriction code to my themes "custom javascript" section. Of course this would affect all my forms, but it still didn't work.

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  9. Please share the link where you implemented this functionality. Thank you.

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  10. here is the form which i am trying to manipulate the date picker on... thank you! i appreciate the help!

    http://financedhomes.ca/rent-to-own-application/

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  11. I get a JavaScript error on that page related to the datepicker:

    Timestamp: 10/31/2012 9:22:35 AM
    Error: TypeError: "#datepicker".datepicker is not a function
    Source File: http://financedhomes.ca/rent-to-own-application/
    Line: 508

    This is line 508:

    [js]
    ("#datepicker").datepicker({

    I would try a couple things.

    1) don't combine the datepicker JavaScript with the GA Javascript. Google Analytics JavaScript is notoriously touchy and might not work with this modification anyway.

    2) your datepicker JavaScript needs to look more like this:
    http://pastebin.com/syyyuEfF

    Did you just leave out the jQuery part at the beginning? Be sure to use script tags when embedding it in the page rather than including it in an external file.

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  12. I have taken out the script from the GA Javascript...i tried inserting the script within the page and it made my form disappear.

    So as of right now, i have a file with the script in my theme's js folder, and the hook code running inside the functions.php file, but yet its still not working. ugh

    Posted 12 years ago on Wednesday October 31, 2012 | Permalink
  13. There are two parts to this:

    1. be sure you include the file properly.

    2. be sure the code in the file works as expected.

    Right now, I see this file included in the header:

    <script type='text/javascript' src='http://financedhomes.ca/wp-content/themes/parallelus-salutationassets/js/date_restriction.js?ver=3.4.1'></script>

    The means the code in functions.php is working to include a file, but you have the path to the file wrong. You're missing a slash between the theme folder and the assets folder. The file exists here: http://financedhomes.ca/wp-content/themes/parallelus-salutation/assets/js/date_restriction.js?ver=3.4.1

    Correct that in your functions.php and we'll take another look.

    Posted 12 years ago on Thursday November 1, 2012 | Permalink
  14. Still doesnt work.

    ive since fixed the missing "/"...tried "/assets/js/date_restriction.js?ver=3.4.1" and "/assets/js/date_restriction.js"

    still nothing

    Posted 12 years ago on Thursday November 1, 2012 | Permalink
  15. ludwig
    Member

    I have followed this really interesting post (I think a lot of people need this), but it does not work for me too

    Posted 12 years ago on Friday November 2, 2012 | Permalink
  16. Hopefully i can get it to work! Its a necessity. Otherwise i get brain dead clients making appointments for friday nights or sunday mornings.

    Posted 12 years ago on Friday November 2, 2012 | Permalink
  17. @dcstover1, I deleted your bump replies. Sorry for the delay in our response.

    I took a look at the page, and I see a different JavaScript error now:

    Timestamp: 11/7/2012 10:35:35 AM
    Error: SyntaxError: missing } in XML expression
    Source File: http://financedhomes.ca/wp-content/themes/parallelus-salutation/assets/js/date_restriction.js?ver=3.4.1
    Line: 3, Column: 18
    Source Code:
         beforeShowDay: function(date) {

    When including JavaScript in an external file as you have correctly done here, you do not need the beginning and ending script tags. Edit date_restriction.js so that it contains just this:

    [js]
    jQuery("#datepicker").datepicker({
    	    beforeShowDay: function(date) {
    	        var day = date.getDay();
    	        return [(day != 0 && day != 1 && day != 3 && day != 5)];
    	    }
    	});

    After that, I think you will have accomplished part one (including the file properly.) Then we need to make sure the function you wrote works as expected.

    Posted 12 years ago on Wednesday November 7, 2012 | Permalink