Я хочу настроить всплывающее окно ngx-bootstrap datepicker. В основном я хочу добавить ссылку / кнопку в календарь, показывающий дату, и при нажатии этой даты будет добавлено поле выбора даты.
Я не мог найти способ настроить датпикер. Я использую Angular 5 и ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker
Заранее спасибо.
Вы можете создать настраиваемый компонент на основе исходного datepicker, добавив настраиваемый элемент в шаблон, чтобы он выглядел как интегрированный элемент с некоторыми css:
Сначала измените высоту всплывающего окна datepicker:
::ng-deep.bs-datepicker {
height: 350px;
}
Затем добавьте настраиваемый элемент в средство выбора даты:
<div class="container">
<input type="text" #dp="bsDatepicker" bsDatepicker [(bsValue)]="myDateValue">
<div class="custom-content" *ngIf="dp.isOpen">
<a (click)="customAction()">{{myDateValue | date:'short'}}</a>
</div>
</div>
С некоторыми css:
.custom-content {
position: absolute;
z-index: 1081;
top: 390px;
cursor: pointer;
align-self: center;
}
Вот работающая демонстрация stackblitz.
Лучшим решением было бы иметь возможность передать шаблон в datepicker, но ngx-bootstrap, похоже, не поддерживает это.
BsDatepickerModule.forRoot(), DatepickerModule.forRoot()?
- person Winnemucca; 31.01.2019
Не рекомендуется, Вы не должны изменять файлы node_modules, но при использовании упомянутой выше библиотеки (ngx-bootstrap / datepicker) я не смог чтобы перезаписать CSS, чтобы я просто изменил файл bs-datepicker.css, чтобы решить свою проблему.
CSS файл
"../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
открыть файл css
node_modules -> ngx-bootsrap -> datapicker -> bs-datepicker.css class
найдите класс CSS, который вы хотите изменить, используя «проверить элементы», затем найдите класс в bs-datepicker.css и измените, например, я хочу изменить цвет заголовка с зеленого на синий
.theme-green .bs-datepicker-head {
// background-color :#green;
background-color: #4498fb;
}
Я меняю цвет фона заголовка
