在Bootstrap-datepicker中使用“ beforeShowDay”

Question

我使用Bootstrap 3。

进入Bootstrap-datepicker时，仅当从CMS TYPO3 v7获得有关此日期的一些新闻时，才必须启用日期。

我成功地将日期从TYPO3 viewhelper获取到data属性中：

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

（不要在意“值”，在这里并不重要）。

在我的JS中，输入“ true”返回值。 (alert("true");显示10次，但我有13个日期...很奇怪...而且日期选择器中没有禁用任何日期。

我改编了这个工作模型以使代码为http://jsfiddle.net/vCJ2u/198/，但是该模型使用jQuery UI。

这是我的代码：

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

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

请问一个主意吗？欢迎任何帮助！：） 提前致谢 ！

Answer 1

希望这可以帮助！

使用bootstrap beforeShowDay选项启用日期。

$(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">