- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 tempusdominus 日期时间选择器和一个链接选择器。我从 Controller 中获得一个由 Map> 组成的结构,其中的键是应在 datetimepicker 中启用的日期,每个日期都有一个小时列表,当用户选择日期时,我必须在链接选择中显示这些小时。
我的jsp中有这个:
<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]}结果。
但这不起作用,我得到一个带有日期和时间的日期时间选择器,但在控制台上什么也没得到......如果我取出ajax调用并只输入enabledDates:[“2019-09-12”,“2019-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');
}
});
});
关于javascript - 使用 Controller 中的结构初始化 TempusDominus datetimepicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57905094/
我正在尝试设置日期时间选择器 https://tempusdominus.github.io/bootstrap-3/并将其配置为内联使用。它初始化为: $('#datetimepicker5').d
我有一个 tempusdominus 日期时间选择器和一个链接选择器。我从 Controller 中获得一个由 Map> 组成的结构,其中的键是应在 datetimepicker 中启用的日期,每个日
我正在使用这个插件 https://tempusdominus.github.io/bootstrap-4/ 插入日期时间选择器。我会显示时间选择器,显示 24 小时内的时间(即不显示 02:00 P
我是一名优秀的程序员,十分优秀!