我的 JQuery Datepicker 没有出现答案

【问题标题】：My JQuery Datepicker doesn't appear我的 JQuery Datepicker 没有出现
【发布时间】：2016-12-12 04:28:26
【问题描述】：

我制作了一个 php 页面（关于酒店预订的东西），我想制作一个 JQuery Datepicker，我在一个空白页面上尝试了这个，提供了所需的 css 和 js 文件，它可以工作。

但是当我在我的自定义页面上尝试它时，它不起作用。我认为这与我页面中的其他 css 和/或其他 javascript 文件有关，但我将它们删除以进行测试。但遗憾的是它没有出现.. 似乎是什么问题？

代码：

<!DOCTYPE HTML>
    <html>
        <head>
            <link rel="stylesheet" href="assets/css/reservationsCSS.css" />
            <link href = "css/jquery-ui.css" rel = "stylesheet">
            <?php include 'includes/head.inc.php'; ?>

    <!-- Datepicker JavaScript function -->
    <script type="text/javascript">
     $(function() {
        $( "#checkInDate" ).datepicker({dateFormat:"mm/dd/yy", minDate: 0}).datepicker("setDate",new Date());
        $( "#checkOutDate" ).datepicker({dateFormat:"mm/dd/yy", minDate: 0}).datepicker("setDate",+1);
     });
  </script>
</head>

<body id="top">
    <!-----navbar-section------>
    <header class = "container">
        <?php include 'includes/navbar.inc.php'; ?>
    </header>
    <!-----navbar-section------>

            <section id="banner">
                <div class="inner">
                    <header>
                        <h1>Reservation</h1>
                        <h2>Please enter your arrival and departure date.</h2>
                        <p></p>
                    </header>
                </div>
            </section>

        <!-- Main -->
            <div id="main">
                <div class="inner">
                    <form action = "datepickerProcess.php" method = "POST">
                        <p>Check-in Date: <input type = "text" id = "checkInDate" name = "checkInDate"></p> <br>
                        <p>Check-out Date: <input type = "text" id = "checkOutDate" name = "checkOutDate"></p> <br>
                        <input type = "submit" value = "Go to Rooms >">
                    </form>
                </div>
            </div>

        <!-- Footer -->
            <footer id="footer">
                <?php include 'includes/footer.inc.php';?>
            </footer>

    <!-- Scripts -->
        <!-- <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery.scrolly.min.js"></script>
        <script src="assets/js/jquery.poptrox.min.js"></script>
        <script src="assets/js/skel.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script> -->
        <script type="text/javascript" src = "js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src = "js/jquery-ui.js"></script>

</body>
</html>

【问题讨论】：

旁注：尽可能使用require_once()而不是include()，因为前者会发出PHP错误并停止进一步处理其余代码，而后者将继续。
Console是开发者浏览器中最重要的部分，在这里可以查看ajax调用、html dom、js错误，还可以动态更改css和dom
将 Datepicker JavaScript 函数移动到 html 代码底部的 jquery 引用下方。那么在 JS 上下文中只会定义 jQuery/$
@Raptor 感谢您提供的信息！我使用include是因为我在一个codecourse视频教程中看到的，当你有link rel和其他重复代码时，作者只是将它放在另一个.php文件中并包含在他的其他页面中。谢谢，我学到了一些新东西:)
探索控制台，它有很多适合你的东西:)

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

尝试添加

<!-- Datepicker JavaScript function -->
    <script type="text/javascript">
     $(function() {
        $( "#checkInDate" ).datepicker({dateFormat:"mm/dd/yy", minDate: 0}).datepicker("setDate",new Date());
        $( "#checkOutDate" ).datepicker({dateFormat:"mm/dd/yy", minDate: 0}).datepicker("setDate",+1);
     });
  </script>

在你的页面的 jquery 导入之后它应该可以正常工作

<script type="text/javascript" src = "js/jquery-1.10.2.js"></script>
<script type="text/javascript" src = "js/jquery-ui.js"></script>

【讨论】：

是的，我尝试在 jQuery 导入下方更改并添加自定义脚本。有效！谢谢！