Help, "TypeError: $(...).datepicker is not a function" and "Unkown CSS class 'start'/'end'"

[RyanTaite]

I'm trying to use this date/time picker but can't seem to figure it out yet. I'm trying to follow the jQuery and Date only example on this page: https://jonthornton.github.io/Datepair.js/

I'm currently getting no changes to my textboxes, a warning in my .cshtml file that start and end are Unknown CSS classes, and this error in my Firefox console:

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

I'm using

• Visual Studio 2017
• C# ASP.NET MVC 5.2.3.0
• Bootstrap v3.3.7
• jQuery v3.2.1
• jQuery Validation Plugin v1.16.0
• Modernizr v2.8.3
• Respond.js v1.4.2

I also just added a npm package.json file to my project with this inside it:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "datepair.js": "0.4.15"
  }
}

and I've gone ahead and included the /node_modules folder into my project

In my .cshtml file I have this for the text boxes I want to apply this too (column formatting, labels, and validation removed):

<div id="callStartAndEndTime">
    <div class="form-group">
        @Html.TextBoxFor(m => m.CallStartTime, new { @class = "form-control date start" })
    </div>
    <div class="form-group">
        @Html.TextBoxFor(m => m.CallEndTime, new { @class = "form-control date end" })
    </div>
</div>

CallStartTime and CallEndTime are both of type DateTime. This is where I see the Unknown CSS error

For now I have my JavaScript at the bottom of the same file

@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript" src="~/node_modules/datepair.js/dist/jquery.datepair.js"></script>
<script type="text/javascript" src="~/node_modules/datepair.js/dist/datepair.js"></script>
<script>
    $('#callStartAndEndTime .date').datepicker({
        'format': 'mm/dd/yyyy',
        'autoclose': true
    });

    $('#callStartAndEndTime').datepair();
</script>

When everything is loaded I have this HTML (fluff removed):

<div id="callStartAndEndTime">
    <div class="form-group">
        <input class="form-control date start" id="CallStartTime" name="CallStartTime" type="text">
    </div>
    <div class="form-group">
        <input class="form-control date end" id="CallEndTime" name="CallEndTime" type="text">
    </div>
</div>

And this javascript load order:

<script src="/Scripts/jquery-3.2.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="/node_modules/datepair.js/dist/jquery.datepair.js"></script>
<script type="text/javascript" src="/node_modules/datepair.js/dist/datepair.js"></script>
<script> // My code where .datepicker() and .datepair() are called </script>

Hopefully the amount of details I've added here does more good than harm. Any ideas what I'm doing wrong here?

[jonthornton]

Hi Ryan, it sounds like the Datepair script is failing to load in the browser. You can check this with Chrome Devtools - you should datepair.js loaded successfully in the Network tab.

The node_modules folder typically isn't made public. The simplest fix would be to copy the datepair scripts into your /Scripts folder.

[RyanTaite]

Here is a screenshot from my Chrome's Dev Tools Network Tab. Looks like both jquery.datepair.js and datepair.js are loading from the /node_modules folder.

No difference if I copy jquery.datepair.js and datepair.js to my /Scripts folder and call them like so:

<script type="text/javascript" src="~/Scripts/jquery.datepair.js"></script>
<script type="text/javascript" src="~/Scripts/datepair.js"></script>

[jonthornton]

Dang, I was hoping it was a simple fix. Unfortunately it's difficult for me to debug further without a working demo to poke and prod.

[RyanTaite]

If it helps, I made a super small skeleton project recreating the error: https://github.com/RyanTaite/DatePairErrorRecreation

[jonthornton]

I've never used C# - I'm sorry but I'm not going to be able to debug this

[RyanTaite]

Dang, thanks anyways!

[trouverun]

I had the same issue, I fixed it by importing jquery.timepicker invidually.

[RyanTaite]

@Gigaika I added "timepicker": "1.11.12" to package.json's devDependencies section and included the downloaded folder into the project.

I then added <script type="text/javascript" src="~/node_modules/timepicker/jquery.timepicker.js"></script> above the datapair scripts and I see no change. Same for when adding below.

Is this what you did?