Use "beforeShowDay" with Bootstrap-datepicker

Question

I use Bootstrap 3.

Into a Bootstrap-datepicker, I have to enable dates only when there is some news get from my CMS TYPO3 v7 for this dates.

I success to get the dates into a data attribute from a TYPO3 viewhelper :

<input id="agenda-date-selector-datepicker-footer" class="agenda-date-selector-datepicker" value="{f:format.date(date:\'{weekDate}\',format:\'d-m-Y\')}" data-dates='{enableDates -> ul:Datepicker()}'>

(Don't take care of "values" it's not important here).

Into my JS I enter into my "true" return. (alert("true"); is display 10 time but I have 13 dates... strange... And no dates are disabled into datepicker.

I adapt this working model to make the code http://jsfiddle.net/vCJ2u/198/ but this model use jQuery UI.

Here my code :

$(function(){
	
	if($('.section-agenda-date-selector').length){
		availableDates = $('#agenda-date-selector-datepicker-footer').data('dates');
		alert(availableDates);
		$("#agenda-date-selector-datepicker-footer").datepicker({
			maxViewMode: 2,
			language: "fr",
			autoclose: true,
			todayHighlight: true,
			//startDate: '+1d',
			//weekStart: 1,
			format: 'yyyy-mm-dd',
			beforeShowDay: function(dt){
				console.log([available(dt), "" ]);
				return [available(dt), "" ];
			}
		});
	
		initAgendaListe();
	}

	
});

function available(date) {
	dmy = ( '0' + date.getDate() ).slice( -2 ) + "-" + ( '0' + (date.getMonth()+1) ).slice( -2 ) + "-" + date.getFullYear();
	
	if ($.inArray(dmy.toString(), availableDates) != -1){
// 		alert("true");
		return {
			enabled : true
		};
	} else {
		return {
			enabled : false
		};
	}

}

function initAgendaListe(){			
	// au click sur un élément du datepicker
	$('.agenda-date-selector-datepicker').on('change', function(){
		window.location.href = '/index.php?id=19&eventsbyweek='+$(this).val();
	});
};

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<div class="section section-grey section-agenda-date-selector">
...
</div>

<div class="agenda-datepicker datepicker-wrapper">
		<div class="input-datepicker-hidden">
			<input id="agenda-date-selector-datepicker-footer" class="agenda-date-selector-datepicker" value="" data-dates='["15-06-2017","20-06-2017","29-06-2017","29-08-2017","11-09-2017","15-09-2017","17-09-2017","18-09-2017","27-09-2017","28-09-2017","29-09-2017","30-09-2017","31-10-2017"]'>
		</div>
		<label class="btn btn-default" for="agenda-date-selector-datepicker-footer">
		<i class="icon icon-left icon-agenda"></i>
		Choisir une date
		</label>
		
</div>

An idea please ? Any help is welcome ! :) Thanks in advance !

Solution 1

Hope this helps!

use bootstrap beforeShowDay option to enable dates.

$(function() {
var datesEnabled = ['2017-9-10', '2017-9-15', '2017-9-25'];
$('#datepicker').datepicker({
format: 'yyyy-mm-dd',
beforeShowDay: function (date) {
  var allDates = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  if(datesEnabled.indexOf(allDates) != -1)
  return true;
  else
  return false;
   }
});
});

td.day.disabled {
opacity: 0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<input id="datepicker">

Solution 2

ok ! Now it's working ! Here my code : https://jsfiddle.net/scanx/per1syfr/2/

$(function(){
    
    if($('.section-agenda-date-selector').length){
//         var datesEnabled = $('#agenda-date-selector-datepicker-footer').data('dates');
        var datesEnabled = ['2017-09-21','2017-09-15','2017-09-25'];
        alert(datesEnabled);

        $("#agenda-date-selector-datepicker-footer").datepicker({
            maxViewMode: 2,
            language: "fr",
            autoclose: true,
            todayHighlight: true,
            weekStart: 1,
            format: 'yyyy-mm-dd',
            beforeShowDay: function (date) {
                var allDates = date.getFullYear() + "-" + ( '0' + (date.getMonth()+1) ).slice( -2 ) + "-" + ( '0' + date.getDate() ).slice( -2 );
                if(datesEnabled.indexOf(allDates) != -1)
        {
            alert(allDates + " : dispo");
                    return true;
                }
        else
        {
            alert(allDates + " : pas dispo")
                    return false;
        }
            }

        });
    
        initAgendaListe();
    }    
});

Thanks to Amal who help me so much ! :)

Comments

[Kristof]

Thanks but I don't need to disabled but enabled some dates... So disabled all dates per default and enabled only the dates into my array. So the bootstrap-datepicker.readthedocs.io/en/latest/… method seem to exist for that... ?

[Kristof]

Thanks a lot Amal :) It's working with your updated exemple ! BUT : If I replace your array by my array returned by the data-attribute : var datesEnabled = $('#agenda-date-selector-datepicker-footer').data('dates'); it's not working :( Every dates are disabled... but alert(datesEnabled); display same output than your hard coding array... This can be a format problem ?!

[Kristof]

Thanks a lot Amal :) It's working with your updated exemple ! BUT : If I replace your array by my array returned by the data-attribute : var datesEnabled = $('#agenda-date-selector-datepicker-footer').data('dates'); it's not working :( Every dates are disabled... but alert(datesEnabled); display same output than your hard coding array... Maybe the problem is because of data attribute... my array is not an array but a string comma separated... alert(datesEnabled); display 2017-09-15,2017-09-17,2017-09-18not ['2017-09-15','2017-09-17','2017-09-18'] ... ?

[Kristof]

With Firebug, the value of the date attribute is strange : data-dates="[" 2017-06-15","2017-06-20","2017-06-29","2017-08-29","2017-09-‌​11","2017-09-15","20‌​17-09-17","2017-09-1‌​8","2017-09-27","201‌​7-09-28","2017-09-29‌​","2017-09-30","2017‌​-10-31"]"="" I try to modify my php return with the "JSON_HEX_QUOT" constant but without any success... return json_encode($enableDates, JSON_HEX_QUOT); Any idea ?

[Kristof]

Now I use str_replace into my php to return the good value into the data-attribute : $enableDates = json_encode($enableDates); return str_replace("\"", "'", $enableDates); Now the value of "data-dates" into Firebug is good : <input data-dates="['2017-06-15','2017-06-20','2017-06-29','2017-08‌​-29','2017-09-11','2‌​017-09-15','2017-09-‌​17','2017-09-18','20‌​17-09-27','2017-09-2‌​8','2017-09-29','201‌​7-09-30','2017-10-31‌​']"> The alert output is identical, with "[]" ... but still not working... I think the format return by my php is not good because the "alert()" don't have to display the [ ]...

[Kristof]

Now I try into php to return a string : $enableDates = implode("','", $enableDates); return "[".$enableDates."]"; but same result than above...

[Kristof]

O... I think the problem come from that into your example array month are with one number : "15/9/2017" but my returned dates are make with 2 numbers for month : "15/09/2017". So I never enter the "true"...

[Kristof]

So I try like this : beforeShowDay: function (date) { var allDates = date.getFullYear() + '-' + (0+(date.getMonth() + 1)) + '-' + date.getDate(); ... Without any success...

[Ritesh Khatri]

Thank you so much bro. you saved me, realy great solution.