Jquery 页面加载时出现日期选择器_Jquery_Css_Datepicker

Jquery 页面加载时出现日期选择器

jquery css

Jquery 页面加载时出现日期选择器,jquery,css,datepicker,Jquery,Css,Datepicker,我正在编写一个网站，将简历信息存储在SQL数据库中。到目前为止，我已经能够解决我所有的问题，我唯一真正需要解决的是，在表单上，当页面加载时，日期选择器出现在页面的左下角，直到您单击日历图标将其加载到选择器字段。我的代码如下。此外，我还编辑了所有内容中的根目录。除了一个问题外，一切正常表格页： <?php session_start(); //Must be called before any white space or code is executed require(dirname

我正在编写一个网站，将简历信息存储在SQL数据库中。到目前为止，我已经能够解决我所有的问题，我唯一真正需要解决的是，在表单上，当页面加载时，日期选择器出现在页面的左下角，直到您单击日历图标将其加载到选择器字段。我的代码如下。此外，我还编辑了所有内容中的根目录。除了一个问题外，一切正常

表格页：

<?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
?>

以及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'
        });
});

为什么你要用两个日期选择器连续的句子？您只能尝试使用一个：

$('.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"
});

您希望它显示在何处？@Oriol它应该显示在类为“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"
});