Uncaught TypeError: $(...).datepicker is not a function

Question

Uncaught TypeError: $(...).datepicker is not a function

App Dev 86

Hi All,

Getting the following errors for trying get a datetime picker.

Create:247 Uncaught TypeError: $(...).datepicker is not a function
at Create:247
(anonymous) @ Create:247
Create:243 Uncaught TypeError: $(...).datepicker is not a function
at HTMLDocument.<anonymous> (Create:243)
at o (jquery-1.7.2.min.js:2)
at Object.fireWith (jquery-1.7.2.min.js:2)
at Function.ready (jquery-1.7.2.min.js:2)
at HTMLDocument.B (jquery-1.7.2.min.js:2)

App Dev 86 Reputation points

2021-06-14T21:26:01.247+00:00

Why are we getting permission errors when typing to post questions?
Can we no longer add source codes???
App Dev 86 Reputation points

2021-06-14T21:27:56.367+00:00
Going to try again can seems to post source codes
Just trying to get a blasted date picker to work

This is the scripting:
$('#z').datepicker({
inline: true,
altField: '#d'
});

$('#d').change(function () { $('#z').datepicker('setDate', $(this).val()); });

This is the razor for the mvc
<input type="text" id="d" />
<div id="z"></div>
Tianyu Sun-MSFT 34,691 Reputation points Microsoft External Staff

2021-06-15T07:15:38.227+00:00

Hi @App Dev , welcome to Microsoft Q&A forum. Is the specific js reference added and loaded without any error? Are you using ASP .NET MVC or ASP .NET Core MVC?
App Dev 86 Reputation points

2021-06-15T17:12:33.993+00:00

Hi I am using ASP .NET MVC,

I read that If I have multiple version of jquery that will cause the problem but I don't know what that means or even how to tell.
Full transparency here, I don't understand jquery all that well at all. I have tried tutorials and it is just mind scrambling to me.

The site will not let me post my source codes. as it says it's too many characters.. this is crazy

App Dev 86

Trying to post the bundles files

Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
    bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include(
                    "~/Scripts/WebForms/WebForms.js",
                    "~/Scripts/WebForms/WebUIValidation.js",
                    "~/Scripts/WebForms/MenuStandards.js",
                    "~/Scripts/WebForms/Focus.js",
                    "~/Scripts/WebForms/GridView.js",
                    "~/Scripts/WebForms/DetailsView.js",
                    "~/Scripts/WebForms/TreeView.js",
                    "~/Scripts/WebForms/WebParts.js"))

App Dev 86

    ' Order is very important for these files to work, they have explicit dependencies
    bundles.Add(New ScriptBundle("~/bundles/MsAjaxJs").Include(
            "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"))

    bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"))

App Dev 86

    ' Use the Development version of Modernizr to develop with and learn from. Then, when you’re
    ' ready for production, use the build tool at https://modernizr.com to pick only the tests you need
    bundles.Add(New ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"))



    bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"))

    bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include(
              "~/scripts/jquery.unobtrusive.ajax*",
              "~/scripts/jquery.validate.unobtrusive.bootstrap*"))

End Sub

End Class

App Dev 86

This is the a sample of the mvc view and the java scripts

<div class="form-group">
    @Html.LabelFor(Function(model) model.Response_Date, htmlAttributes:=New With {.class = "control-label col-md-2"})
    <div class="col-md-10">
        @Html.EditorFor(Function(model) model.Response_Date, New With {.htmlAttributes = New With {.class = "form-control"}})
        @Html.ValidationMessageFor(Function(model) model.Response_Date, "", New With {.class = "text-danger"})
    </div>
</div>



<input type="text" id="d" />
<div id="z"></div>

App Dev 86 Reputation points

2021-06-15T17:17:44.993+00:00

