Datepicker returns error of datepicker is not defined

Question

I've been struggling with an error on my datepicker. It keeps returning the error that the datepicker is not defined. below is the code that I am using. Note that jQuery is already loaded on the page and therefore not needed to be loaded again. I did however load the style that I would like for the date picker. In the end I am going to be adding a callback/return function, but wanted to try and figure out why I am getting this error. Any help would be greatly appreciated.

<html lang="en">
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
</head>
<body>

<div id="datepicker"></div>
 </body></html>
<script>
var min=3;

switch (new Date().getDay()) {
    case 4:
       min = 5;
       break;
    case 5:
       min = 4;
       break;
    case 6:
       min = 3;
       break;
}   
$( "#datepicker" ).datepicker({
    minDate: min,
    beforeShowDay: $.datepicker.noWeekends

}); 
</script>

Plz, check my answer if that solves your issue. Also, let me know how you are loading jquery? — Amanjot Kaur, Dec 30 '19 at 12:31

score 0 · Answer 1 · answered Dec 30 '19 at 12:06

0

In the given html i dont see <script> tags for jquery.

Try adding these in your html file, under head section.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

answered Dec 30 '19 at 12:06

madhu sudhan

177
1
14

score 0 · Answer 2 · answered Dec 30 '19 at 12:16

0

There are multiple scenarios for jQuery to come undefined: 1. Include the script tags with a proper CDN, Or file path if you have it in your project itself. 2. There are certain syntax which are deprecated after version 1.3 which can be seen here

answered Dec 30 '19 at 12:16

Vish

142
1
8

score 0 · Answer 3 · answered Dec 30 '19 at 12:30

0

The issue is that you don't have loaded the datepicker js. Also in your HTML, there is no jquery as you said it is loaded, but we are not able to view it anywhere.

answered Dec 30 '19 at 12:30

Amanjot Kaur

2,028
4
18
33

score 0 · Answer 4 · answered Dec 30 '19 at 12:53

You have not added jQuery and jQuery Ui CDN. Check the below code. It will work perfectly.

<html lang="en">
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
</head>
<body>

<div id="datepicker"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script>
        var min=3;

        switch (new Date().getDay()) {
            case 4:
               min = 5;
               break;
            case 5:
               min = 4;
               break;
            case 6:
               min = 3;
               break;
        }   
        $( "#datepicker" ).datepicker({
            minDate: min,
            beforeShowDay: $.datepicker.noWeekends

        }); 
    </script>
</body>
</html>

Datepicker returns error of datepicker is not defined

4 Answers4