angularアプリを作っているのですが、日付を入力するコントロールにng-bootstrapのdatepickerを採用しています。
サンプルを参照して、カレンダーのデザインを変更したのですが、このデザインをすべてのコンポーネントに反映させるにはどうすればいいのでしょうか?
全htmlに<ng-template #customDay~を追加していくのは、変更が入ったとき大変なので、どこか一か所でデザインを定義してそれを参照するようにしたいと思っています。
以下のように「<ng-template #customDay~」部分を別コンポーネントにして、
test.component.htmlの子コンポーネントにしてみましたが、customDayが無いといわれてしまいダメでした。
test.component.html
1<form class="form-inline"> 2 <div class="form-group"> 3 <div class="input-group"> 4 <input class="form-control" placeholder="yyyy-mm-dd" 5 name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" #d="ngbDatepicker"> 6 <div class="input-group-append"> 7 <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button> 8 </div> 9 </div> 10 </div> 11</form> 12<app-design #design></app-design>
design.component.html
1<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused"> 2 <span class="custom-day" [class.focused]="focused" 3 [class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled"> 4 {{ date.day }} 5 </span> 6</ng-template>
何か方法はないでしょうか
あなたの回答
tips
プレビュー