Выделите определенные даты в bootstrap-datepicker

Я использую bootstrap-datepicker, чтобы проверить дни, когда на моем веб-сайте были продажи, и я хочу отобразить или выделить даты, когда была хотя бы одна продажа. Я могу передать даты в JSON, а затем превратить их в массив Javascript, но я не знаю, как заставить средство выбора даты извлекать даты и выделять их.

Есть ли способ добиться этого с помощью bootstrap-datepicker?


javascript bootstrap-datepicker
person Leandro Poblet    schedule 19.03.2014    source источник

Ответы (5)


arrow_upward
5
arrow_downward

вот еще один пример, чтобы выделить диапазон дат:

var inRange=false;
$('#elementPicker').datepicker({
  beforeShowDay: function(date) {
    dateFormat = date.getUTCFullYear() + '-' + date.getUTCMonth() + '-' + date.getUTCDate();

    if (dateFormat == '2014-01-01') {
      inRange = true; //to highlight a range of dates
      return {classes: 'highlight', tooltip: 'Title'};
    }
    if (dateFormat == '2014-01-05') {
      if (inRange) inRange = false;  //to stop the highlight of dates ranges
      return {classes: 'highlight', tooltip: 'Title'};
    }
    if (inRange) {
      return {classes: 'highlight-range'}; //create a custom class in css with back color you want
    }
  }
});
person Matias    schedule 25.09.2014

arrow_upward
1
arrow_downward 

$('#xxx').datepicker()
  .on('onRender', function(ev){
    if (ev.date.valueOf() == your date){
      return 'highlight';
    }
  });

Может получится, хотя я не уверен.

person sabithpocker    schedule 19.03.2014
comment
Да, это поможет. Однако я думаю, что автору нужно выделить массив дней, а не один день. - person Hieu Le; 19.03.2014
comment
такого метода нет;) bootstrap-datepicker.readthedocs.org/en /latest/events.html#show - person dexxtr; 10.06.2015
comment
@dexxtr Используйте хук beforeShowDay. bootstrap-datepicker.readthedocs.org/en/latest/ - person sabithpocker; 11.06.2015
comment
Я предпочитаю использовать onRender, но это не работает. Я просто проверяю это, и событие никогда не вызывается. Вместо этого используйте вариант beforeShowDay. - person Sam; 23.09.2019

arrow_upward
1
arrow_downward

Существует простой способ установить несколько дат в календаре начальной загрузки. Существует свойство multidate, которое можно использовать для выбора. найти рабочий код ниже.

     $('.inline_date').datepicker({
        multidate: true,
        todayHighlight: true,
        minDate: 0,
    });

 $('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])

Единственная проблема — блики удаляются по клику. и это займет месяц как один меньше. если вам нужны августовские даты, вам нужно использовать 7, а не 8.

person urfusion    schedule 07.08.2015

arrow_upward
0
arrow_downward

Мое решение этой проблемы с использованием привязок Knockout и свойства datepicker «beforeShowDay»:

function MainFilters() {
    var self = this;
    self.notAppliedDates = ko.observableArray([]);
    self.customDates = ko.observableArray(["14.06.2015", "20.06.2015", "26.06.2015", "10.06.2015", "29.06.2015"]);
}

ko.bindingHandlers.multiDatepicker = {
    init: function (element, valueAccessor, allBindings) {
        var customDates = allBindings.get("customDates");

        valueAccessor()();
        $(element).datepicker(
            {
                multidate: true,
                language: "ru",
                orientation: "top",
                beforeShowDay: function (date) {
                    var d = ConvertDateTostring(date, "dd.mm.yyyy");

                    if ($.inArray(d, customDates()) != -1) {
                        return {
                            classes: 'activeClass'
                        };
                    }
                    return;
                }
            }
        )
       .bind(
			'changeDate',
			function (e) {
			    var res = e.dates;
			    var value = [];
			    res.sort(function (a, b) { return a - b });
			    for (var i in res) {
			        value.push(res[i].asString());
			    }

			    valueAccessor()(value);
			}
		);
    },
    update: function (element, valueAccessor, allBindings, bindingContext) {

    }
};

function ConvertDateTostring(date, format) {
    if (!date) {
        return "";
    }
    if (format) {
        return dateFormat(date, format);
    }
    return dateFormat(date, "dd.mm.yy");
}
 .activeClass{
    background: #32cd32; 
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" id="dates" data-bind="customDates: customDates, multiDatepicker: notAppliedDates, value: selectedDatesString">

person Damir Beylkhanov    schedule 05.06.2015

arrow_upward
0
arrow_downward

Используя события datetimepicker show, update и change, необходимо выделить дату.

Сообщение в блоге здесь объясняет, как это может быть достигнуто с помощью Bootstrap Datetimepicker.

$('#datetimepicker').on('dp.show', function(e){
  highlight()
})
$('#datetimepicker').on('dp.update', function(e){
 highlight()
})
$('#datetimepicker').on('dp.change', function(e){
    highlight()
})

function highlight(){
 var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
 var array = $("#datetimepicker").find(".day").toArray();
 for(var i=0;i -1) {
       array[i].style.color="#090";
       array[i].style.fontWeight = "bold";
    } 
 }
 }

Дополнительную информацию смотрите в блоге

Ссылка:

https://sourcecodezoneseven.blogspot.com/2019/04/here-is-code-function-hilight-var.html

person CodeDezk    schedule 18.05.2019