web-dev-qa-db-fra.com

Mettez en surbrillance certaines dates sur bootstrap-datepicker

J'utilise bootstrap-datepicker pour vérifier les jours où mon site Web a généré des ventes et je souhaite afficher ou mettre en surbrillance les dates où il y a eu au moins une vente. Je peux transmettre les dates sur JSON, puis les transformer en tableau JavaScript, mais je ne sais pas comment faire en sorte que l'indicateur de date récupère les dates et les surligne.

Y at-il un moyen avec le bootstrap-datepicker pour y parvenir?

javascriptbootstrap-datepicker
12
Leandro Poblet

voici un autre exemple pour mettre en évidence une plage de dates:

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
    }
  }
});
4
Matias

Il existe un moyen simple de définir plusieurs dates dans le calendrier bootstrap. Il existe une propriété multidimensionnelle qui peut être utilisée pour la sélection. trouvez le code de travail ci-dessous.

     $('.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)])

Un seul problème là-bas les faits saillants sont supprimés sur clic. et cela prend mois comme un moins. si vous voulez les dates d'août, vous devez utiliser 7 et non 8.

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

Peut faire l'affaire, bien que je ne sois pas sûr.

1
sabithpocker

Ma solution à ce problème en utilisant les liaisons Knockout et la propriété 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">

0
Damir Beylkhanov