I am trying to display two datetimepickers but i'm getting the error "Uncaught TypeError: $(...).datetimepicker is not a function" . I've installed :
Install-Package Bootstrap.v3.Datetimepicker
Install-Package Bootstrap.v3.Datetimepicker.CSS
Here is the code :
@model MVCGreenhouseMonitoring.Models.Plotting.PlottingCalendarDropDownList
<head>
<title></title>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/scripts/moment-with-locales.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />
</head>
<script>
$(function () {
$("#txtdatepicker1").datetimepicker();
$("#txtdatepicker2").datetimepicker();
});
</script>
@using (Html.BeginForm("IntervalReports", "Greenhouse", FormMethod.Post))
{
<table>
<tr>
<td>
<p>
Start Date: @Html.TextBoxFor(m => m.StartDateCalendar, new { @id = "txtdatepicker1", @style = "width:200px;" })
</p>
</td>
<td>
<p>
End Date: @Html.TextBoxFor(m => m.EndDateCalendar, new { @id = "txtdatepicker2", @style = "width:200px;" })
</p>
</td>
</tr>
</table>
<input type="submit" name="btnSubmit" value="Submit" />
}
I have all the necessary scripts in the Scripts folder.
Just include this on top of the other js files:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
And wrap your script like this:
jQuery(document).ready(function($){
jQuery("#txtdatepicker1").datetimepicker();
jQuery("#txtdatepicker2").datetimepicker();
});
Make sure you included the right path of jquery script and must be the first in the head tag of the html you can get the latest jquery script here https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With