Jquery 使用带有完整日历的日期选择器来突出显示完整日历上的选定日期选择器日期

Question

将完整日历与日期选择器集成以更改 asp.net mvc5 应用程序中的日期。将日期选择器添加到完整日历没有问题，但无法让 dayrender 在任何视图中突出显示所选日期，但主视图是月。

我得到的问题是"未捕获的类型错误：t.getFullYear 不是一个函数"

所有 js 文件按以下顺序添加

jquery jquery-ui 时刻 完整日历

我错过了一个吗？遵循这个胎面，但无法让它工作。使用Jquery，谁能帮我在完整日历中突出显示日期的颜色(在一周视图中(

jQuery

$(document).ready(function () {
var source = "../JobsCalendar/PostCalendarData";
var dt = new Date($.now());
var selected_date = null;
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev title next today',
right: 'month,agendaWeek,agendaDay'
},
timezone: 'local',
defaultView: 'month',
eventClick: function (event, jsEvent, view) {
//set the values and open the modal
$("#eventInfo").html(event.description);
$("#eventLink").attr('href', event.url);
$("#eventToCal").attr('href', event.tocalendar);
$("#eventContent").dialog({
modal: true,
title: event.title
});
new $.jmelosegui.GoogleMap('#mapContainer').ajax({
url: '@Url.Action("DisplayAccCenterPartialView", "JobsUpcoming")',
type: "Get",
data: { jobNumber: event.map },
success: function (data) {
//alert('succeded');
}
});
return false;
},
events: {
url: source,
type: 'POST',
data: {
custom_param1: '',
custom_param2: ''
},
error: function () {
}
},
dayClick: function (date, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.target).addClass("fc-state-highlight");
},
eventRender: function (event, element) {
if (event.start > dt || event.status == "C") {
element.css('background-color', 'rgba(98, 168, 213, 1)');
element.css('border', 'rgba(98, 168, 213, 1)');
}
if (event.start < dt) {
element.css('background-color', 'rgba(172, 172, 172, 1)');
element.css('border', 'rgba(172, 172, 172, 1)');
}
if (event.status == "X") {
element.css('background-color', 'rgba(255, 89, 89, 1)');
element.css('border', 'rgba(255, 89, 89, 1)');
}
},
dayRender: function (date, cell) {
if (selected_date == $.datepicker.formatDate('yy-mm-dd', date)) {
$(cell).addClass('fc-state-highlight');
}
}
});
$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
var date = new Date(dateText);
selected_date = $.datepicker.formatDate('yy-mm-dd', date);
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('render');
}
});
});

.HTML

<div id="datepicker"></div>
<div id="calendar"></div>

谢谢

Answer 1

解决了这个问题，必须删除 dayRender 函数中的代码并将日期选择器更改为：

$('#datepicker').datepicker({
onSelect: function (dateText, inst) {
var date = moment(dateText).toDate();
selected_date = $.datepicker.formatDate('yy-mm-dd', date);
$('#calendar').fullCalendar('gotoDate', date);
$('#calendar').fullCalendar('select', date);
}
});

这将在日期选择器上选择日期时更新完整日历