引导日期选择器弹出窗口未显示突出显示的当前日期答案

【问题标题】：Bootstrap datepicker pop-up not shown the highlighted current date引导日期选择器弹出窗口未显示突出显示的当前日期
【发布时间】：2014-03-06 20:34:23
【问题描述】：

我通过 Bootstrap-datepicker API 使用 Bootstrap 日期选择器。当我单击按钮时，会显示日历/日期选择器弹出窗口，但它没有将当前日期标记为蓝色字体，如 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 示例中所示，并且鼠标光标不是指针。

请帮我解决这个问题

【问题讨论】：

确保为字形添加了字体。如果包含字体，则“glyphicon”类可以工作

标签： javascript jquery css twitter-bootstrap datepicker

【解决方案1】：

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

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

【讨论】：

你能做一个jsfiddle吗？会有帮助的
这没有回答原始问题。该设置标记了查看时的日期，而不是当前选择的日期。

【解决方案2】：

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

这里是JSFiddle

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

today-highlight="true"

【讨论】：

【解决方案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
  })

【讨论】：