使用控制器中的结构初始化 TempusDominus datetimepicker

Question

我有一个 tempusdominus datetimepicker 和一个链接的选择器。我从控制器中获得一个由 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);

                  }

                }

此 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 非常无用，所以我确信我做错了什么......

Answer 1

所以我猜想，我有各种语法错误：$(function() {&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url : rutaBase + '/huecos.json',&nbsp; &nbsp; &nbsp; &nbsp; success : function(huecos) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var enabledDates = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for ( var key in huecos) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (huecos.hasOwnProperty(key)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabledDates.push(key);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#fechaCita').datetimepicker({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format : 'DD/MM/YYYY', // Solo se mostrará la fecha&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enabledDates : enabledDates,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icons : {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date : "fa fa-calendar",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; up : "fa fa-caret-up",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; down : "fa fa-caret-down",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; previous : "fa fa-caret-left",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; next : "fa fa-caret-right",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; today : "fa fa-today",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clear : "fa fa-clear",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; close : "fa fa-close"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#fechaCita").on(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "change.datetimepicker",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#selectHoraCita').empty();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#selectHoraCita').append($("<option></option>").attr("value","").text("--"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var horas = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var fecha = moment(e.date).format('YYYY-MM-DD');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horas.push(huecos[fecha]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; horas&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .forEach(function(listItem) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; listItem.forEach(function(opcion) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#selectHoraCita').append(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("<option></option>").attr(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "value", opcion).text(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opcion));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error : function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Error');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});