CODEWITHSUNDEEP
jquerydatepickerjquery-ui-datepicker
Ken Flake
Ken Flake

Reputation: 595

My JQuery Datepicker doesn't appear

I've made a php page (something about hotel reservation) and I want to make a JQuery Datepicker, I have tried this on a blank page, provided the needed css and js files, and it works.

But when I tried it on my customized page, it doesn't work. I think it's something that has to do with the other css and / or other javascript files in my page, but I removed them for testing. But still sadly it doesn't appear.. What seems to be the problem?

Code:

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

Upvotes: 0

Views: 694

Answers (1)

w.Bala
w.Bala

Reputation: 129

try to add 

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

after the jquery imports of your page it should work fine

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

Upvotes: 2

Related Questions