title: datePicker appears on page load
body: <p>I am programming a website to store resume information in an SQL database.  So far I've been able to figure out all of my problems, the only thing i'm really struggling with is that on the forms, when the page loads the datePicker appears at the bottom left of the page until you click on the calendar icon to load it for the picker field.  My code is as follows.  Also, I edited out the root directory in everything.  It all loads fine except that one issue.</p>
  
  <p>The form page:</p>
  
  <pre><code>&lt;?php
  session_start(); //Must be called before any white space or code is executed
  
  require(dirname(__FILE__).'/config/'.'config.php');
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
      &lt;/style&gt;
      &lt;link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"&gt;
      &lt;link rel="icon" href="/images/favicon.ico" type="image/x-icon"&gt;
      &lt;link type="text/css" rel="stylesheet" href="/style/menu.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="/style/forms.css" /&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" src="/jQuery/jquery.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      &lt;/script&gt;
      &lt;title&gt;Employment History Form&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;? include(dirname(__FILE__).'/include/'.'header.php');?&gt;
      &lt;h3&gt;Employment History Form: &lt;/h3&gt;
      &lt;div id="content_wrapper"&gt;&lt;form id="prior_employer" name="prior_employer" method="POST" action="submits/submit_employment.php"&gt;
          &lt;table cellpadding="2" border="0"&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="employer_name"&gt;Employer Name: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;input type="text" id="employer_name" name="employer_name" placeholder="Employer Name" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="employer_address"&gt;Employer Address: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;textarea id="employer_address" name="employer_address" placeholder="Employer Address"&gt;&lt;/textarea&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="employer_phone"&gt;Employer Phone Number: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;input type="phone" id="employer_phone" name="employer_phone" placeholder="###-###-####" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="supervisor"&gt;Supervisor Name: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;div id="supervisor"&gt;
                      &lt;input type="text" id="supervisor_name_first" name="supervisor_name_first" placeholder="First Name of Supervisor" /&gt;
                      &lt;input type="text" id="supervisor_name_last" name="supervisor_name_last" placeholder="Last Name of Supervisor" /&gt;
                  &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="wages"&gt;Wages: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;div id="wages"&gt;
                      &lt;input type="text" id="wages_starting" name="wages_starting" placeholder="Starting Pay" /&gt;
                      &lt;input type="text" id="wages_end" name="wages_end" placeholder="Ending Pay" /&gt;
                  &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="time_employed"&gt;Dates Employed&lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;input type="text" name="start_date" id="start_date" class="datepicker" placeholder="First Date of Employment"/&gt;
                  &lt;input type="text" name="end_date" id="end_date" class="datepicker" placeholder="Final Date of Employment" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;
              &lt;label for="position"&gt;Position: &lt;/label&gt;
              &lt;/th&gt;
                  &lt;td&gt;
                  &lt;div id="position"&gt;
                      &lt;input type="text" id="position_name" name="position_name" placeholder="Job Title" /&gt;
                      &lt;textarea id="position_description" name="position_description" placeholder="Job Responsibilities"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td colspan="2"&gt;
                  &lt;input type="submit" value="Submit" action="Submit" /&gt;
              &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;?php
  ?&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>#datepickerBorder {
  border:1px solid;
  }
  .ui-datepicker {
  background:#10C9C0;
  width:200px;
  border-radius:5px;
  }
  .ui-datepicker-prev {
  float:left;
  }
  .ui-datepicker-next {
  float:right;
  }
  .ui-datepicker-title {
  color:#ffffff;
  text-align:center;
  }
  .ui-datepicker-calendar {
  width:200px;
  border-radius:5px
  }
  .ui-datepicker table{
  background:#1e5799;
  margin:0;
  }
  .ui-datepicker-calendar thead thr th, .ui-datepicker tbody tr td {
  background:white;
  color:#333;
  }
  .ui-datepicker-calendar thead tr th {
  padding:5px 0;
  }
  .ui-datepicker-dalendar tbody td {
  background:#1e5799;
  padding:0 2px 2px 0;
  }
  .ui-datepicker-calendar tbody td a {
  padding:0 1px 0 0;
  text-decoration:none;
  }
  .ui-datepicker-calendar {
  font-size:0.8em;
  }
  #content_wrapper {
  height:auto;
  width:960px;
  margin-left:auto;
  margin-right:auto;
  }
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>$(function() {
  $('.datepicker').datepicker({
      beforeShow: function() {
          $(this).datepicker().addClass("datepickerBorder");
          },
          onClose: function() {
          $(this).datepicker().removeClass("datepickerBorder");
          }
      }).datepicker("option", {
          changeMonth: true,
          changeYear: true,
          showOn: "button",
          buttonImage: "******",
          buttonImageOnly: true,
          minDate: new Date("01/01/1900"),
          inline:true,
          yearRange: '1900:2100'
          });
  });
  </code></pre>