Databases
StackOverflow2013
Postsdbo
POdatePicker appears on page load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdatePicker appears on page load
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload