Search code examples
angulardatepickerngx-bootstrap

How to make ngx-bootstrap datepicker be able to select and display only month and year?


I tried setting the config object 'bsConfig' value to 'MMM-YYYY'. The problem is that when I click on the input it is showing all the three options (day, month, year) to select. I want only month and year to be shown for selecting. When I select one particular date, it is displaying only month and year in the input field. The displaying part is fine but I also want the datepicker to show only month and year to select and not show day for selecting.

Here is my sample code.

In the html file.

<input bsDatepicker [bsConfig]="bsConfig">

In the component.ts file

bsConfig: Partial<BsDatepickerConfig>;

ngOnInit() {
this.bsConfig = Object.assign({}, {dateInputFormat: 'MMM-YYYY', selectDay: false, showWeekNumbers: false});

}

I installed ngx-bootstrap, included "ngx-bootstrap/datepicker/bs-datepicker.css" file, imported it to the component. every thing is good. Except that it is showing day also to select when i want only month and year to be selected.

Someone help me please.


Solution

  • For those who still looking, here is the new updated config value.

    min-mode

    In app.component.ts

    export class AppComponent  {       
            bsValue: Date = new Date(2017, 7);
            minMode: BsDatepickerViewMode = 'month';
            bsConfig: Partial<BsDatepickerConfig>;
    
          ngOnInit(): void {
            this.bsConfig = Object.assign({}, {
              minMode : this.minMode
            });
          }
    }
    

    app.component.html

    <bs-datepicker-inline [bsConfig]="bsConfig" bsDatepicker [(bsValue)]="bsValue"></bs-datepicker-inline>