Question

我使用Bootstrap-datepicker API使用Bootstrap datepicker。当我单击按钮时，会显示日历/日期选择器弹出窗口，但它没有将当前日期标记为蓝色字体，如API示例中所示。

我使用以下代码：

   <body>
   <div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
        <input class="form-control" size="56" type="text" value="" readonly>
        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
   </div>

    <script src="js/bootstrap-datepicker.js"></script>

    <script type="text/javascript">
        $('#datepicker').datepicker();
    </script>
    </body>

显示日历/日期选择器弹出窗口，但当前日期未突出显示为蓝色，如API示例中所示，并且鼠标光标也不是指针。

请帮我解决这个问题

Answer 1

如果您使用此项：https://github.com/eternicode/bootstrap-datepicker，则必须在启动日历时提供选项，例如

   $('#sandbox-container input').datepicker({ 
               todayHighlight: true
   });

Answer 2

$('#datepicker').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true
});

以下是JSFiddle

Answer 3

Bootstrap Datepicker依赖于自己的CSS来设置日历小部件的样式。

为了快速导入依赖关系，您可以从cdnjs中选择一个版本（确保选择.css扩展名）并导入HTML，如下所示：

<head>
  <meta charset="UTF-8">
  <!-- ... -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>

Answer 4

只是为了添加可能的解决方案列表，因为我遇到了同样的问题。 today课程未使用以下方式分配到当天：

$('.datepicker').datepicker({
    'format': 'mm/dd/yyyy',
    'todayHighlight': true
});

示例中的html只有date类。

<div class="input-group date">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>

就我而言，我错过了datepicker课程。添加到元素，现在一切正常。

需要：

<div class="input-group date datepicker">
    <input type="text" class="form-control" value="12-02-2012">
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
       </div>
</div>

Answer 5

另一个选择是将此属性添加到datepicker输入元素：

today-highlight="true"

Answer 6

如果您使用的是响应式表单，则还可以像这样在formGroup初始化中将今天的日期设置为值

  myform = new FormGroup({
    name: new FormControl('', [Validators.required]),
    event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
  })

Bootstrap datepicker弹出窗口未显示突出显示的当前日期

6 个答案: