无法自定义bootstrap-datepicker

Question

我正在尝试自定义日历，但似乎没有考虑到自定义，例如显示“今天”按钮或忽略过去的日期。 我尝试了以下方法：

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">

在上身

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>

然后以以下形式：

    <script>
        $('.datepicker').datepicker({
            startDate: 0,
            todayBtn: "linked"
        });
    </script>
    <div class="form-group">
        <div class="input-group date" data-provide="datepicker">
            <input type="text" class="form-control" placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
            <span class="input-group-addon">
                <i class="glyphicon glyphicon-th"></i>
            </span>
            <p class="help-block text-danger"></p>
        </div>
    </div>

但是，我仍然没有获得“今天”按钮。 我不确定原因是否是因为javascript代码不正确？ （未正确调用日历）或放错位置了？

Answer 1

基本上，您的带有todayBtn选项的jQuery调用并不是真正指向您的输入。 您看到的datepicker功能基于您的html。 我将脚本移到了元素之后（因此它在目标元素位于DOM中之后运行），并更改了jQuery调用以查找正确的元素。 另外，我相信startDate选项应该是一个日期，因此我将其从0更改为'3/16/2016' 。 原始html不变...

<div class="form-group">
  <div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control"
      placeholder="Date *" id="caldate" required data-validation-required-message="Please choose date.">
    <span class="input-group-addon">
      <i class="glyphicon glyphicon-th"></i>
    </span>
    <p class="help-block text-danger"></p>
  </div>
</div>

<script>
  $("div.input-group.date").datepicker({
    startDate: '3/1/2016',
    todayBtn: "linked"
  });
</script>