Question

我正在编写一个网站来将简历信息存储在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'
        });
});

Answer 1

为什么你使用两个datepicker连续句子？你只能尝试一个：

$('.datepicker').datepicker({
    beforeShow: function() { $(this).datepicker().addClass("datepickerBorder"); },
    onClose: function() { $(this).datepicker().removeClass("datepickerBorder"); },
    changeMonth: true,
    changeYear: true,
    showOn: "button",
    buttonImage: "******",
    buttonImageOnly: true,
    minDate: new Date("01/01/1900"),
    inline:true,
    yearRange: "1900:2100"
});

datePicker出现在页面加载上

1 个答案: