CODEWITHSUNDEEP
angulardatepickerngx-bootstrap
Srikanth
Srikanth

Reputation: 73

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.

Upvotes: 6

Views: 6268

Answers (1)

ARJUN
ARJUN

Reputation: 409

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>

Upvotes: 4

Related Questions