Implement Jquery Datetimepicker

Question

I am trying to implement JQuery Datetimepicker into my MVC application. I have added all the reference into this but still throwing error

GET http://localhost:53987/Home/assets/img/demo/m2.jpg 404 (Not Found)

Uncaught TypeError: $ is not a function

_Layout.cshtml code

!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>@ViewBag.Title - Arion Pedigrees</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

<body> 

                    <div class="navbar-header">

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">

                            <li class="dropdown"> 
                                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Reports</a>
                                <ul class="dropdown-menu dropdown-menu-left animated-2x animated fadeIn">
                                    <li>@Html.ActionLink("AA", "Index", "Home")</li>
                                    <li>@Html.ActionLink("BB", "Index", "Home")</li>

                                </ul>
                            </li>


            </nav> 
    <div class=" ">
        @RenderBody()
    </div>



        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

This the code:

  @Html.TextBoxFor(m => m.StartDate, new { @class = "form-control"})
 @Html.TextBoxFor(m => m.FinishDate, new { @class = "form-control" })

And then JavaScript code:

<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
    $.noConflict();
    $(document).ready(function () {

        $("#StartDate").datepicker({
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#FinishDate").datepicker("option", "minDate", selected)
            }
        });
        $("#FinishDate").datepicker({
            numberOfMonths: 1,
            onSelect: function (selected) {
                $("#StartDate").datepicker("option", "maxDate", selected)
            }

        });


    });

</script>

Anyone please guide me. I do not understand where i am going wrong. The same code works for my another application. Any help is highly appreciated.

Are you using $ after jQuery is included in the page ? Check your view source of the page to confirm that. — Shyju
– Shyju, Commented Dec 11, 2017 at 0:51
@Shyju, I did not get you. If I remove $.noConflict() code then getting another error: Uncaught TypeError: $(...).datepicker is not a function. Please help me. — Raj
– Raj, Commented Dec 11, 2017 at 1:03
Remove the $.noConflict(); - If your then getting a $(...).datepicker is not a function is because your loading another copy of jQuery.js after the one in your view (probably in your Layout) — user3559349
– user3559349, Commented Dec 11, 2017 at 1:29
@StephenMuecke, Can you please guide me. Where am I am getting wrong. The same code works in another application but not in this. — Raj
– Raj, Commented Dec 11, 2017 at 1:46
Do you have a copy of jQuery.js` in your layout? (perhaps in a bundle?) — user3559349
– user3559349, Commented Dec 11, 2017 at 2:00

user3559349 · Accepted Answer · 2017-12-11 02:18:00Z

1

Because you have @Scripts.Render("~/bundles/jquery") in your Layout.cshtml file after the @RenderBody(), your including a copy of jQuery-{version}.js (the one in your bundle) after the jquery-ui.js script in your view, which wipes out jquery-ui.

Remove the jquery-1.12.4.js script and the $.noConflict(); line of code in your view, and wrap all your scripts in the view inside @section scripts so that the scripts are loaded in the correct order.

@section scripts {
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        $("#StartDate").datepicker({
            ....
        });
        $("#FinishDate").datepicker({
            ....
        });
    </script>
}

Note that because your bundles and the @RenderSection("scripts", required: false) in your layout are immediately before the closing </body> tag, it is not necessary to wrap your scripts in $(document).ready(function () {.

In addition, you should move your jquery-ui.css file into a section for styles.

In the Layout, add @RenderSection("styles", false) after @Styles.Render("~/Content/css") and in the view

@section styles {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
}

answered Dec 11, 2017 at 2:18

user3559349

Sign up to request clarification or add additional context in comments.

5 Comments

Raj Over a year ago

I am able to get the date now but getting error as well. vendors.js:2 Uncaught Error: Syntax error, unrecognized expression: # at Function.ga.error (vendors.js:2) at ga.tokenize (vendors.js:2) at ga.select (vendors.js:2) at Function.ga [as find] (vendors.js:2) at r.fn.init.find (vendors.js:2) at new r.fn.init (vendors.js:2) at r (vendors.js:2) at getParent (bootstrap.js:798) at HTMLAnchorElement.<anonymous> (bootstrap.js:782) at Function.each (vendors.js:2)

user3559349 Over a year ago

That is not related to your question (I do not even know what vendor.js is

Raj Over a year ago

Actually I have added a new layout and this vendor.js comes under assets folder. If I click on any textbox, the same error is throwing.

user3559349 Over a year ago

Again, That is not related to this question. You need to ask a new question with the relevant details and code.

Raj Over a year ago

Sure, Stephen. will do that. Thank you for your help.

fethe · Accepted Answer · 2017-12-11 00:56:31Z

0

you are calling $.noConflict() which disassociate jQuery from $ var, that's why, just delete that

https://api.jquery.com/jquery.noconflict/

answered Dec 11, 2017 at 0:56

fethe

6956 silver badges12 bronze badges

7 Comments

Raj Over a year ago

If i remove $.noConflict() then I am getting this error. Uncaught TypeError: $(...).datepicker is not a function

fethe Over a year ago

I don't see the <script> tag importing that library after jquery. Could be that?

Raj Over a year ago

I did not get you @fejanton. Please guide me how to do this. I got stuck here. The same code works in my another application.

fethe Over a year ago

When you're going to use a js library, you need to import it on the html file, same way as you did on the first 2 lines of code you posted. You should include the JQuery Datetimepicker import on line 3 like this <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.14/jquery.datetimepicker.js"></script>

Raj Over a year ago

still not working. I have added <script src="code.jquery.com/jquery-1.12.4.js"type="text/…> <script src="code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script> <script src="cdnjs.cloudflare.com/ajax/libs/jquery-datetimep‌icker/2.5.14/jquery.‌datetimepicker.js"></script>

|

Collectives™ on Stack Overflow

Implement Jquery Datetimepicker

2 Answers 2

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related