For some reason I cant post the rest :(

Well I cannot post the script part

1 answer

Your answer

App Dev 86 Reputation points

2021-06-14T21:26:01.247+00:00

Why are we getting permission errors when typing to post questions?
Can we no longer add source codes???
App Dev 86 Reputation points

2021-06-14T21:27:56.367+00:00

Going to try again can seems to post source codes
Just trying to get a blasted date picker to work

This is the scripting:
$('#z').datepicker({
inline: true,
altField: '#d'
});

$('#d').change(function () { $('#z').datepicker('setDate', $(this).val()); });

This is the razor for the mvc
<input type="text" id="d" />
<div id="z"></div>
Tianyu Sun-MSFT 34,691 Reputation points Microsoft External Staff

2021-06-15T07:15:38.227+00:00

Hi @App Dev , welcome to Microsoft Q&A forum. Is the specific js reference added and loaded without any error? Are you using ASP .NET MVC or ASP .NET Core MVC?
App Dev 86 Reputation points

2021-06-15T17:12:33.993+00:00

Hi I am using ASP .NET MVC,

I read that If I have multiple version of jquery that will cause the problem but I don't know what that means or even how to tell.
Full transparency here, I don't understand jquery all that well at all. I have tried tutorials and it is just mind scrambling to me.

The site will not let me post my source codes. as it says it's too many characters.. this is crazy
App Dev 86 Reputation points

2021-06-15T17:13:20.553+00:00

Trying to post the bundles files

Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection) bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include( "~/Scripts/WebForms/WebForms.js", "~/Scripts/WebForms/WebUIValidation.js", "~/Scripts/WebForms/MenuStandards.js", "~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js", "~/Scripts/WebForms/DetailsView.js", "~/Scripts/WebForms/TreeView.js", "~/Scripts/WebForms/WebParts.js"))
App Dev 86 Reputation points

2021-06-15T17:13:43.453+00:00

' Order is very important for these files to work, they have explicit dependencies bundles.Add(New ScriptBundle("~/bundles/MsAjaxJs").Include( "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js")) bundles.Add(New ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"))
App Dev 86 Reputation points

2021-06-15T17:14:13.423+00:00

' Use the Development version of Modernizr to develop with and learn from. Then, when you’re ' ready for production, use the build tool at https://modernizr.com to pick only the tests you need bundles.Add(New ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")) bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")) bundles.Add(New ScriptBundle("~/bundles/jqueryval").Include( "~/scripts/jquery.unobtrusive.ajax*", "~/scripts/jquery.validate.unobtrusive.bootstrap*")) End Sub

End Class
App Dev 86 Reputation points

2021-06-15T17:15:24.977+00:00

This is the a sample of the mvc view and the java scripts

<div class="form-group"> @Html.LabelFor(Function(model) model.Response_Date, htmlAttributes:=New With {.class = "control-label col-md-2"}) <div class="col-md-10"> @Html.EditorFor(Function(model) model.Response_Date, New With {.htmlAttributes = New With {.class = "form-control"}}) @Html.ValidationMessageFor(Function(model) model.Response_Date, "", New With {.class = "text-danger"}) </div> </div> <input type="text" id="d" /> <div id="z"></div>
App Dev 86 Reputation points

2021-06-15T17:17:44.993+00:00

For some reason I cant post the rest :(

Well I cannot post the script part

Answer 1

Hi @App Dev ,
According to your codes,you must add datepicker.js.You need to do like this:

<s cript src="~/Scripts/jquery-1.12.4.min.js"></s cript>  
<s cript>  
    $(function () {  
        $('#d').change(function () {  
            $('#z').datepicker('setDate', $(this).val());  
        });  
    })  
</script>  
<h2>Index</h2>  
<input type="text" id="d" />  
<div id="z"></div>  
  
@section scripts  
{  
    @Scripts.Render("~/Scripts/jquery-1.12.4.min.js")  
    @Scripts.Render("~/Scripts/bootstrap.min.js")  
    @Scripts.Render("~/Scripts/bootstrap-datepicker.min.js")  
    @Styles.Render("~/Content/bootstrap.min.css")  
    @Styles.Render("~/Content/bootstrap-datepicker.min.css")  
}

By the way,if you need to post any codes,you could put codes into txt or screenshots to us.
Best regards,
Yijing Sun

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Uncaught TypeError: $(...).datepicker is not a function

1 answer

Your answer