禁用当前月份bootstrap datepicker上的prev按钮

时间:2016-11-09 17:31:07

标签: javascript twitter-bootstrap-3 bootstrap-datepicker

我使用ux解决方案bootstrap datepicker构建了一个日历。 我正试图在当月恢复上一个按钮。

我尝试过使用beforeShowDay但没有任何快乐。

如果有人能指出我正确的方向,那将非常感激

我拥有的笔:http://codepen.io/anon/pen/Wobrjg

JS:

var active_dates = ["11/11/2016", "12/11/2016", "13/11/2016", "14/11/2016", "15/11/2016", "16/11/2016", "24/11/2016", "25/11/2016", "26/11/2016", "27/11/2016", "28/11/2016", "29/11/2016", "30/11/2016", "1/12/2016", "11/12/2016", "12/12/2016", "13/12/2016", "14/12/2016", "15/12/2016", "16/12/2016"];

$("#datepicker").datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
     todayHighlight: true,
     maxViewMode: 0,
     daysOfWeekDisabled: [0, 1, 2, 3, 4, 5, 6],
     beforeShowDay: function(date){
         var d = date;
         var curr_date = d.getDate();
         var curr_month = d.getMonth() + 1; //Months are zero based
         var curr_year = d.getFullYear();
         var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

           if ($.inArray(formattedDate, active_dates) != -1){
               return {
                  classes: 'booked'
               };
           }
          return;
      }
  });

1 个答案:

答案 0 :(得分:0)

您需要使用datepicker的startDate选项。

/* getting first date of current month */
var date = new Date();
var first_date = new Date(date.getFullYear(), date.getMonth(), 1);

/* using this first_date as startDate for the plugin */
$("#datepicker").datepicker({
     format: "dd/mm/yyyy",
     startDate: first_date,
     autoclose: true,
     todayHighlight: true,
     maxViewMode: 0,
 //beforeShowMonth: 0,
     daysOfWeekDisabled: [0, 1, 2, 3, 4, 5, 6],
     beforeShowDay: function(date){
         var d = date;
         var curr_date = d.getDate();
         var curr_month = d.getMonth() + 1; //Months are zero based
         var curr_year = d.getFullYear();
         var formattedDate = curr_date + "/" + curr_month + "/" + curr_year

           if ($.inArray(formattedDate, active_dates) != -1){
               return {
                  classes: 'booked'
               };
           }
          return;
      }
  });