Date picker +1 « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

discernir
Member
Hi,
I have a form with 2 date fields.
I have date picker with icon set and I want the option to only be able to select dates anytime in the future except current date.

I've checked the other posts.. I think I finally figured out where I'm supposed to paste the code (please confirm) through wordpress, by going to "appearance"- "editor" and then choosing either "header" or my theme has a "customjs.php".

I've tried pasting both in header and customjs.php the code I thought was relevant... but its not working. Given I have 2 fields am I supposed to run 2 scripts each one with its own name?

What exactly is the script I'm supposed to paste?

jquery datepicker I copied this into the header but it didn't work... (I changed -20 to +1 etc.)
```
<script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
```
At jquery datepicker I also tried copying all the code they show in "source" and pasting into "customjs.php" but again no effect.

Please advise,
Thanks,
Badi
Posted 11 years ago on Wednesday February 20, 2013 | Permalink
Chris Hajer
Key Master
Can you post the URL to the page on your site where we can see the code you have added and see why it's not working?

I don't think you can use $ like that in WordPress. You will get a "$ in not defined error" normally. The $ in your function should be changed to jQuery. And to be correct, your script line should be:
```
[html]
<script type="text/javascript">
```
Posted 11 years ago on Saturday February 23, 2013 | Permalink
demango25
Member
I would love to know the solution too!

This is what I've added to my header but it's not working.

url : http://ordanga.mangomatter.com/book-online/
```
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({ minDate: +2 });
});
</script>
```
Posted 11 years ago on Sunday March 3, 2013 | Permalink
demango25
Member
Found a semi-solution.

1. check the source code of the page where the form is on and go to the code describing the date section, there you'll see an id inside the input tag (eg input_1_3)
2. change the code to paste in the header replacing #datepicker with your id

In my case
```
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#input_1_3" ).datepicker({ minDate: +2 });
});
</script>
```
The only problem I have now is that the calender icon disappeared...
Posted 11 years ago on Sunday March 3, 2013 | Permalink
Richard Vav
Administrator
@demango25 this is the html source for your date picker, as you can see it has a class of datepicker_no_icon
```
<input name="input_3" id="input_1_3" type="text" value="Click to Pick a Date" class="datepicker medium mdy datepicker_no_icon hasDatepicker" tabindex="1">
```
That class is only added if the no icon radio button on the date field is selected, the other two options are to use the calendar icon or use a custom image.

@Chris the script tags type attribute was actually made optional in HTML5
Posted 11 years ago on Sunday March 3, 2013 | Permalink
demango25
Member

Yeah, sorry, messed around with it & turned the Icon off as i've put my own image above the field. The icon option is now turned on again and not showing (tho I don't need it anymore :))

Posted 11 years ago on Sunday March 3, 2013 | Permalink
Richard Vav
Administrator
I just realised the reason the icon wasn't appearing was because it wasn't being initialised by the script you posted above.
```
$( "#input_1_3" ).datepicker({
     minDate: +2,
     showOn: 'both',
     buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png',
     buttonImageOnly: true
});
```
Posted 11 years ago on Sunday March 3, 2013 | Permalink
demango25
Member

It works! Thanks :)

Posted 11 years ago on Sunday March 3, 2013 | Permalink
Richard Vav
Administrator

You're welcome

Posted 11 years ago on Sunday March 3, 2013 | Permalink
Chris Hajer
Key Master

Thank you Richard.

Posted 11 years ago on Tuesday March 5, 2013 | Permalink