Невозможно отобразить Bootstrap указатель даты в веб-приложении Asp. Net Core 3.1 - PullRequest
Новая
       29

Невозможно отобразить Bootstrap указатель даты в веб-приложении Asp. Net Core 3.1

0 голосов
/ 02 февраля 2020

Я определил следующий шаблон редактора (в разделе «Представления» / «Общий ресурс» / «Редактор»): 

@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>

В _Layout.cs html у меня есть следующие библиотеки: 

<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" />

Наконец, в Index.cs html у меня есть следующий элемент управления вводом: 

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

(MyDate определен как DateTime в модели)

Я подтвердил что редактор фактически загружает мой пользовательский редактор; Тем не менее, я получаю следующую ошибку в окне консоли браузера: 

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)

Средство выбора даты не отображается должным образом (или, действительно, работает). Я предполагаю, что эта ошибка является причиной, но я не могу понять, почему datepicker не является функцией. Я проверил, и он присутствует в js/bootstrap-datepicker.min.js.

. При поиске проблемы несколько человек сказали, что она может быть ниже порядка ссылок на сценарии, но я попробовал их в различные разные заказы. Кто-нибудь может сказать мне, в чем может быть проблема?

1 Ответ

0 голосов
/ 03 февраля 2020

В вашем коде мы можем обнаружить, что вы добавили ссылки на файлы bootstrap -datepicker и jQuery UI. Чтобы устранить проблему, вы можете попытаться удалить / закомментировать ссылки на jQuery файлы UI, а затем проверить если виджет bootstrap datepicker может работать хорошо.

Кроме того, чтобы избежать конфликта с другими плагинами jQuery datepicker, вы можете попробовать следующий фрагмент кода. 

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

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