Customizing Jquery for Datepicker « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Is there a way to override the default datepicker script? I am trying to change the view because I only want future dates, for 1 year only, and only one month not 3.

I tried the normal way of enqueue-ing a new #datepicker script in functions and loading a file in my js file, but couldn't get it to work.

I saved this as init.js in my js file:

jQuery(document).ready(function($) {

  /* For all options see http://jqueryui.com/demos/datepicker/ */
  $("#datepicker").datepicker({
    defaultDate: +2,
    minDate: 0,
    maxDate: "+1y",
    numberOfMonths: 1,
    showAnim: 'fadeIn',
    showButtonPanel: true,
    buttonImageOnly: true,
    buttonText: 'Pick a date',
    showOn: 'both'
  });

});

and put this in my functions:

add_action('wp_enqueue_scripts', 'my_add_scripts2');

function my_add_scripts2() {
    wp_enqueue_script('init', get_template_directory_uri() . '/lib/js/init.js', array('jquery'));
}

But it didn't change anything.

Posted 12 years ago on Friday August 10, 2012 | Permalink

David Peralty

Did you try to just add the JS in your header to see if it would override the settings? Maybe for some reason there is an issue with the customization you came up with? It looks fine to me, but I'm not a JS expert. Also, can you link to your form so we can have a look?

Posted 12 years ago on Friday August 10, 2012 | Permalink
ktrusak
Member
Thanks for the reply David

I personally cannot be sure about the quality of the code, as I got it from someone on stackoverflow ( http://stackoverflow.com/questions/2505739/jquery-datepicker-customization ) , but I think it is straight from the jquery website so I think it is okay. I tried inserting it in the <head> earlier, but put it in again now so you could see

What is in the head right now:
```
<script>
jQuery(document).ready(function($) {

  $("#datepicker").datepicker({
    defaultDate: +2,
    minDate: 0,
    maxDate: "+1y",
    numberOfMonths: 1,
    showAnim: 'fadeIn',
    showButtonPanel: true,
    buttonImageOnly: true,
    buttonText: 'Pick a date',
    showOn: 'both'
  });

}); </script>
```
Here is test page : http://hookahi.com/example (click the 'Reserve' Button on the right side then there is a form with the date field)
Posted 12 years ago on Friday August 10, 2012 | Permalink
David Peralty

I don't see that in the head of the page currently, but the datepicker doesn't have a CSS ID of #datepicker. Try .datepicker and see if that works any better for you as it does have a class of datepicker.

Posted 12 years ago on Friday August 10, 2012 | Permalink
ktrusak
Member

My mistake, I put in the <head> of the primary site instead of the subsite.

Okay great! now it is working with the .datepicker suggestion. What a great pickup - a '.' instead of a '#'

Thanks for your help

Posted 12 years ago on Friday August 10, 2012 | Permalink
David Peralty

No problem. Yeah, classes versus id's is always one of those things that people miss because we don't see the things we don't expect to be wrong. :) I do it all the time.

Posted 12 years ago on Friday August 10, 2012 | Permalink

This topic has been resolved and has been closed to new replies.