Ngx-bootstrap: feat(datepicker): add listening to the change of month property

[Misenooooo]

Is there a way, how to listen to the change of the month property of datepicker? I need to send a request to the server in order to load a new set of disabled dates. Than I need to disable the dates in datepicker before it loads.

[valorkin]

nice use case description!
it will be done

[sanjaypraja]

have any one find solution for month change using next & previous arrow event?

[jeffersonluissm]

Any position on this?

[pbaukov]

Need it really hard :(

[goku321]

Is it still open? If yes, would like to work on this if that's okay.

[daniloff200]

@goku321 cool!
You can start work on it! I'll assign it to you

[pbaukov]

Any progress here?

[MathiasAt]

Any updates on this topic?
Maybe take a look at how it was implemented in this datepicker?
https://ng-bootstrap.github.io/#/components/datepicker/api#NgbDatepickerNavigateEvent

[mathias3d]

Any progress on this?

[pbaukov]

Any progress on this?

As for me - I had to switch my datepicker to ng-bootstrap, unfortunately I had no time to wait until it is implemented here...

[nitesh-daga]

IN TEMPLATE

<input [(ngModel)]="modelDate" autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'DD/MM/YYYY'}" (onShown)="onOpenCalendar($event)" >

IN COMPONENT

onOpenCalendar(container) {

    container.navigateTo  = (event: any): void => {
      container._store.dispatch(container._actions.navigateStep(event.step));
      console.log(event);
      // you will get step as month -1 or +1 and based on that you can do your stuff
    }; 
  }

[banderberg]

IN TEMPLATE

<input [(ngModel)]="modelDate" autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'DD/MM/YYYY'}" (onShown)="onOpenCalendar($event)" >

No, this does not work when the user clicks the month navigation control to move forward (or backward)

[banderberg]

I would very much like to see this implemented as well.

[Devoney]

I solved it by subscribing to its internal store. When the view was changed to another month you will get the date of the view accordingly.

Add this utils class to your project

import { BsDatepickerInlineDirective } from 'ngx-bootstrap/datepicker';
import { BehaviorSubject } from 'rxjs';

interface BsDatePickerStoreView {
  date: Date,
  mode: keyof { 'day', 'month', 'year'}
}

interface BsDatePickerStoreData {
  view:BsDatePickerStoreView
}

export class BsDatePickerUtils
{
  public viewChanged = new BehaviorSubject<Date>(undefined);

  private lastKnownViewDate: Date = undefined;

  constructor(datePicker: BsDatepickerInlineDirective) {
    const store = (datePicker as any)._datepicker.instance._store.source as BehaviorSubject<BsDatePickerStoreData>;
    store.subscribe((data) => {
      const viewMode = data.view.mode;
      const date = data.view.date as Date;
      if (!this.lastKnownViewDate || this.lastKnownViewDate.toDateString() !== date.toDateString()) {
        if (data.view.mode === 'day') {
          this.lastKnownViewDate = date;
          this.viewChanged.next(data.view.date);
        }
      }
    });
  }
}

// Usage example
@Component({
  selector: 'my-component',
  template: `
<div>
  <bs-datepicker-inline #datePicker></<bs-datepicker-inline>
</div>
  `
})
export class MyComponent implements OnInit, AfterViewInit {

  @ViewChild(BsDatepickerInlineDirective) datePicker: BsDatepickerInlineDirective;
  bsDatePickerUtils: BsDatePickerUtils;

  ngAfterViewInit() {
    this.bsDatePickerUtils = new BsDatePickerUtils(this.datePicker);
    this.bsDatePickerUtils.viewChanged.subscribe(date => {
      console.log('Calendar changed: ' + date);
    });
  }
}