Datepicker with only Month and Day (Hide year)

Question

I am unable to find any documented way to hide year on the ngx-bootstrap datepicker. I tried dateInputFormat: 'MMDD' but year still shows in datepicker header. Documentation link: https://valor-software.com/ngx-bootstrap/#/datepicker I would like to show something like:

Answer 1

well, the thing is use encapsulation:ViewEncapsulation.None and a class like

.bs-datepicker-head button:nth-child(3){
  display:none!important;
}

The problem with ViewEncapsultaion.None is that all your .css in component affect to all the application. So, better write a .css like

.custom .bs-datepicker-head button:nth-child(3){
  display:none!important;
}

So, if we use ViewEncapsultaion.None, only affect to the datepicker that has a class "custom". To create a datePicker with class custom you need use [bsConfig].

I write the code

Our .html

<div class="content">
  <h4>datepicker should display current date:</h4>
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            class="form-control"
            [minDate]="minDate"
            [maxDate]="maxDate"
            #dp="bsDatepicker" [bsConfig]="bsConfig"
            bsDatepicker [(bsValue)]="myDateValue">
    </div>
  </div>
</div>

And our component

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
  myDateValue: Date;
  bsConfig: Partial<BsDatepickerConfig>;
  ngOnInit() {
    this.myDateValue = new Date();
    //see that our class was "theme-green custom"
    this.bsConfig = Object.assign({}, { containerClass: 'theme-green custom' });
  }
}

You can see in the stackblitz