在Bootstrap-datepicker中使用“beforeShowDay”

Question

我使用Bootstrap 3。

進入Bootstrap-datepicker，我必須在這個日期從我的CMS TYPO3 v7獲得一些新聞時啟用日期。

我成功將日期轉換為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()}'>

（不要照顧“價值”，這在這里並不重要）。

進入我的JS我進入我的“真實”回歸。 (alert("true");顯示10次，但我有13個日期...奇怪...並且沒有日期被禁用到datepicker。

我調整這個工作模型來制作代碼http://jsfiddle.net/vCJ2u/198/，但這個模型使用jQuery UI。

這是我的代碼：

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

請問一個想法？ 歡迎任何幫助！ ：） 提前致謝 ！

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

Answer 2

好 ！ 現在它正在運作！ 在這里我的代碼： 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(); } }); 

感謝Amal ，他非常幫助我！ :)