calendarViewChanged not working?

[arnebratt]

It seems to me that calendarViewChanged is emited only when going from year selection view to date selection view (and not the reverse). I would have expected it to emit on any view change, between date, month and year selections.

Tested on version 0.5.2 and 0.9.2.

Also, is there any way to force a change of view programmatically?

[kekeh]

@arnebratt

It is emitted when the date selection view is activated or date selection view is changed to another month/year (when you click previous or next arrow button). It works as expected. The name of the callback is not best one and the documentation is not good enough.

Maybe there should be another callback when the view is change between date, month or year views. Do you need this kind of callback?

calendarViewChanged = here calendar means only date selection view

https://github.com/kekeh/angular-mydatepicker#calendarviewchanged-callback

[arnebratt]

Ok, then I understand the odd behaviour. :)

I think the switching between different selection views should be both transparent and controllable. This is what I need right now, for a better control of what happens in the header, and also as I want to implement a month selection solution (where the user does not need to select a specific date of the month).

[kekeh]

You can change view (date, month or year) programmatically. There is option defaultView which can be used. Check the example below. At first install the latest version (0.9.3) from npm. I did minor fix to it.

<input angular-mydatepicker [(ngModel)]="model" [options]="myOptions" 
    #dp="angular-mydatepicker">

import {IAngularMyDpOptions, DefaultView} from 'angular-mydatepicker';

export class MyApp {
    myOptions: IAngularMyDpOptions = {
        defaultView: DefaultView.Date
        // other options here
    }

    constructor() {}

    changeToDateView(): void {
        this.changeDefaultViewOption(DefaultView.Date);
    }

    changeToMonthView(): void {
        this.changeDefaultViewOption(DefaultView.Month);
    }

    changeToYearView(): void {
        this.changeDefaultViewOption(DefaultView.Year);
    }

    changeDefaultViewOption(view: DefaultView): void {
        let copy: IAngularMyDpOptions = this.getCopyOfOptions();
        copy.defaultView = view;
        this.myOptions = copy;
    }

    // get copy of options
    getCopyOfOptions(): IAngularMyDpOptions {
        return JSON.parse(JSON.stringify(this.myOptions));
    }
}

[kekeh]

@arnebratt

I added a new method headerAction() to directive. You can control the header buttons with it from outside of the directive. If I understood right it was something you needed. You can also change the view with it.

Documentation: https://github.com/kekeh/angular-mydatepicker#headeraction-function Example: https://github.com/kekeh/angular-mydatepicker/wiki/call-function-of-the-directive

To use this method you need to install version 0.9.4.

[arnebratt]

Oh, beautiful! Thank you!

[kekeh]

You can use the defaultMonth attribute to select specific month or year programmatically. Update version 0.9.5.

Documentation: https://github.com/kekeh/angular-mydatepicker#defaultmonth-attribute Example: https://github.com/kekeh/angular-mydatepicker/wiki/defaultMonth-attribute

[arnebratt]

Thank you, @kekeh ! It is still a problem that I can't know with certainty when the date picker is in date view vs. month view vs. year view. I have tried to guess it based on when calendarToggle and calendarViewChanged is called, but it's not predictable in all situations.

[kekeh]

I added new callback (viewActivated). You can handle situation with it. Documentation of the callback: https://github.com/kekeh/angular-mydatepicker#viewactivated-callback

At first install the latest version from npm.

[arnebratt]

Thank you, @kekeh ! :)