所以我在这里安静地进行混搭/收集...在我们的应用程序中,我们使用FullCalendar并在Bootstrap Modal中加载事件,然后如果用户愿意,他/她可以单击该字段,它会变成可在jEditable的帮助下进行编辑,以及我为Timepicker字段创建的新自定义“类型”。
下面的代码是为时间选择器可编辑字段创建新输入类型的内容
$.editable.addInputType('timepicker',
{
element : function(settings, original)
{
var input = $('<input id="timeToEdit">');
input.attr('autocomplete','off');
var hidden = $('<input type="hidden" id="editedEventTime" />');
$(this).append(hidden);
$(this).append(input);
return(hidden);
},
plugin : function(settings, original)
{
var form = this;
settings.onblur = 'ignore';
$(this).find('#timeToEdit').timepicker(
{
alwaysSetTime: true,
timeOnly: true,
timeFormat: "h:mm TT",
altField: "#editedEventTime",
altFieldTimeOnly: true,
altTimeFormat: "HH:mm:00",
stepHour: 1,
stepMinute: 15,
onSelect: function(dateText) {},
onClose: function(dateText)
{
original.reset.apply(form, [settings, original]);
},
});
}
});
这是让我在点击可编辑字段时添加该时间选择器的代码:
$('.eventEditStartTime').editable('phpfiletotalktodb.php', {
type : "timepicker",
submit : "<span class='btn btn-mini btn-success'><i class='icon-ok'></i></span>",
cancel : "<span class='btn btn-mini btn-danger'><i class='icon-remove'></i></span>",
tooltip : "Edit start of the event",
indicator : "Saving...",
callback : function(value, settings) {
$('#fullCalendar').fullCalendar('refetchEvents');
}
});
我遇到的问题是,如果用户单击要编辑的字段,但没有选择任何内容,然后单击屏幕并且模式窗口消失,然后用户再次单击该事件进行编辑,它将不会t 使该字段再次可编辑。
我能想到的一个可能原因是,当用户单击事件时,它会显示出来,然后用户单击时间字段进行编辑,下拉菜单显示但该字段为空,即使该值处于“隐藏”状态字段,也许这就是导致它呈现不可编辑的原因,但我不知道如何绕过它。
提前感谢您的帮助并对此进行调查。