我使用bootstrap年份日历和模型 - 问题是datepicker无效，开始日期/结束日期为空。
点击日历中的日期，模态将在模态上打开我有开始日期和结束日期，当我试图获得它正在撤销的日期时。
请帮助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS" />
<title>Test</title>
<link href="../../staticFiles/css/bootstrap.min.css" rel="stylesheet">
<link href="../../staticFiles/css/datepicker.css" rel="stylesheet" />
<link href="../../staticFiles/css/sb-admin.css" rel="stylesheet">
<link href="../../staticFiles/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../../staticFiles/css/bootstrap-year-calendar.css" />
<link href="../../staticFiles/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../../staticFiles/css/export.css" type="text/css" media="all" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="../../staticFiles/js/bootstrap.min.js"></script>
<script src="../../staticFiles/js/bootstrap-year-calendar.min.js"></script>
<script src="../../staticFiles/js/onCallCalendar.js"></script>
<script>
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('option', 'update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('option', 'update', event ? event.endDate : '');
$('#event-modal').modal("show");
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').setDataSource(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker("getDate"),
endDate: $('#event-modal input[name="event-end-date"]').datepicker("getDate")
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if (event.id) {
for (var i in dataSource) {
if (dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
} else {
var newId = 0;
for (var i in dataSource) {
if (dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
console.log("data is pushed to Datasource");
console.log(dataSource);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
contextMenuItems: [{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
selectRange: function(e) {
editEvent({
startDate: e.startDate,
endDate: e.endDate
});
},
mouseOnDay: function(e) {
if (e.events.length > 0) {
var content = '';
for (var i in e.events) {
content += '<div class="event-tooltip-content">' +
'<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' +
'<div class="event-location">' + e.events[i].location + '</div>' +
'</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html: true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if (e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
renderEnd: function(e) {
var currentMonth = new Date().getMonth();
$('#calendar .month-container').each(function(idx, el) {
console.log(currentMonth);
if (idx < currentMonth - 1) {
$(this).css("display", "none");
}
if (idx > currentMonth + 1) {
$(this).css("display", "none");
}
});
},
dataSource: [{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19)
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1)
},
{
id: 3,
name: 'Apple Special Event',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 1),
endDate: new Date(currentYear, 8, 1)
},
{
id: 4,
name: 'Apple Keynote',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 9),
endDate: new Date(currentYear, 8, 9)
},
{
id: 5,
name: 'Chrome Developer Summit',
location: 'Mountain View, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 18)
},
{
id: 6,
name: 'F8 2015',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 2, 25),
endDate: new Date(currentYear, 2, 26)
},
{
id: 7,
name: 'Yahoo Mobile Developer Conference',
location: 'New York',
startDate: new Date(currentYear, 7, 25),
endDate: new Date(currentYear, 7, 26)
},
{
id: 8,
name: 'Android Developer Conference',
location: 'Santa Clara, CA',
startDate: new Date(currentYear, 11, 1),
endDate: new Date(currentYear, 11, 4)
},
{
id: 9,
name: 'LA Tech Summit',
location: 'Los Angeles, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 17)
}
]
});
$('#save-event').click(function() {
saveEvent();
});
});
</script>
<div class="modal modal-fade" id="event-modal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">
Event
</h4>
</div>
<div class="modal-body">
<input type="hidden" name="event-index" value="">
<form class="form-horizontal">
<div class="form-group">
<label for="min-date" class="col-sm-4 control-label">Name</label>
<div class="col-sm-7">
<input name="event-name" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="min-date" class="col-sm-4 control-label">Location</label>
<div class="col-sm-7">
<input name="event-location" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label for="min-date" class="col-sm-4 control-label">Dates</label>
<div class="col-sm-7">
<div class="input-group input-daterange" data-provide="datepicker">
<input name="event-start-date" type="text" class="form-control" value="2012-04-05">
<span class="input-group-addon">to</span>
<input name="event-end-date" type="text" class="form-control" value="2012-04-19">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="save-event">
Save
</button>
</div>
</div>
</div>
</div>
</html>
答案 0 :(得分：-1)
已经有一段时间了，但是有人需要它。问题是您没有包含datepicker脚本：
<script src="../../staticFiles/js/bootstrap-datepicker.min.js"></script>
这是他们使用的选择器：bootstrap-datepicker 。下载并将其添加到您的项目中。
编辑： 如果需要，这里有一个小提琴：https://jsfiddle.net/William_/4520t0dq/