Angular 8 - How to show only date and month using ngxbootstrap/datepicker

Question

I'm using ngx-bootstrap datepicker in the project.

Needed only date and month to be selected as the below image/link

Sample Image To show only date and month like this I needed

I searched a lot and most examples are showing month and year using minMode of BsDatePickerConfig. and I tried minMode to 'day'. It shows a normal day/month/year calendar view. But I need only date and month, not year

Below is my code:

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input
      type="text"
      placeholder="Datepicker"
      [bsConfig]="datePickerConfig"
      class="form-control"
      bsDatepicker
    />
  </div>
</div>

and component.ts file

  datePickerConfig: Partial<BsDatepickerConfig>;
  minMode: BsDatepickerViewMode = 'day';
  constructor() {
    this.datePickerConfig = Object.assign(
      {},
      {
        containerClass: 'theme-dark-blue',
        showWeekNumbers: false,
        minMode: this.minMode,
      }
    );
  }

Is there any way to config the ngx-bootstrap datepicker like my question? Or Suggest any alternative date-picker which allows this functionality.

Thanks in advance for your time...

Answer 1

You can use Angular Material and its datepicker where you can use custom provider with custom format for both: display and parse do this task. More details (along with code) are described here: https://stackoverflow.com/a/58639587/14556461 and the stackblitz for it is here: https://stackblitz.com/edit/angular-hw54xf.

It seems there is no direct option to do this in ngx-bootstrap datepicker - you would need to add custom CSS or JS to hide the year in the calendar or remove it completely by removing proper DOM element.

---

Update: Answering your question from comment - I provide you a hack using CSS how to achieve this effect.

Add the following rule to your CSS file for component:

::ng-deep.bs-datepicker-head button.current:nth-child(3) {
  display: none;
}

it selects button with a year in the calendar and hides it.

Then you also need to specify for which year months should be displayed. Assuming you want it for the current year, you can do this as follows:

Your component's HTML:

<input
  type="text"
  #dp="bsDatepicker"
  bsDatepicker
  [(bsValue)]="chosenDate"
  [minDate]="minDate"
  [maxDate]="maxDate"
/>

Your component's TS:

export class AppComponent implements OnInit {
  chosenDate: Date;
  minDate: Date;
  maxDate: Date;

  ngOnInit() {
    const currentDate = new Date();
    this.minDate = new Date(currentDate.getFullYear(), 0, 1);
    this.maxDate = new Date(currentDate.getFullYear(), 11, 31);
  }
}

This way you restrict dates that can be chosen only to days and months of current year.

Keep in mind it's kind of hack (workaround) and may not work in future versions or you may need to adapt it to future versions. Also I would advise to refine CSS rule to avoid usage of ::ng-deep which is not recommended but is separate topic and you can find more information on this topic in other places, I just wanted to show the idea.

Sample Stackblitz: https://stackblitz.com/edit/stackoverflow-51062003-usatzk (I based on a little bit older version of ngx-bootstrap than you probably use as I found some ngx-bootstrap datepicker example on Stackblitz so I forked it and just changed to show this solution but it should be the same code in your case or very similar to this one)