#bootstrap-4 #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. какой элемент будет содержать его.