web-dev-qa-db-ja.com

ngx-bootstrap datepickerをカスタマイズする方法

Ngx-bootstrap datepickerポップアップをカスタマイズしたいと思います。基本的に、日付を表示するカレンダーにリンク/ボタンを追加し、その日付をクリックすると、日付ピッカーフィールドに追加されます。

日付ピッカーをカスタマイズする方法が見つかりませんでした。 Angular 5 and ngx-bootstrap： https://valor-software.com/ngx-bootstrap/#/datepicker を使用しています

前もって感謝します。

angulardatepickerangular5customizationngx-bootstrap
4
sandip

オリジナルの日付ピッカーに基づいてカスタムコンポーネントを作成し、カスタム要素をテンプレートに追加して、一部のcssと統合された要素のように見せることができます。

enter image description here

最初に、日付ピッカーポップアップの高さを変更します。

::ng-deep.bs-datepicker {
  height: 350px;
}

次に、カスタム要素をdatepickerに追加します。

<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デモです

より良い解決策は、テンプレートを日付ピッカーに渡す可能性を持つことですが、ngx-bootstrapはそれをサポートしていないようです。

4
ibenjelloun

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;

     }

ヘッダーの背景色を変更します

1
Nadeem Qasmi