CODEWITHSUNDEEP
javascriptjquery
Samanyu Mehra
Samanyu Mehra

Reputation: 107

jQuery Date picker is not opening on click

I was messing around with the jQuery Datepicker in the jsFiddle but when I copied the code in my actual project, it's not working. I think the problem is with the jquery CDN. The jsFiddle is using jquery 1.9.1 and jquery UI 1.9.2. I added both of these CDN to my JSP page but it's still not working.

Link to the JS Fiddle: JS Fiddle

JS File

    var dateToday = new Date();
var dates = $("#datepicker1").datepicker({
    defaultDate: "+1w",
    dateFormat: "yy-mm-dd",
//    changeMonth: true,
    duration:"slow",
    showAnim: "explode",
    numberOfMonths: 1,
    showButtonPanel: true,
    beforeShowDay: $.datepicker.noWeekends,
    minDate: dateToday,
    maxDate:dateToday+"+2m" ,
    onSelect: function(selectedDate) {
        var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $(this).data("datepicker"),
            date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
        dates.not(this).datepicker("option", option, date);
    }
});

JSP File

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Book A Appointment</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>   
<style type="text/css">
        <%@include file="/CSS/docDetails.css"%>
    </style>
 <script type="text/javascript"
    src="<%=request.getContextPath() %>/JS/docDetails.js"></script>
 </head>
<body>
    <div class="container">
        <span>First Name:</span>${fName }<br> <span>Last Name:</span>${lName }<br>
        <span>Mobile:</span>${mobile }<br> <span>Address:</span>${add }<br>
        <span>Email:</span>${email }<br> <span>Image:</span>${img }<br>
        <span>Speciality In:</span>${special }<br> <span>Degree:</span>${deg }<br>
        <span>Experience:</span>${exp }<br> <span>Fees:</span>${fees }<br>
        <div class="dateBox">
            <input class="js--datePicker" type="text" id="datepicker1"
                value="Date To" readonly="readonly">
        </div>
    </div>
</body>
</html>

This is the error I am getting.

CSS File

.ui-datepicker {
  width: 350px;
  height: 400px;
  margin: 5px auto 0;
  font: 12pt Arial, sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}

.ui-datepicker table {
  width: 100%;
}

.ui-datepicker-header {
  background: #3d3939;
  color: #ffffff;
  font-family: 'Times New Roman';
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #111;
}

.ui-datepicker-title {
  text-align: center;
  font-size: 15pt;
  color: #d9cc3d;
  font-weight: bolder;
}

.ui-datepicker-prev {
  float: left;
  cursor: pointer;
  background-position: center -30px;
  background-color: white;
}

.ui-datepicker-next {
  float: right;
  cursor: pointer;
  background-position: center 0px;
  background-color: white;
}

.ui-datepicker thead {
  background-color: #fff;
  border-bottom: 1px solid #bbb;
}

.ui-datepicker th {
  background-color: #808080;
  text-transform: uppercase;
  font-size: 10pt;
  color: red;
}

.ui-datepicker tbody td {
  padding: 0;
  border-right: 1px solid #808080;
}

.ui-datepicker tbody td:last-child {
  border-right: 0px;
}

.ui-datepicker tbody tr {
  border-bottom: 1px solid #bbb;
}

.ui-datepicker tbody tr:last-child {
  border-bottom: 0px;
}

.ui-datepicker a {
  text-decoration: none;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: inline-block;
  /*font-weight: bold;*/
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  /*text-shadow: 1px 1px 0px #fff;*/
  /*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}

.ui-datepicker-calendar .ui-state-default {
  background: linear-gradient(#999999, #737373);
  color: #ffffff;
  height: 40px;
  width: 40px;

}

.ui-datepicker-calendar .ui-state-hover {
  background: #33adff;
  color: #FFFFFF;
}

.ui-datepicker-calendar .ui-state-active {
  background: #33adff;
  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
  color: #e0e0e0;
  text-shadow: 0px 1px 0px #4d7a85;
  border: 1px solid #55838f;
  position: relative;
  margin: -1px;
}

.ui-datepicker-unselectable .ui-state-default {
  background: #D6E4BE;
  color: #000;
}

Upvotes: 0

Views: 1152

Answers (1)

Luis Romero
Luis Romero

Reputation: 81

Put your script file at the bottom of document, the error is the dom not ready when you call to the function script

<!DOCTYPE html>
<html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Book A Appointment</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>   
    <style type="text/css">
        <%@include file="/CSS/docDetails.css"%>
    </style>

 </head>
<body>
    <div class="container">
        <span>First Name:</span>${fName }<br> <span>Last Name:</span>${lName }<br>
        <span>Mobile:</span>${mobile }<br> <span>Address:</span>${add }<br>
        <span>Email:</span>${email }<br> <span>Image:</span>${img }<br>
        <span>Speciality In:</span>${special }<br> <span>Degree:</span>${deg }<br>
        <span>Experience:</span>${exp }<br> <span>Fees:</span>${fees }<br>
        <div class="dateBox">
            <input class="js--datePicker a" type="text" id="datepicker1"
                value="Date To" readonly="readonly">
        </div>
        
</body>
<script type="text/javascript">
        var dateToday = new Date();
        console.log($("#datepicker1"))
        var dates = $("#datepicker1").datepicker({
            defaultDate: "+1w",
            dateFormat: "yy-mm-dd",
        //    changeMonth: true,
            duration:"slow",
            showAnim: "explode",
            numberOfMonths: 1,
            showButtonPanel: true,
            beforeShowDay: $.datepicker.noWeekends,
            minDate: dateToday,
            maxDate:dateToday+"+2m" ,
            onSelect: function(selectedDate) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker"),
                    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    </script>
</html>

Upvotes: 1

Related Questions