Title: Datepicker Validation
Last modified: October 26, 2017

---

# Datepicker Validation

 *  Resolved [tomematthews](https://wordpress.org/support/users/tomematthews/)
 * (@tomematthews)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/)
 * Hi…
 * I have two datepicker fields on my form: Arrival Date and Departure Date
 * I need the form to validate the following:
 * – Departure Date must not be before the Arrival Date (i.e. someone cannot enter
   an arrival date of 1/1/18 and a departure date of 30/12/17) Ideally, the Departure
   Date picker should actually grey out any dates before the Arrival Date.
 * – Arrival Date must not be BEFORE the current date (i.e. if a user is on the 
   site on 30/5/17 they must not be able to select an arrival/departure date before
   this date)
 * Thank you!!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fdatepicker-validation%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9627663)
 * Hello!
 * Sorry there is no way in the ui to disable dates but this can be done with a 
   javascript (that can be added in the javascript section of your form). something
   like this:
 *     ```
       rnJQuery('#arrivaldate input').change(function(){
       rnJQuery( "#departuredate input” ).datepicker('option', 'minDate', rnJQuery( "#arrivaldate input" ).datepicker("getDate"));
       });
       ```
   
 * that would disable all the dates prior the date of the arrivaldate, to disable
   all the dates before today you can add this:
 * `rnJQuery( '#arrivaldate input' ).datepicker('option', 'minDate',0);`
 * So in the end your js should look like this :
 *     ```
         //AUTO GENERATED CODE, DO NOT DELETE
       (function(){var javaObject={
   
       //YOU CAN PUT YOUR CODE BELLOW
   
       //jQueryFormReference:A jquery reference of the loaded form
       AfterFormLoaded:function(jQueryFormReference){
        rnJQuery('#arrivaldate input').change(function(){
       rnJQuery( "#departuredate input” ).datepicker('option', 'minDate', rnJQuery( "#arrivaldate input" ).datepicker("getDate"));
       rnJQuery( '#arrivaldate input' ).datepicker('option', 'minDate',0); 
   
       });
   
       });
       },
   
       //jQueryFormReference:A jquery reference of the loaded form
       //formData:An object with the information that is going to be submitted
       BeforeFormSubmit:function(formData,jQueryFormReference){
           //Here you can put code that you want to be executed before the form is submitted
       }
   
       //MORE AUTO GENERATED CODE, DO NOT DELETE
       }; return javaObject;})  
       ```
   
 * Hope this helps but if it doesn’t please let me know!
    -  This reply was modified 8 years, 7 months ago by [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/).
 *  Thread Starter [tomematthews](https://wordpress.org/support/users/tomematthews/)
 * (@tomematthews)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9627764)
 * Hi Edgar – thank you so much for your reply…
 * Unfortunately, that doesn’t seem to be working. I may be doing something wrong,
   as I have no experience with JS, but I can still select dates prior to today,
   and departure dates prior to the arrival date, and the form submits fine…
 * When I click Validate underneath the JS box, it tells me:
    SyntaxError: Invalid
   character: ‘#’
 * I have changed my field names to match the script (arrivaldate and departuredate)
   as they were previously just ‘arrival’ and ‘departure’ but this has not helped
 * I’d really appreciate any further help you can offer! Thank you…
 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9633331)
 * Sure, could you send me a link to your form please? I can build the code that
   you need =).
 *  Thread Starter [tomematthews](https://wordpress.org/support/users/tomematthews/)
 * (@tomematthews)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9634560)
 * Hi Edgar…
 * There are two forms: [http://www.bryhercampsite.co.uk/booking](http://www.bryhercampsite.co.uk/booking)
   and [http://www.bryhercampsite.co.uk/belltents](http://www.bryhercampsite.co.uk/belltents)
 * Thank you so much!
 *  Plugin Author [EDGARROJAS](https://wordpress.org/support/users/edgarrojas/)
 * (@edgarrojas)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9637405)
 * Got it, please try adding this to the javascript section of your form:
 *  //AUTO GENERATED CODE, DO NOT DELETE
    (function(){var javaObject={
 * //YOU CAN PUT YOUR CODE BELLOW
 * //jQueryFormReference:A jquery reference of the loaded form
    AfterFormLoaded:
   function(jQueryFormReference){
 * rnJQuery( ‘#arrivaldate input’ ).datepicker(‘option’, ‘minDate’,0);
    rnJQuery(‘#
   arrivaldate input’).change(function(){ rnJQuery( ‘#departuredate input’ ).datepicker(‘
   option’, ‘minDate’, rnJQuery( ‘#arrivaldate input’ ).datepicker(‘getDate’)); });
 * },
 * //jQueryFormReference:A jquery reference of the loaded form
    //formData:An object
   with the information that is going to be submitted BeforeFormSubmit:function(
   formData,jQueryFormReference){ //Here you can put code that you want to be executed
   before the form is submitted }
 * //MORE AUTO GENERATED CODE, DO NOT DELETE
    }; return javaObject;})
 * I think that should do the trick =).
 *  Thread Starter [tomematthews](https://wordpress.org/support/users/tomematthews/)
 * (@tomematthews)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9638472)
 * That’s perfect – thank you so much!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Datepicker Validation’ is closed to new replies.

 * ![](https://ps.w.org/smart-forms/assets/icon-256x256.jpg?rev=1226707)
 * [Smart Forms - when you need more than just a contact form](https://wordpress.org/plugins/smart-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/smart-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/smart-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/smart-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/smart-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/smart-forms/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [tomematthews](https://wordpress.org/support/users/tomematthews/)
 * Last activity: [8 years, 7 months ago](https://wordpress.org/support/topic/datepicker-validation/#post-9638472)
 * Status: resolved