Как настроить указатель даты ngx-bootstrap - PullRequest
Новая
       45

Как настроить указатель даты ngx-bootstrap

0 голосов
/ 27 июня 2018

Я хочу настроить всплывающее окно выбора даты ngx-bootstrap. В основном я хочу добавить ссылку / кнопку в календарь, показывающий дату, и по щелчку эта дата будет добавлена ​​в поле выбора даты.

Я не нашел способа настроить средство выбора даты. Я использую Angular 5 и ngx-bootstrap: https://valor -software.com / NGX-самозагрузки / # / DatePicker

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 28 января 2019

файл css 

      "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"

открыть css файл 

     node_modules -> ngx-bootsrap -> datapicker -> bs-datepicker.css class

найдите класс css, который вы хотите изменить, используя "inspect elements" затем найдите класс в bs-datepicker.css и измените например я хочу изменить цвет заголовка с зеленого на синий 

    .theme-green .bs-datepicker-head {
      // background-color :#green;  
      background-color: #4498fb;

     }

меняю цвет фона заголовка

0 голосов
/ 02 июля 2018

Вы можете создать пользовательский компонент на основе исходного средства выбора даты, добавив пользовательский элемент в шаблон, чтобы он выглядел как интегрированный элемент с некоторыми css:

enter image description here

Сначала измените высоту всплывающего окна выбора даты: 

::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;
}

Вот демонстрация работающего стекаблица.

Лучшим решением было бы иметь возможность передать шаблон в средство выбора даты, но ngx-bootstrap, похоже, не поддерживает это.

...