bootstrap datepicker突出显示两个日期

时间:2014-06-16 08:05:24

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

在引导日期选择器中,我想突出显示两个日期。我可以突出显示两个日期,但无法按颜色区分两个日期,或者某些类适用两个日期的相同蓝色可以任何一个帮助

  <script type="text/javascript" src="Scripts/bootstrap.js"></script>
<script type="text/javascript" src ="Scripts/bootstrap-datepicker.js"></script>
 <script type="text/javascript" >
       $(document).ready(function () {
       var DD = "29";
       var MM = "04";
       var YY = "2014";
       var CaseDD = "25";
       var CaseMM = "04";
       var CaseYY = "2014";

  $('#calendar').datepicker({
               format: "dd/mm/yyyy",
               multidate: true,
               multidateSeparator: "/",
               autoclose: true,
               showOtherMonths: true,
               dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
               beforeShowDay: highlightDays()
           });
           $('#calendar').datepicker('setDate', new Date(YY, MM, DD), new Date(CaseYY, CaseMM, CaseDD));
       });

    

        <div class="container">
       <div id="calendar" style="margin-left:-10px;border:1px solid  #E1E1E1;width:203px;"> </div>
   </div>
  </form>
</body>

1 个答案:

答案 0 :(得分:0)

我意识到这有点晚了,但我在尝试解决同样的问题时发现了这个问题。

我发现这样做的最简单方法是在弹出的每一天应用一个单独的类,然后使用该类突出我想要的日子。 &#34; beforeShowDay&#34; datepicker的选项允许您返回一个字符串,该字符串作为类添加到出现的每个date()元素。 getMonth()是0索引的,所以我们加1。

如果我不懒,那么使用允许此类功能的方法扩展datepicker可能更有意义。

beforeShowDay: function(date) {
   fulldate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
   console.log(fulldate);
   return fulldate;
} 
//you can now reference individual date td date segments as $("2018-5-30")
//you can also modify the code above to only apply the class to the dates you want, or change what class you apply