使用 jquery 日期选择器

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.

here is my bundleConfig

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-1.12.1.js"));
        //css  
        bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include(
               "~/Content/jquery-ui.css"));

Can someone help me spot what is wrong.

Thank you!

Answer 1

The function declaration and the Datapicker reference must be done before the JQuery Reference.

You must load jQuery or relative first.
Then Datapicker.
Then the call to initialize the datapicker.