2015-06-12 114 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 
    }); 

在此先感谢

回答

相关问题