There is no option for only Year Selection

[rohit64Singh222]

Hello..! In this Repository there were no option of only selection of year. there were option for year and month both combine but in my project i required only year selection than i post this issue. please provide solution of it.

[igorlino]

I think you can use a workaround:

<input [owlDateTimeTrigger]="endDateEl" [owlDateTime]="endDateEl" [(ngModel)]="endMonth">
<owl-date-time [pickerType]="'calendar'"
                                       (monthSelected)="yearHandler($event, endDateEl)"
                                       [startView]="'multi-year'" #endDateEl></owl-date-time>

yearHandler(normalizedYear: Date, datepicker: OwlDateTimeComponent<any>) {
        console.log(normalizedYear.getFullYear());
        datepicker.close();
    }

You may also hide using CSS the parts of the dialog you dont want to show. For that you will need to turn encapsulation off in the component where you are using the picker.

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

[rohit64Singh222]

Thanks for reply.

But when open year piker showing

and when click on year open days as bellow

We only need to show year select and after select show only year, please provide suggestion.

[igorlino]

I could in theory extend my pull request to add an option of multiyearOnly

https://github.com/danielmoncada/date-time-picker/issues/94 https://github.com/danielmoncada/date-time-picker/pull/95

I implemented it for month picker.

Its far from 100% perfect, but sufficient for picking up months.

[igorlino]

As it was relatively simple I extended my MR https://github.com/danielmoncada/date-time-picker/pull/95.

flag is using: [multiyearOnly]="true"

with it, one can:

<input [owlDateTimeTrigger]="yearEl" [owlDateTime]="yearEl" [(ngModel)]="selectedYear">
<owl-date-time [pickerType]="'calendar'"
                                        [multiyearOnly]="true"
                                       (yearSelected)="yearHandler($event, yearEl)"
                                       [startView]="'multi-year'" #yearEl></owl-date-time>

yearHandler(normalizedYear: Date, datepicker: OwlDateTimeComponent<any>) {
        console.log(normalizedYear.getFullYear());
        datepicker.close();
    }

You still need to hide using CSS the parts of the dialog you dont want to show. For that you will need to turn encapsulation off in the component where you are using the picker.

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

[danielmoncada]

@igorlino thanks for the PR! merged and released.

Check out version 10.2.0 👍