jquery datepicker would not work

Question

I have an @Html.edifor to show date of birth and I want to use jquery datepicker to show calendar. My scritp code is located in an external js file and proper reference to the file is on the view. I am also using bundle in app config. here is my script $(function () { $("#DateOfBirth").datepicker({ dateFormat: "dd-MMM-yy", changeMonth: true, changeYear: true }); }); I am getting the following error. Jquery?v=gywVLk6VvVVR_J6-oRPIvBpBvXSXEW6ZffeMhgu--bE1:1 Uncaught TypeError: $(...).datepicker is not a function. Can someone help me spot what is wrong. Thank you!

Sachin Singh · Answer

@Schield it is very common error which everyone gets once in the life. the problem is you have referenced jquery twice. there might be a reference of Jquery in Layout by means of Bundle or directly. You are also referencing any jquery file in the view where there is datepicker. Solution is to check how many times Jquery is being loaded by inspecting the console with developer tool and remove any reference of jquery loaded more than once.

Mageshwaran R · Answer

Hi Alex, I think you missed one following packages:

Mageshwaran R · Answer

Hi Alex, please try this code: > html > head > meta charset = "utf-8" > meta name = "viewport" content = "width=device-width, initial-scale=1" > title > jQuery Datepicker title > link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > link rel = "stylesheet" href = "/resources/demos/style.css" > 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 > script > $( function() { $("#datepicker").datepicker(); } ); script > head > body > p > Date: input type = "text" id = "datepicker" > p > body > html >