我正在编写一个网站以将简历信息存储在 SQL 数据库中。到目前为止，我已经能够弄清楚我的所有问题，我唯一真正苦苦挣扎的是在表单上，当页面加载时 datePicker 出现在页面的左下方，直到您单击日历图标为选择器字段加载它。我的代码如下。另外，我在所有内容中都编辑了根目录。除了一个问题外，一切都很好。
表单页面：
<?php
session_start(); //Must be called before any white space or code is executed
require(dirname(__FILE__).'/config/'.'config.php');
?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="/style/menu.css" />
<link rel="stylesheet" type="text/css" href="/style/forms.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script language="javascript" src="/jQuery/jquery.js"></script>
<script>
</script>
<title>Employment History Form</title>
</head>
<body>
<? include(dirname(__FILE__).'/include/'.'header.php');?>
<h3>Employment History Form: </h3>
<div id="content_wrapper"><form id="prior_employer" name="prior_employer" method="POST" action="submits/submit_employment.php">
<table cellpadding="2" border="0">
<tr>
<th>
<label for="employer_name">Employer Name: </label>
</th>
<td>
<input type="text" id="employer_name" name="employer_name" placeholder="Employer Name" />
</td>
</tr>
<tr>
<th>
<label for="employer_address">Employer Address: </label>
</th>
<td>
<textarea id="employer_address" name="employer_address" placeholder="Employer Address"></textarea>
</td>
</tr>
<tr>
<th>
<label for="employer_phone">Employer Phone Number: </label>
</th>
<td>
<input type="phone" id="employer_phone" name="employer_phone" placeholder="###-###-####" />
</td>
</tr>
<tr>
<th>
<label for="supervisor">Supervisor Name: </label>
</th>
<td>
<div id="supervisor">
<input type="text" id="supervisor_name_first" name="supervisor_name_first" placeholder="First Name of Supervisor" />
<input type="text" id="supervisor_name_last" name="supervisor_name_last" placeholder="Last Name of Supervisor" />
</div>
</td>
</tr>
<tr>
<th>
<label for="wages">Wages: </label>
</th>
<td>
<div id="wages">
<input type="text" id="wages_starting" name="wages_starting" placeholder="Starting Pay" />
<input type="text" id="wages_end" name="wages_end" placeholder="Ending Pay" />
</div>
</td>
</tr>
<tr>
<th>
<label for="time_employed">Dates Employed</label>
</th>
<td>
<input type="text" name="start_date" id="start_date" class="datepicker" placeholder="First Date of Employment"/>
<input type="text" name="end_date" id="end_date" class="datepicker" placeholder="Final Date of Employment" />
</td>
</tr>
<tr>
<th>
<label for="position">Position: </label>
</th>
<td>
<div id="position">
<input type="text" id="position_name" name="position_name" placeholder="Job Title" />
<textarea id="position_description" name="position_description" placeholder="Job Responsibilities"></textarea>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" action="Submit" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<?php
?>
CSS
#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;
}
和 jQuery：
$(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'
});
});