引导datetimepicker的问题 [英] Problem with bootstrap datetimepicker
问题描述
问题1：
屏幕截图1 [ ^ ]
屏幕截图2 [ ^ ]
有什么想法可能导致它吗？
问题2：
我也遇到了datetimepicker无法在模态窗口工作的问题。
屏幕截图模态控制台 [ ^ ]
提前致谢！
我尝试了什么：
因为它是MVC项目，我在_Layout的头部包含了CSS文件。
在部分脚本中添加了Moment.js和Datetimepicker.js。
我正在使用Bootstrap 3.3.7和Boo tstrap Datetimepicker CSS 4.17.45
更新：
弄清楚fullcalendar和datetimepicker的jQuery要求是冲突的。
FullCalendar适用于1.7.2，而DateTimePicker适用于3.2.1
Problem 1:
Screenshot 1[^]
Screenshot 2[^]
Any ideas what might be causing it?
Problem 2:
I'm also having issues with datetimepicker not working at modal windows at all.
Screenshot Modal Console[^]
Thanks in advance!
What I have tried:
Since it's MVC project, I've included CSS file in head of _Layout.
Added Moment.js and Datetimepicker.js to section Scripts.
I'm using Bootstrap 3.3.7 and Bootstrap Datetimepicker CSS 4.17.45
UPDATE:
Figured out that jQuery requirements for fullcalendar and datetimepicker were colliding.
FullCalendar works on 1.7.2, while DateTimePicker on 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版本可以是sepparated。但是我收到了这个错误。
错误 [ ^ ]
也许我做错了什么？
Googled a bit and found out jQuery versions can be sepparated. However I'm getting this error.
Error[^]
Maybe I'm doing something wrong?
推荐答案
Original = jQuery.noConflict（true）;< / script>
< script src =〜/ Scripts / jquery-3.2.1.js>< / script>
< script>
var
Original = jQuery.noConflict(true);</script> <script src="~/Scripts/jquery-3.2.1.js"></script> <script> var
New = jQuery.noConflict（true）;
New = jQuery.noConflict(true);
=
这篇关于引导datetimepicker的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
