it-swarm.com.ru

Всплывающее окно начальной загрузки Bootstrap не показывает выделенную текущую дату

Я использую 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, а также курсор мыши не является указателем.

Пожалуйста, помогите мне в этом вопросе

11
Adeel Asghar

Если вы используете это: https://github.com/eternicode/bootstrap-datepicker вы должны указать параметры при запуске календаря, такие как

   $('#sandbox-container input').datepicker({ 
               todayHighlight: true
   });
16
Gokhan
$('#datepicker').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true
});

Вот JSFiddle

3
RaviRokkam

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>
1
Matheus Santana

Просто чтобы добавить в список возможных решений, так как я испытывал ту же проблему. Класс 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>
0
Damon

Другой вариант - добавить этот атрибут в ваш элемент ввода datepicker:

today-highlight="true"

0
e-shfiyut