Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(datepicker): add listening to the change of month property #1153

Open
Misenooooo opened this issue Oct 24, 2016 · 17 comments · May be fixed by #6426
Open

feat(datepicker): add listening to the change of month property #1153

Misenooooo opened this issue Oct 24, 2016 · 17 comments · May be fixed by #6426

Comments

@Misenooooo
Copy link

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
Copy link
Member

valorkin commented Sep 7, 2017

nice use case description!
it will be done

@YevheniiaMazur YevheniiaMazur changed the title Datepicker - listening to the change of month property feat(datepicker): listening to the change of month property Jan 16, 2018
@YevheniiaMazur YevheniiaMazur changed the title feat(datepicker): listening to the change of month property feat(datepicker): add listening to the change of month property Jan 16, 2018
@sanjaypraja
Copy link

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

@jeffersonluissm
Copy link

Any position on this?

@pbaukov
Copy link

pbaukov commented Oct 7, 2019

Need it really hard :(

@goku321
Copy link

goku321 commented Oct 8, 2019

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

@daniloff200
Copy link
Contributor

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

@pbaukov
Copy link

pbaukov commented Oct 24, 2019

Any progress here?

@MathiasAt
Copy link

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
Copy link
Contributor

Any progress on this?

@pbaukov
Copy link

pbaukov commented Jan 28, 2020

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
Copy link

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
Copy link

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
Copy link

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

@Devoney
Copy link

Devoney commented Oct 30, 2020

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);
    });
  }
}

MartinGodzina added a commit to MartinGodzina/ngx-bootstrap that referenced this issue Jan 29, 2022
Navigating through the datepicker calendar will emit a bsViewChange event.

Closes valor-software#1153
MartinGodzina added a commit to MartinGodzina/ngx-bootstrap that referenced this issue Jan 29, 2022
Navigating through the datepicker calendar will emit a bsViewChange event.

Closes valor-software#1153
@mstojevski
Copy link

mstojevski commented Dec 19, 2022

@Devoney solution is great but It will be triggered on any change event, not only month change event

To only trigger month change event

		const storeSubject = (datePicker as any)._datepicker.instance._store.source as BehaviorSubject<any>;
		storeSubject.subscribe(data => {
			const date = data.view.date as Date;
			if (
				!this.lastKnownViewDate ||
				(this.lastKnownViewDate.getMonth() !== date.getMonth())
			) {
				if (data.view.mode === 'day') {
					this.lastKnownViewDate = date;
					this.viewChangedSubject.next(true);
				}
			}
		});

Edit: Code improvements used lastKnowViewDate

@nguyenhmtriet
Copy link

nguyenhmtriet commented Mar 23, 2023

Thanks to @mstojevski & @Devoney solutions which are working for me. But there is an issue that when I want to set one of @Input() which are related to dates that the component will call setConfig() -> this._datepickerRef = this._datepicker .provide({ provide: BsDatepickerConfig, useValue: this._config }) .attach(BsDatepickerInlineContainerComponent) .to(this._elementRef) .show(); will re-create new instance for BsDatePickerInline & also lose all subscriptions which we are having workaround for listening on view state changed.

ngx-bootstrap: v10.2.0

image

image

@sachinedward
Copy link

sachinedward commented Apr 27, 2023

Until the issue is resolved there is another way which worked better for me.

<input (onShown)="onOpenCalendar($event)" bsDaterangepicker [bsConfig]="bsConfig">
interface BsDatePickerStoreView {
  date: Date,
  mode: keyof { 'day', 'month', 'year'}
}
interface BsDatePickerStoreData {
  view:BsDatePickerStoreView
}
export class Component {
  lastKnownViewDate: Date = undefined;

 onOpenCalendar(container) {
    const store = container._store.source as BehaviorSubject<BsDatePickerStoreData>;
    store.subscribe((data) => {
      const date = data.view.date as Date;
      if (!this.lastKnownViewDate || this.lastKnownViewDate.toDateString() !== date.toDateString()) {
        if (data.view.mode === 'day') {
          this.lastKnownViewDate = date;
          console.log(data, date);
          // do the on change operations
        }
      }
    });
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.