Skip to main content

angular bootstrap - Datepicker custom day style

app.component.ts 

import { Component } from '@angular/core';
import { NgbCalendar, NgbDate, NgbDateStruct }
  from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .custom-day-style {
      text-align: center;
      padding: 0.185rem 0.25rem;
      border-radius: 0.25rem;
      display: inline-block;
      width: 2rem;
      background: AliceBlue;
    }
    .custom-day-style:hover, .custom-day-sytle.focused{
      background-color: Crimson;
      color: Snow;
    }
    .weekend {
      background-color: LightSteelBlue;
      border-radius: 1rem;
      border: 1px solid Lavendar;
      color: white;
    }
    .hidden {
      display: none;
    }
  `]
})


export class AppComponent {
  //model: NgbDateStruct;
  model: any;

  constructor(private calendar: NgbCalendar) { }

  isDisabled = (
    date: NgbDate, current: {month: number, year: number}
    ) => date.month !== current.month;
  isWeekend = (date: NgbDate) =>  
    this.calendar.getWeekday(date) >= 6;
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Datepicker custom day style
</h4>

<h5><b>Selected Date:</b></h5>
<h5>{{ model | json }}</h5>
<br/>


<form class="row row-cols-sm-auto">
  <div class="col-12">
    <div class="input-group">
      <input 
        ngbDatepicker 
        class="form-control" 
        placeholder="yyyy-mm-dd"
        name="dp" 
        [(ngModel)]="model" 
        [dayTemplate]="customDay" 
        #d="ngbDatepicker">
      <button (click)="d.toggle()">Open</button>
    </div>
  </div>
</form>


<ng-template 
  #customDay let-date let-currentMonth="currentMonth" 
  let-selected="selected" 
  let-disabled="disabled" let-focused="focused">
  
  <span 
    class="custom-day-style" 
    [class.weekend]="isWeekend(date)" 
    [class.focused]="focused"
    [class.bg-primary]="selected" 
    [class.hidden]="date.month !== currentMonth"
    [class.text-muted]="disabled">
      {{ date.day }}
  </span>

</ng-template>
More Angular tutorials
Labels: