Проблема с bootstrap datetimepicker
Проблема 1:
Скриншот 1[^]
Скриншот 2[^]
Есть какие-нибудь идеи, что может быть причиной этого?
Задача 2:
У меня также возникли проблемы с datetimepicker, который вообще не работает в модальных окнах.
Скриншот Модальной Консоли[^]
Заранее спасибо!
Что я уже пробовал:
Поскольку это проект MVC, я включил CSS-файл в head of _Layout.
Добавлено Moment.js и Datetimepicker.js в раздел Скрипты.
Я использую Bootstrap 3.3.7 и Bootstrap Datetimepicker CSS 4.17.45
ОБНОВЛЕНИЕ:
Выяснил,что требования jQuery для fullcalendar и datetimepicker сталкиваются.
FullCalendar работает на 1.7.2, а DateTimePicker - на 3.2.1
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Datetime and calendar test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/bootstrap-responsive.min.css" />
<link href="~/css/fullcalendar.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class='col-sm-6'>
@Html.TextBox("Test", "", new { @class = "form-control", id = "datetimepicker4", type = "text" })
</div>
</div>
</div>
<div id="fullcalendar"></div>
<script src="~/Scripts/jquery-1.7.2.js"></script>
<script>var $Original = jQuery.noConflict(true);</script>
<script src="~/Scripts/jquery-3.2.1.js"></script>
<script>
var $New = jQuery.noConflict(true);
$ = $Original;
jQuery = $Original;
$.New = $New;
</script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/js/fullcalendar.min.js"></script>
<script type="text/javascript">
$.New(document).ready(function () {
$.New('#datetimepicker4').datetimepicker();
});
</script>
<script>
$(document).ready(function () {
$('#fullcalendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: false, // allow "more" link when too many events
selectable: false,
eventClick: function (event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#modalUrl').html(event.url2);
$('#modalUrl').attr('href', event.url2);
$('#modal-info-event').modal();
document.getElementById("eventId").value = event.Id;
//$('#eventId').val() = event.Id.val();
console.log(document.getElementById("eventId"));
},
selectHelper: false,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
events: {
url: "/Dashboard/GetEvents"
}
});
});
</script>
</body>
</html>
Немного погуглил и выяснил, что версии jQuery можно разделить. Однако я получаю эту ошибку.
Ошибка[^]
Может быть, я делаю что-то не так?
Zubair SE
Привет друг, я реализовал bootstrap datetimepicker , но добавил Только три bootstrap. css, jquery_*. js и bootstrap.js файлы и это достигается.
Если вы добавили какие-либо отдельные Datetimepicker.js чтобы достичь этого, сначала удалите это и попробуйте еще раз. Пожалуйста, поделитесь своим фрагментом кода, если произойдет сбой.
Faris Karcic
Подождите, вы хотите сказать,что вообще не пользовались библиотекой datetimepicker?
И кстати, я понял, в чем проблема.
Это потому, что на этой странице тоже есть fullcalendar, так что jquery сталкивается, потому что fullcalendar использует 1.7.2 jquery, но datetime не будет работать в этой версии.
Однако все еще нытье, чтобы найти решение.
Zubair SE
да
Faris Karcic
Ну и как же вы его инициализировали?
Zubair SE
вы должны поделиться своим фрагментом кода, пожалуйста.
Html и клиентский скрипт, спасибо
Faris Karcic
Обновленный
Zubair SE
Есть две библиотеки Jquery опустите одну
все кажется нормальным, но функция datetimepicker не определена,
не удаляйте этот код
$.Новый документ).готово(функция () {
$. New ('#datetimepicker4'). datetimepicker();
});
добавьте его plugin.js файл
а также изображения отсутствуют, следуйте / загрузите полный пакет, пожалуйста.
и уберите это плз
ВАР первоначально = библиотека jQuery.noConflict(правда);
var $New = jQuery. noConflict(true);
$ = $Оригинал;
jQuery = $Original;
$.Новый = $Новый;
Zubair SE
https://eonasdan.github.io/bootstrap-datetimepicker/
дальше можете идти с этим, спасибо
Zubair SE
@HTML-код.Текстовое поле("тест", "", новые { @класс = "форма контроля", ИД = "datetimepicker4", тип = "текст" })
$('#datetimepicker4').элемент datetimepicker({timeformat компонента: 'чч:мм:СС Р'});
Faris Karcic
Спасибо за помощь, но все равно у меня будут конфликты между требованиями к FullCalendar и DateTimePicker.