Javascript 使用控制器中的结构初始化TempusDominus datetimepicker
我有一个tempusdominus datetimepicker和一个链接的select。我从控制器中得到一个结构,由一个Map>组成,其中的键是datetimepicker中应该启用的日期,每个日期都有一个小时列表,当用户选择日期时,我必须在链接选择中显示该列表 我的jsp中有以下内容:Javascript 使用控制器中的结构初始化TempusDominus datetimepicker,javascript,java,jquery,ajax,tempus-dominus-datetimepicker,Javascript,Java,Jquery,Ajax,Tempus Dominus Datetimepicker,我有一个tempusdominus datetimepicker和一个链接的select。我从控制器中得到一个结构,由一个Map>组成,其中的键是datetimepicker中应该启用的日期,每个日期都有一个小时列表,当用户选择日期时,我必须在链接选择中显示该列表 我的jsp中有以下内容: <div class="row"> <div class="col-sm-6 labels"> <div class="form-group">
<div class="row">
<div class="col-sm-6 labels">
<div class="form-group">
<label>Date</label>
<div class="input-group date" id="fechaCita" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#fechaCita"/>
<div class="input-group-append" data-target="#fechaCita" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 labels">
<div class="form-group">
<label>Time</label>
<div class="input-group date" id="horaInicio">
<form:select path="horario.horaInicio" id="selectHoraCita" class="form-control">
<form:option value="">--</form:option>
</form:select>
<input type="hidden" id="horaInicioSelected" />
</div>
</div>
</div>
然后在我的javascript文件中,我有以下内容:
$(function() {
$.ajax({
url: rutaBase + '/huecos.json',
success: { function(huecos) {
console.log('Huecos' + huecos);
var enabledDates = [];
for (var key in huecos) {
if (huecos.hasOwnProperty(key)) {
enabledDates.push(key);
}
}
$('#fechaCita').datetimepicker({
format : 'DD/MM/YYYY', // Solo se mostrará la fecha
enabledDates : enabledDates,
icons : {
date : "fa fa-calendar",
up : "fa fa-caret-up",
down : "fa fa-caret-down",
previous : "fa fa-caret-left",
next : "fa fa-caret-right",
today : "fa fa-today",
clear : "fa fa-clear",
close : "fa fa-close"
}
});
$("#fechaCita").on("change.datetimepicker", function (e) {
console.log('Onchange! ' + e.date);
$('#selectHoraCita').empty();
var horas = huecos[e.date];
horas.each(function(index, listItem) {
console.log('List item ' +listItem);
if (p.hasOwnProperty(e.date)) {
$('#horaCita').append($("<option></option>")).attr("value", listItem).text(listItem);
}
});
});
}
}
});
});
这个Ajax调用的结果是{2019-09-12=[12:00-13:00,14:30-15:00],2019-09-13=[10:00-11:00]}
但这不起作用,我有一个带有日期和时间的datetimepicker,但我在控制台上什么都没有。。。如果我执行ajax调用并只放置enabledDates:[2019-09-1212019-09-13]它会工作,但如果我尝试从ajax调用中获取它们,则不会工作
我对ajax/jquery/javascript很没用,所以我肯定我做错了什么…所以我猜,我有各种语法错误:
$(function() {
$.ajax({
url : rutaBase + '/huecos.json',
success : function(huecos) {
var enabledDates = [];
for ( var key in huecos) {
if (huecos.hasOwnProperty(key)) {
enabledDates.push(key);
}
}
$('#fechaCita').datetimepicker({
format : 'DD/MM/YYYY', // Solo se mostrará la fecha
enabledDates : enabledDates,
icons : {
date : "fa fa-calendar",
up : "fa fa-caret-up",
down : "fa fa-caret-down",
previous : "fa fa-caret-left",
next : "fa fa-caret-right",
today : "fa fa-today",
clear : "fa fa-clear",
close : "fa fa-close"
}
});
$("#fechaCita").on(
"change.datetimepicker",
function(e) {
$('#selectHoraCita').empty();
$('#selectHoraCita').append($("<option></option>").attr("value","").text("--"));
var horas = [];
var fecha = moment(e.date).format('YYYY-MM-DD');
horas.push(huecos[fecha]);
horas
.forEach(function(listItem) {
listItem.forEach(function(opcion) {
$('#selectHoraCita').append(
$("<option></option>").attr(
"value", opcion).text(
opcion));
});
});
});
},
error : function() {
console.log('Error');
}
});
});