我的 JQuery 日期选择器没有出现

Question

我做了一个 php 页面（关于酒店预订的一些东西），我想做一个 JQuery 日期选择器，我已经在空白页面上试过了，只要需要 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>

Answer 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 日期选择器没有出现

My JQuery Datepicker doesn't appear

jquery

datepicker

jquery-ui-datepicker