我正在使用完整日历启动项目（使用Laravel后端）。议程通过jquery-ui主题很好地展示和主题。
当用户点击议程时，会捕获事件并显示使用刀片制作的表单。可以使用jquery检索和设置表单中的所有日期输入。我就是这样做的（selection by id）$("#startDate").val(formattedStartDate)。
对于时间输入但是这个（$("#startTime").val(formattedStartTime)）不再起作用了，我使用了select via属性方法（see JQuery own words ），如$("input[id='startTime']").val(startTime);
有关信息，输入表单在js文件{{ Form::time('startTime', null, [ 'id' => 'startTime', 'title' => 'Heure de début (obligatoire)']) }}
和定义时间输入的blade宏在视图中声明如下
{{ Form::macro('time', function() { return '<input type="time">'; }) }}
我尝试更改刀片中的id，但它没有改变任何东西，我也尝试使用Laravel Form中的输入façade：input（'time'，'startTime，...）而不做任何更改。
我在JQuery / Laravel / FullCalendar方面的专业知识非常薄，我觉得这些时间输入无法以与其他输入相同的方式选择，这看起来很奇怪。
生成的HTML代码为：
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.print.css" media="print">
<!--
JQuery theme for the calendar
-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"
></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"
></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.1/lang/fr.js"></script>
<!--
To show the event description in a bubble
-->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">
<script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<style>
/* ... */
</style>
</head>
<body>
<div id='calendar'></div>
<!-- Hidden div that serves as a placeholder for the jQuery dialog that shows event details
-->
<div id="eventContent" title="Éditer un RDV" style="display:none;">
Début: <span id="startTime"></span><br>
Fin: <span id="endTime"></span><br><br>
<p id="eventInfo"></p>
<p><strong><a id="eventLink" href="" target="_blank">Read More</a></strong></p>
</div>
<!-- Hidden div that serves as a placeholder for the jQuery dialog that creates new event
-->
<div id="newEventContent" title="Nouveau RDV" style="display:none;">
<form method="POST" action="http://localhost:8000/23/agenda/storeRDV" accept-charset="UTF-8" class="form-inline" id="newEventForm"><input name="_token" type="hidden" value="8MmMRBAt1ucjQfMk4Az0W5EBXMZRGlQrSVRmwoXF">
<table style="width:100%">
<tr>
<td>Titre*: </td>
<td><input id="pTitle" title="Titre (obligatoire)" name="pTitle" type="text" value=""></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Début*: </td>
<td><input id="startDate" title="Date de début (obligatoire)" name="startDate" type="date" value="2016-09-01"></td>
<td>à*: </td>
<td><input id="startTime" title="Heure de début(obligatoire)" name="startTime" type="time"></td>
</tr>
<tr>
<td>journée entière: </td>
<td><input checked="checked" name="allDay" type="checkbox" value="false"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Fin*: </td>
<td><input id="endDate" title="Date de fin (obligatoire)" name="endDate" type="date" value="2016-09-01"></td>
<td>à*: </td>
<td><input id="endTime" title="Heure de fin (obligatoire)" name="endTime" type="time"></td>
</tr>
<tr>
</tr>
<tr>
<td>Email: </td>
<td><input id="pEmail" title="Email" name="pEmail" type="email" value=""></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Tél: </td>
<td><input id="pTel" title="Numéro de téléphone" name="pTel" type="number" value=""></td>
<td></td>
<td></td>
</tr>
</table>
<button id="saveRDVButton" type="button">Sauvegarder le RDV</button>
</form>
</div>
<script type="text/javascript" src="http://localhost:8000/js/scripts.js"></script>
</body>
</html>
这是js代码：
$(document).ready(function() {
// page is now ready, initialize the calendar...
$("#calendar").fullCalendar({
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
theme: true,
editable: true,
selectable: true,
lang: "fr",
events: [
{
title: "All Day Event",
start: "2016-08-01",
description: "Hello world!"
}
],
// Triggered when the user clicks on an event
eventClick: function(calEvent, jsEvent, view) {
// Clears the current selection
$(this).fullCalendar("unselect");
}, // fin eventClick
// Fired after a selection is made
select: function(start, end, allDay) {
var startDate = moment(start).format("YYYY-MM-DD");
var startTime = moment(start).format("HH:mm");
var endDate = moment(end).format("YYYY-MM-DD");
var endTime = moment(end).format("HH:mm");
// Populate the dialog to show
$("#startDate").val(startDate);
// For the time fields why is it required to access via attribute to get the input time value ?
$("input[id='startTime']").val(startTime);
$("#endDate").val(endDate);
$("input[id='endTime']").val(endTime);
// Show the dialog
$("#newEventContent").dialog({
modal: true,
width:500});
// New event is created
$("#saveRDVButton").on("click", function(e) {
e.preventDefault(); // We prevent the browser to submit the form (default action)
saveEvent();
});
$(this).fullCalendar("unselect");
} // fin select
}); // fin full calendar init
// Function saveEvent to be completed
function saveEvent(){
// Let"s get the value from the form
var startDate = moment($("#startDate").val(), "YYYY-MM-DD").format("YYYY-MM-DD");
var startTime = moment($("input[id='startTime']").val(), "HH:mm").format("HH:mm");
var endDate = moment($("#endDate").val(), "YYYY-MM-DD").format("YYYY-MM-DD");
var endTime = moment($("input[id='endTime']").val(), "HH:mm").format("HH:mm");
// DO SOME TREATMENT (TBD)
} // end saveEvent
}); // fin document Ready
可能有人告诉我，这是否是预期的行为，对于时间输入，必须按属性选择元素及其背后的原因？
谢谢，