Come evidenziare date specifiche nel datepicker di bootstrap?

Question

Sto usando bootstrap datepicker. Devo evidenziare alcune date casuali.

Per esempio:

Ho bisogno di evidenziare le date come 1,3,8,20,21,16,26,30. Potresti dirmi come evidenziare quelle date casuali in bootstrap datepicker?

Answer 1

Ho trovato una soluzione.

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

Solo un problema, i punti salienti vengono rimossi al clic. e ci vuole un mese in meno. se vuoi le date di agosto, allora devi usare 7 non 8.

Answer 2

Come suggerito da anfetamine, Highlight certain dates on bootstrap-datepicker fornisce la maggior parte di ciò che è necessario per risolvere questo problema. La risposta a questa domanda può essere adattato al seguente

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

Quanto sopra si applica la classe di stile evidenziazione dei giorni indicati in ogni mese, con ulteriori controlli si potrebbe limitare a mesi specifici. Alcuni vecchi browser potrebbero non supportare indexOf, nel qual caso puoi utilizzare una libreria JS o espandere if.

Answer 3

questo è come sto evidenziando tutti i giorni eccetto i giorni nella matrice "user_busy_days".

Bootstrap data-picker ha prop di BeforeShowDay, che viene eseguito per ogni giorno del mese [42 volte max], quindi ho solo controllato se il giorno che viene eseguito il rendering è nel mio array e se è presente nell'array i evidenziarlo con un colore grigio altrimenti lo metto in evidenza con il colore verde.

Spero che faccia il trucco.

 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.'}; 
       } 

      } 
     });