CODEWITHSUNDEEP
angulardatepickerangular2-servicesngx-bootstrap
Aashiq Rathnadas
Aashiq Rathnadas

Reputation: 525

Angular 2 - How to show only month and year in ngxbootstrap/datepicker

I'm using ngx bootstrap datepicker in the project

Needed only month and year to be selected like the above image

enter image description here

<input type="text"
         class="form-control"
          (bsValueChange)="modelChanged($event)"
          #dp="bsDatepicker"
          bsDatepicker [(bsValue)]="bsValue"
          [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }"
          >

is there any way to config the date-picker like this? or Suggest any alternative date-picker which allow this functionality

Upvotes: 11

Views: 7546

Answers (2)

Jordi Cuevas
Jordi Cuevas

Reputation: 56

you should import the following:

import { BsDatepickerConfig, BsDatepickerViewMode } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'demo-datepicker-min-mode',
  templateUrl: './min-mode.component.html'
})
export class DemoDatepickerMinModeComponent implements OnInit {
  bsValue: Date = new Date(2017, 7);
  minMode: BsDatepickerViewMode = 'month'; // change for month:year

  bsConfig: Partial<BsDatepickerConfig>;

  ngOnInit(): void {
    this.bsConfig = Object.assign({}, {
      minMode : this.minMode
    });
  }
}

and in your HTML file

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input type="text"
           class="form-control"
           [bsConfig]="bsConfig"
           #dp="bsDatepicker"
           bsDatepicker [(bsValue)]="bsValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group">
    <button class="btn btn-success" (click)="dp.toggle()" type="button">Date Picker</button>
  </div>
</div>
<br>

Upvotes: 1

Ronaldo Sena
Ronaldo Sena

Reputation: 1

Currently, there is no way to achieve what you want. That is a very popular request in the ngx-bootstrap repo, by the way.

The valor-software team is implementing this feature right now, and you can try what they've done so far. Check out for the next ngx-bootstrap release. Here's a link to the pull request.

Upvotes: 0

Related Questions