CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapasp.net-core
user12585721
user12585721

Reputation:

Can't get Bootstrap datepicker to show in a Asp.Net Core 3.1 web app

I've defined the following editor template (under Views/Shared/Editor):

@model System.DateTime?
<div class="editor-label">
    @Html.Label("")
</div>
<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", (Model == DateTime.MinValue) ? null : Model), new { @class = "text" })
</div>

<script type="text/javascript">
    $(document).ready(function () {        
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({
            uiLibrary: 'bootstrap4',
            gotoCurrent: true
        });
    });
</script>

In _Layout.cshtml, I have the following libraries:

<script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="~/lib/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

Finally, in Index.cshtml, I have the following input control:

@Html.EditorFor(m => m.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } });

(MyDate is defined as a DateTime in the Model)

I have verified that the editor is actually loading my custom editor; however, I get the following error in the console window of the browser:

jquery.js:3818 jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> (https://localhost:44346/:54:26)
    at mightThrow (https://localhost:44346/lib/jquery/dist/jquery.js:3534:29)
    at process (https://localhost:44346/lib/jquery/dist/jquery.js:3602:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js:3818
jquery.js:3827 Uncaught TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> ((index):54)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

The date picker doesn't render properly (or, indeed, work). I assume this error is the cause, but I can't work out why datepicker isn't a function. I've checked, and it's present in js/bootstrap-datepicker.min.js.

On searching for the issue, a few people have said that it could be down to the order of the script references, but I've tried them in various different orders. Can anyone tell me what the issue might be?

Upvotes: 0

Views: 3377

Answers (1)

Fei Han
Fei Han

Reputation: 27793

In your code, we can find that you added references to both bootstrap-datepicker and jQuery UI files, to troubleshoot the issue, you can try to remove/commentout references to jQuery UI files, then check if bootstrap datepicker widget can work well.

Besides, to avoid conflict with other jQuery datepicker plugins, you can try following code snippet. 

var datepicker = $.fn.datepicker.noConflict(); 
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality

$('.datepicker').bootstrapDP({
    uiLibrary: 'bootstrap4',
    gotoCurrent: true
});

Upvotes: 1

Related Questions