title: Adjusting Datepicker
body: <p>I have small knowledge of JS, but I was assigned a task to add some functionality to page. I need to add a datepicker in <code>birthDate</code> field, but once I add datepicker function to page my, validation(Jquery validation) stop working.
  Here is code:</p>
  
  <pre><code>&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
  &lt;%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %&gt;
  &lt;%@ page session="false"%&gt;
  &lt;%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-       demos.css" /&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;  &lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;    
  
  &lt;title&gt;Parent Registration&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Everything inside should be the body --&gt;
  &lt;tiles:insertDefinition name="defaultTemplate"&gt;
  &lt;tiles:putAttribute name="body"&gt;
  ....some code.........
          &lt;div class="form-group" &gt;
              &lt;label for="birthDate" class="col-sm-3 control-label"&gt;Birthday&lt;/label&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;form:input type="text" class="form-control float_left" id="birthDate" name="birthDate" path="birthDate" placeholder="MM/DD/YYYY" required="true" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      ...........some code...........
  
  &lt;script src="/resources/js/jquery.validate.min.js"&gt;&lt;/script&gt;    
  &lt;script src="/resources/js/validation.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  jQuery.validator.addMethod(
          "dateUS",
          function(value, element) {
              var check = false;
              var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
              if( re.test(value)){
                  var adata = value.split('/');
                  var mm = parseInt(adata[0],10);
                  var dd = parseInt(adata[1],10);
                  var yyyy = parseInt(adata[2],10);                   
                  var xdata = new Date(yyyy,mm-1,dd);
                  var currentTime = new Date();
                  var year = currentTime.getFullYear();
                  if ( ( xdata.getFullYear() == yyyy) &amp;&amp; ( xdata.getFullYear() &lt;= year ) &amp;&amp; ( xdata.getMonth () == mm - 1 ) &amp;&amp; ( xdata.getDate() == dd ) )
                      check = true;
                  else
                      check = false;
              } else
                  check = false;
              return this.optional(element) || check;
          },
          "Please enter a date in the format MM/DD/YYYY"
      );
  
       jQuery.validator.addMethod("parentName", function(value, element) {
            return this.optional( element ) || /^(?=.*[a-zA-Z])([a-zA-Z.'-\s]+)$/.test( value );
          }, 'The name should contain at least one alphabet character, space, dot, hyphen, apostrophe.');
  
  
  $(document).ready(function(){
      jQuery.validator.setDefaults({
          debug: true,
          success: "valid"
      });
  
      $("#myform").validate({
          rules: {
              firstName: {
                    required: true,
                    parentName: true
                  },
              middleName: {
                    parentName: true
                      },
              lastName: {
                    required: true,
                    parentName: true
                  },
              noOfChildren: {
                    required: true,
                    digits: true
                  },
              birthDate: {
                  required: true,
                  dateUS: true
              },
              email: {
                  required: true,
                  email:true  
              },
              confirmemail: {
                  required: true,
                  equalTo: "#email"   
              },
              confirmpassword: {
                  required: true,
                  equalTo: "#password"
              }
          },  
          errorPlacement: function (label, element) {
              if(element.is("input:checkbox")) {
                  element.parent("label").after( label ); 
              } else if(element.is("input:radio")){
                  element.parent("label" ).parent("div:first").after( label );
              }
  
              else {
                  label.insertAfter( element ); 
              }
  
          },
          submitHandler: function(form) {
              form.submit();
          }
      });     
  });
  
  &lt;/script&gt;
  
  &lt;link rel="stylesheet"  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  
  &lt;script&gt;
  
  $(function() {
      $( "#birthDate" ).datepicker();
  });
  &lt;/script&gt;
  
  
  &lt;/tiles:putAttribute&gt;
  &lt;/tiles:insertDefinition&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>