Help, "TypeError: $(...).datepicker is not a function" and "Unkown CSS class 'start'/'end'"
Closed this issue · 8 comments
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?
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.
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>
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.
If it helps, I made a super small skeleton project recreating the error: https://github.com/RyanTaite/DatePairErrorRecreation
I've never used C# - I'm sorry but I'm not going to be able to debug this
Dang, thanks anyways!
I had the same issue, I fixed it by importing jquery.timepicker invidually.
@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?