Добавление цены в каждой ячейке за день в bootstrap-datetimepicker - PullRequest
Новая
       28

Добавление цены в каждой ячейке за день в bootstrap-datetimepicker

0 голосов
/ 21 июня 2019

Я использую загрузчик даты / времени Eonasdan из http://eonasdan.github.io/bootstrap-datetimepicker. У меня есть оценка для добавления цен на поездки для каждого дня в ячейки таблицы ниже даты на основе файла JSON, полученного из запроса AJAX.Проблема в том, что данные загружаются снова в 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 следующий, гдецена является ключевой. минимальная цена: 

{"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"}]

1 Ответ

0 голосов
/ 21 июня 2019

вы можете использовать документированные обратные вызовы для добавления пользовательских атрибутов data- * в DatePicker и их отображения. см. Это 

$(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">
...