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 Validation in datefield

Gravity Support Forums » Plugin Support » Gravity Forms

  1. 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>
    Copy

    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 12 years ago on Monday February 18, 2013 | Permalink

  2. 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 12 years ago on Monday February 18, 2013 | Permalink

  3. 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 12 years ago on Tuesday February 19, 2013 | Permalink

  4. Chris Hajer
    Key Master

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

    Posted 12 years ago on Tuesday February 19, 2013 | Permalink

  5. 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 12 years ago on Wednesday February 20, 2013 | Permalink

  6. 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();
    Copy

    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 12 years ago on Wednesday February 20, 2013 | Permalink

  7. 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 12 years ago on Wednesday February 20, 2013 | Permalink

  8. britweb
    Member

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

    Posted 12 years ago on Friday February 22, 2013 | Permalink

  9. 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 12 years ago on Saturday February 23, 2013 | Permalink

  10. 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 12 years ago on Thursday April 4, 2013 | Permalink

  11. 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 12 years ago on Thursday April 11, 2013 | Permalink

  12. 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.