Change size of NgbDatepicker in Angular 4

user_775496 0
Viewed 6391

For some reason unknown to me, my NgbDatePicker is much smaller than I want it to be. It currently displays at the following size:

enter image description here

...when I was expecting it to display at the size in the example found here

One weird thing that I noticed is that the following portion of the datepicker in my application has the attribute _ngcontent-c0 set on its div:

enter image description here

...meanwhile the exact same portion of the example found on the website has the attribute _ngcontent-c4 set on its div. This means that their divs aren't even the same. This same attribute is also used in several css selectors.

This is the code in which I make the datepicker appear. I make it appear when an input field is clicked:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input readonly class="form-control rounded" (click)="d.toggle()" (clickOutside)="onDocumentClick($event, d)" (ngModelChange)="onModelChanged($event)" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <svg><use xlink:href="sprite.svg#calendar"></use></svg>
    </div>
  </div>
</form>

This is the ngOnInit() code of the component that configures the DatePicker:

    ngOnInit(): void {
    let today = new Date();
    let todayInDateStruct = {day: today.getUTCDate(), month: today.getUTCMonth() + 1, year: today.getUTCFullYear()};
    this.config.maxDate = this.maxDate || todayInDateStruct;
    this.config.minDate = this.minDate || {year: 1900, month: 1, day: 1};

    if (this.minDate$) {
        Rx.on(this, this.minDate$, (minDate: NgbDateStruct) => {
            if (minDate) {
                this.config.minDate = minDate;
            }
        });
    }

    /*
     The following line sets the first day of the week on the Calendar to Sunday instead of the default Monday.

     source: https://ng-bootstrap.github.io/#/components/datepicker/api
     */
    this.config.firstDayOfWeek = 7;
    }

Is there any way of increasing the size of the NgbDatepicker without overriding several NgbDatepicker styles?

ng-bootstrap angular
1 Answers

I think u can use this. create a custom template, for example:

<ng-template #tpl let-date="date" let-currentMonth="currentMonth" let-selected="selected">
            <div class="day">{{ date.day }}
            </div>
 </ng-template>

then set the dayTemplate property: [dayTemplate]="tpl"

and CSS: 

.day {      
    text-align: center;
    padding: 7px;
    border-radius: 1rem;
    width: 100% !important;
  }
.ngb-dp-day{
    width: 100% !important;
    height: 100% !important;
  }
.ngb-dp-weekday{
   width: 100% !important;
   height: 100% !important;
}

the padding is distance between day and day. because the default css for dayview and weekday is "width: 2rem, height: 2rem" so you need to modify it by add "!important".

add "encapsulation: ViewEncapsulation.None" into your component

user_97510840
Related