Question

我正在使用http://eonasdan.github.io/bootstrap-datetimepicker中的Eonasdan引导日期/时间选择器。我有评估，根据从AJAX请求获取的JSON文件，在日期以下的表格单元格中添加每天的旅行价格。问题是当我使用左右箭头导航时，每个月都再次在DOM中加载数据，实际上并没有加载几个月的全部数据，而是仅加载了基于导航选择的月份中的数据（向左箭头）。基于此，我不知道如何填充数据，可以修改原始的Eonasdan脚本，还是应该在文件的外部进行修改。有人可以帮忙吗？

我的日期时间选择器在Jquery中如下所示：

       const date = new Date();
       date.setDate(date.getDate());
            $('#datepicker').datetimepicker({
                minDate : date,
                maxDate: '2019-12-31',
                format: 'DD.MM.YYYY',
                keepOpen: true,
                inline: true,
                debug: true,
                icons:{
                    date: 'fa fa-calendar',
                    up: 'fa fa-chevron-up',
                    down: 'fa fa-chevron-down',
                    previous: 'fa fa-angle-left',
                    next: 'fa fa-angle-right',
                    today: 'fa fa-screenshot',
                    clear: 'fa fa-trash',
                    close: 'fa fa-remove'
                }
     });

我的html看起来像这样：

    <input  id="datepicker" type="text" name="date" class="form-control input-md">
    <div class="input-group-addon dt-cal">
        <span class="fa fa-calendar"></span>
    </div>
</div>

并且json文件的格式如下，其中价格为关键minimal_price：

{"tour_id":9,"date_of_departure":"20.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"21.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"22.06.2019","minimal_price":"39.00","status_id":1,"status":"Active","discount":"YES"},
{"tour_id":9,"date_of_departure":"23.06.2019","minimal_price":"0","status_id":0,"status":"Inactive","discount":"NO"},
{"tour_id":9,"date_of_departure":"24.06.2019","minimal_price":"39.00","status_id":1,"status":"Active","discount":"YES"}]

Answer 1

您可以使用记录在案的回调将自定义data- *属性添加到datepicker并显示它们。 refer this

$(function() {
  $("#datepicker").datepicker({
    beforeShow: addCustomInformation,
    //---^----------- if closed by default (when you're using <input>)
    beforeShowDay: function(date) {
      return [true, date.getDay() === 5 || date.getDay() === 6 ? "weekend" : "weekday"];
    },
    onChangeMonthYear: addCustomInformation,
    onSelect: addCustomInformation
  });
  addCustomInformation(); // if open by default (when you're using <div>)
});

function addCustomInformation() {
  setTimeout(function() {
    $(".ui-datepicker-calendar td").filter(function() {
      var date = $(this).text();
      return /\d/.test(date);
    }).find("a").attr('data-custom', 110); // Add custom data here
  }, 0)
}

.ui-datepicker .weekend .ui-state-default {
  background: #FEA;
}
.ui-datepicker-calendar td a[data-custom] {
  position: relative;
  padding-bottom: 10px;
}
.ui-datepicker-calendar td a[data-custom]::after {
  /*STYLE THE CUSTOME DATA HERE*/
  content: '$' attr(data-custom);
  display: block;
  font-size: small;
}

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id="datepicker">

在bootstrap-datetimepicker中每天为每个单元格添加价格

1 个答案: