Wie bestimmte Daten in Bootstrap-Datumsauswahl hervorheben?

Question

Ich benutze bootstrap datepicker.Ich muss einige zufällige Daten hervorheben.

Beispiel:

Ich brauche die Daten wie 1,3,8,20,21,16,26,30 zu markieren. Könntest du mir bitte sagen, wie man diese zufälligen Daten im Bootstrap-Datapicker hervorhebt?

Answer 1

Ich fand eine Lösung.

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

Nur ein Problem dort sind die Highlights beim Klick entfernt. und es dauert Monat als eins weniger. Wenn Sie wollen August Daten dann müssen Sie 7 nicht 8 verwenden.

Answer 2

Wie von Amphetamachine Highlight certain dates on bootstrap-datepicker vorgeschlagen bietet die meisten von was ist erforderlich, um dies zu lösen. Die Antwort auf diese Frage kann auf die folgenden

$('.inline_date').datepicker({ 
    multidate: true, 
    todayHighlight: true, 
    minDate: 0, 
    beforeShowDay: function(date) { 
     var hilightedDays = [1,3,8,20,21,16,26,30]; 
     if (~hilightedDays.indexOf(date.getDate())) { 
      return {classes: 'highlight', tooltip: 'Title'}; 
     } 
    } 
}); 

Das oben angepasst wird, um die Hervorhebungs Klasse der genannten Tage in jedem Monat, mit weiteren Prüfungen gelten Sie es auf bestimmte Monate begrenzen könnten. Einige alte Browser unterstützen möglicherweise indexOf nicht. In diesem Fall können Sie entweder eine JS-Bibliothek verwenden oder das if erweitern.

Answer 3

das ist, wie ich alle Tage außer den Tagen in "user_busy_days" -Array hervorhebe.

Bootstrap Datum-Picker hat beforeShowDay Stütze, die für jeden Tag des Monats ausgeführt wird [42 mal max], so überprüfe ich nur, ob der Tag, der gerendert wird in meinem Array ist, und wenn es in Array i vorhanden ist Markieren Sie es mit einer grauen Farbe, sonst markiere ich es nur mit grüner Farbe.

Ich hoffe, es wird den Trick tun.

 var today    = new Date(); 
     var today_formatted  = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+('0'+today.getDate()).slice(-2); 
     var user_busy_days  = ['2017-12-09','2017-12-16','2017-12-19']; 



     $('#datetimepicker12').datepicker({ 
      inline: true, 
      sideBySide: true, 
      beforeShowDay: function (date) { 

       calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2); 

       var search_index = $.inArray(calender_date, user_busy_days); 

       if (search_index > -1) { 
        return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'}; 
       }else{ 
        return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'}; 
       } 

      } 
     });