0

履歴書情報を SQL データベースに保存する Web サイトをプログラミングしています。これまでのところ、私はすべての問題を把握することができました。私が本当に苦労しているのは、ページが読み込まれると、カレンダーをクリックするまでページの左下に日付ピッカーが表示されるということだけです。アイコンをクリックして、ピッカー フィールドにロードします。私のコードは次のとおりです。また、すべてのルート ディレクトリを編集しました。1つの問題を除いて、すべて正常にロードされます。

フォームページ:

<?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'
        });
});
4

1 に答える 1