2015-06-12 60 views
1

我使用兩個Bootstrap日期選擇器。所需的功能是兩個日曆顯示兩個選定的日期/日期。問題是,如果我在代碼中初始化它們 - 只有第一個/ upper(在js中)datepicker init成功。如果我更改代碼的順序 - start-datepicker在結束datepicker後初始化,那麼只有end-datepicker獲取beforeShowDay的函數。只有第一個運行選項。Second Bootstrap Datepicker不會得到選項(beforeShowDay)

我很困惑,並想知道如果它在datepicker庫中的一些錯誤什麼的。

僅供參考 - 我已經檢查了可能破壞代碼的所有內容 - 在調試時 - 它也初始化第二個日期對象 - 只是忽略了這些選項。此外日期選擇器功能齊全,只是選項完全被忽略。

<div id="start-datepicker" class="input-group date "> 
    <input class="form-control" placeholder="mm/dd/yy" 
      data-date-autoclose="true" data-date-format="mm/dd/yyyy" 
      maxlength="10" type="text" name="arrive" id="arrive" 
      value="<? echo $_SESSION[arrive] ?>"/> 
    <span class="input-group-addon"> 
      <i class="fa fa-calendar"></i> 
    </span> 
</div> 

<div id="end-datepicker" class="input-group date "> 
    <input class="form-control" placeholder="mm/dd/yy" 
      data-date-autoclose="true" data-date-format="mm/dd/yyyy" 
      maxlength="10" type="text" name="depart" id="depart" 
      value="<? echo $_SESSION[depart] ?>"/> 
    <span class="input-group-addon add-on"> 
      <i class="fa fa-calendar"></i> 
    </span> 
</div> 

而且JQ部分

var today = new Date(); 

    $("#start-datepicker").datepicker({ 
     beforeShowDay: function (date) 
     { 
      if (date.toLocaleDateString() == today.toLocaleDateString()) { 
       return { 
        classes: "fs-bold-day" 
       }; 
      } 
      var end = $('#end-datepicker').datepicker('getDate'); 
      if (date.toDateString() == end.toDateString()) { 
       return { 
        classes: "fs-red-day", tooltip: "Departure" 
       }; 
      } 
     }, 
     todayHighlight: true 
    }); 

    $("#end-datepicker").datepicker({ 
     beforeShowDay: function (date) 
     { 
      if (date.toLocaleDateString() == today.toLocaleDateString()) { 
       return { 
        classes: "fs-bold-day" 
       }; 
      } 
      var start = $('#start-datepicker').datepicker('getDate'); 
      if (date.toDateString() == start.toDateString()) { 
       return { 
        classes: "fs-red-day", tooltip: "Arrival" 
       }; 
      } 
     }, 
     todayHighlight: true 
    }); 

在此先感謝

回答

相關問題