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

  1. 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 6 years ago on Monday February 18, 2013 | Permalink
  2. 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 6 years ago on Monday February 18, 2013 | Permalink
  3. 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 6 years ago on Tuesday February 19, 2013 | Permalink
  4. I'll ask the development team if there is a work around for the custom date format.

    Posted 6 years ago on Tuesday February 19, 2013 | Permalink
  5. 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 6 years ago on Wednesday February 20, 2013 | Permalink
  6. 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 6 years ago on Wednesday February 20, 2013 | Permalink
  7. 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 6 years ago on Wednesday February 20, 2013 | Permalink
  8. Thank you for the code fix, managed to finally get this working with your implementation. Thank you so much! :)

    Posted 6 years ago on Friday February 22, 2013 | Permalink
  9. 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 6 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 6 years ago on Thursday April 4, 2013 | Permalink
  11. 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 6 years ago on Thursday April 11, 2013 | Permalink
  12. marcopako
    Member

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

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

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