Date Picker Validation in datefield « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

britweb
Member
Good afternoon,

I managed to allow the date fields to accept the format day month and year (22 February 2013) by implementing this script :
```
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$( "#input_3_10" ).datepicker({ minDate: '+2', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, dateFormat:'d MM y' });
});
</script>
```
However although this works when it comes to submiting the form the date is always rejected as the format d MM y is not in the drop down list in the form options. Does anyone know how to solve this?
Posted 11 years ago on Monday February 18, 2013 | Permalink
Chris Hajer
Key Master

Can you explain how and when it is 'rejected'? Do you have a link to the form online where we can see your datepicker functionality?

Posted 11 years ago on Monday February 18, 2013 | Permalink
britweb
Member

Yes when you fill in the form and press submit, the form comes back with the error message

Please enter a valid date in the format (mm/dd/yyyy).

The link is http://tts.britwebtest.co.uk/bangkok-tours/grand-palace-and-main-temples/

Posted 11 years ago on Tuesday February 19, 2013 | Permalink
Chris Hajer
Key Master

I'll ask the development team if there is a work around for the custom date format.

Posted 11 years ago on Tuesday February 19, 2013 | Permalink
Chris Hajer
Key Master

There is currently no way around this without extensive customization. The date format must be one of the ones available in the field editor or the validation will fail. Even if validation is bypassed, the storage of the date will present problems when the entry is retrieved or the notifications are sent, because they all rely on the dates being in one of the defined formats.

Posted 11 years ago on Wednesday February 20, 2013 | Permalink
dps
Member
Hey Guys,

I had this exact same problem (was working on this yesterday). I tried the custom validation hook script, but couldn't get it to work.

What I ended up doing was instead of using a datepicker field, just use a normal single text field and apply jQuery UI's datepicker code to it (this will get around the validation issue). You'll need to manually include jQuery UI datepicker widget (41kb in total) and I used this javascript below:

http://pastie.org/6237759
```
var initDatePicker = function () {
    $( "#input_2_5" ).datepicker({
        minDate: 1,
        maxDate: "+1m",
        dateFormat: "DD, d MM, yy"
    });
};

jQuery(document).bind('gform_post_render', function(){
    initDatePicker();
});

initDatePicker();
```
You'll need to update the ID used above to your field's ID. The date won't be validated anymore (besides an empty validation) but you can get away with a custom formatted date.

Here's the URL where I've used this:
http://www.liveca.ca/#book-now

I'm more of a designer than a developer so if anyone has suggestions or improvements please let me know.
Posted 11 years ago on Wednesday February 20, 2013 | Permalink
dps
Member

Update on the script above. To get around the user typing in their own date, try this updated code below. Also, I've allowed the user to clear the field by clicking delete or backspace:

http://pastebin.com/24r4i2Wx

Posted 11 years ago on Wednesday February 20, 2013 | Permalink
britweb
Member

Thank you for the code fix, managed to finally get this working with your implementation. Thank you so much! :)

Posted 11 years ago on Friday February 22, 2013 | Permalink
Chris Hajer
Key Master

That's a good way to do it: include the datepicker script with a normal text field rather than a Gravity Form date field. Thank you for posting that solution.

Posted 11 years ago on Saturday February 23, 2013 | Permalink
marcopako
Member

Hi guys, i get the same error message: "Please enter a valid date in the format (mm/dd/yyyy)", can you please tell what are the specific files i have to download (jQuery UI datepicker widget) and where to put those files?

Thanks :)

Posted 11 years ago on Thursday April 4, 2013 | Permalink
Chris Hajer
Key Master

Marco, I used the jQuery UI datepicker which is included with WordPress. I created a JavaScript file named custom-datepicker.js and saved it in my child theme folder, in a subfolder 'js': http://pastebin.com/ucWRpX6u

Then I included that in my page by using this code in my theme's functions.php: http://pastebin.com/adtEwvdi

You will need to change the form ID from 3 on line 5 of this code http://pastebin.com/adtEwvdi , and you will need to change the input ID from input_3_4 on line 5 of this code http://pastebin.com/ucWRpX6u to the ID of the text field where you want to use a datepicker with a custom date format. You will also need to specify your date format on line 9 of the custom-datepicker.js file. If you have trouble, please post a URL so we can take a look.

Posted 11 years ago on Thursday April 11, 2013 | Permalink
marcopako
Member

Working like a charm now :) Thank you very much Chris!

Posted 11 years ago on Friday April 12, 2013 | Permalink

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