0

I am getting the error "$(...).datepicker() is not a function as I try to set a bootstrap datepicker on a form field in my MVC/razor form. I've read similar posts and can't seem to get their solutions to work. It seems like the order of dependencies matters. Any advice would be appreciated. I've referenced this as one solution I've tried without success. How to add Date Picker Bootstrap 3 on MVC 5 project using the Razor engine?

Script Block

<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker();

    });
</script>

Form Field

<div class="form-group">
            @Html.LabelFor(model => model.TrainingDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.TrainingDate, new { htmlAttributes = new { @class = "form-control datepicker" } })
                @Html.ValidationMessageFor(model => model.TrainingDate, "", new { @class = "text-danger" })
            </div>
        </div>
Alex
  • 443
  • 3
  • 18
  • Not related, but you do not need both the minified and non-minified versions of jquery –  Jul 24 '17 at 02:21
  • @StephenMuecke: That's the first thing I noticed too. There is never a need for both, and I think it could cause problems, though I don't know that it's the cause of this particular one. – 3D1T0R Jul 24 '17 at 02:23
  • Do you have any other copies of jquery in the view added after your datepicker.js file? –  Jul 24 '17 at 02:29
  • I do not have any other copies of jquery. Just what I've included in my code – Alex Jul 24 '17 at 02:37
  • for alternative you can try jquery-ui datepicker. – Gusti Arya Jul 24 '17 at 02:38

1 Answers1

0

There must be some conflict on your jquery. Also you have to remove jquery library so remove this one <script src="~/Scripts/jquery-3.1.1.js"></script> .

for no conflict on jquery, you can do your code like this

<script type="text/javascript">
    $.noConflict();
    $(function () {
        $('.datepicker').datepicker();

    });
</script>
Arun lama
  • 46
  • 3