bootstrap datepicker - изменение цвета фона с желтого на синий

#bootstrap-4 #datepicker

Вопрос:

для bootstrap datepicker, когда для свойства «todayHighlight» установлено значение true, он открывается с текущим днем, выделенным желтым цветом. можем ли мы изменить этот цвет на синий или какой-нибудь другой?

Ответ №1:

Если вы посмотрите демонстрационную версию. Вы увидите, что стили определены в https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css как показано ниже:

 .datepicker table tr td.today {
    color: #000;
    background-color: #ffdb99;
    border-color: #ffb733;
}

Таким образом, вы должны просто иметь возможность переопределить это в своем файле css или встроенной таблице стилей, загруженной после начальной загрузки-datepicker3.min.css. Просто используйте тот же или более конкретный селектор и устанавливайте по своему усмотрению:

 .datepicker table tr td.today {
  color: #fff;
  background-color: #009;
  border-color: blue;
}

/* or more specific */
.your-custom-class .datepicker table tr td.today {
  color: #fff;
  background-color: #009;
  border-color: blue;
}

1. спасибо @ArleighHix за помощь. я попробовал предложенный вами код выше как — . datepicker table tr td.today { цвет: rgb(194, 47, 47); цвет фона: rgb(153, 0, 0); цвет границы: синий; } . цвет текста изменился, но цвет фона и цвет границы остались неизменными.

2. я даже пробовал — background-color: rgb(153, 0, 0) !важно;

3. После этого у вас должны быть загружены какие-то другие стили, попробуйте использовать более конкретный селектор your-custom-class для содержащего элемента

4. мой html-код является минимальным — <div class=’container’> <div class=»row»> <h2>Bootstrap DatePicker</h2> <hr /> <div class=»form-group col-xs-3″> <div class=»внутренний аддон справа-аддон» id =»divInput»> <i class=»glyphicon glyphicon-calendar» id =»iconCal»></i> <класс ввода =»form-control» тип =»текст» id=»txtInput» /> </div> </div> </div> </div>

5. какой элемент будет содержать его.