Preciso que o datapicker carregue datas específicas dinamicamente, que estão salvas no banco de dados, consegui fazer com que ele carregue manualmente, porém são diversas datas e podem variar conforme o usuário salvar no banco de dados.
Estou utilizando o seguinte código, que exibe as datas manualmente selecionas com uma cor específica:
<script>
var active_dates = ["2-9-2019","22-9-2019"];
$('.datepicker').datepicker({
autoclose: true,
format: "dd-mm-yyyy",
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();
var formattedDate = curr_date + "-" + curr_month + "-" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});
$(".datepicker").attr("autocomplete", "off");
</script>
CSS:
.activeClass{
color: #ecf0f1;
background: #2980b9;
}
Resultado:
Após algumas pesquisas e estudos vi que é possível passar dados de uma variável php para javascript. Exemplificando:
<?php
$color = "Red";
?>
No javascript:
var color = "<?php echo $color; ?>";
Estou tentando do seguinte modo, porém sem sucesso!:
<?php
$diasValidos = $this->db->get_where('school_days')->result_array();
?>
No Datapicker:
<script>
var active_dates = <?php $diasValidos ?>;
$('.datepicker').datepicker({
autoclose: true,
format: "dd-mm-yyyy",
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1;
var curr_year = d.getFullYear();
var formattedDate = curr_date + "-" + curr_month + "-" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'activeClass'
};
}
return;
}
});
$(".datepicker").attr("autocomplete", "off");
</script>
Print da tabela no banco de dados:
var active_dates = [<?php echo implode("','",$diasValidos) ?>];