引导式日期选择器弹出窗口未显示当前日期高亮

Question

引导式日期选择器弹出窗口未显示当前日期高亮

javascriptjquerycsstwitter-bootstrapdatepicker

18

我正在使用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示例中那样以蓝色突出显示，并且鼠标光标也不是指针。

请帮我解决这个问题。

- Adeel Asghar

请确保添加了glyphicons字体。如果包含字体，则“glyphicon”类可用。 - Garry

6个回答

6

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

这里是JSFiddle。

- RaviRokkam

1

Bootstrap日期选择器依赖于其自身的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>

- Matheus Santana

0

另一个选项是将此属性添加到您的datepicker输入元素中：

today-highlight="true"

- e-shfiyut

0

只是想添加一些可能的解决方案，因为我也遇到了同样的问题。使用以下代码时，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>

- Damon

0

如果您正在使用响应式表单，那么您可以像这样在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
  })

- Oliver

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gokhan Demirhan · Accepted Answer

如果您正在使用这个：https://github.com/eternicode/bootstrap-datepicker，您必须在初始化日历时提供选项，例如：

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