logisticinfotech / ionic4-datepicker

Ionic 4 Datepicker component
https://www.logisticinfotech.com/blog/ionic4-datepicker-component/
Other
77 stars 33 forks source link

Provider for NgModel is no longer needed in @Directive() #57

Open mtnair opened 4 years ago

mtnair commented 4 years ago

(I know this component was made for Ionic 4, though I encountered following problem with Ionic 5 and Angular 9; I don't know whether this still works with Ionic 4)

When using the directive to add the date picker to an ion-input, the input field doesn't update its value to the picked date. It took me a while to find out why, it seems like the providers: [NgModel] option in the @Directive() decorator is the issue. When removing this line, the date picker works as expected. See: https://github.com/logisticinfotech/ionic4-datepicker/blob/master/projects/ionic4-datepicker/src/lib/li-ionic4-datepicker.directive.ts#L12

@Directive({
  selector: '[customIonicDatepicker]',
  exportAs: 'customIonicDatepicker',
  providers: [NgModel], // remove this line
})
maxcook commented 4 years ago

How can i fix that on my local? (Sorry for the stupid question, i am new)

This repository is dead - we might never see it being fixed or even updated for ionic 5

mtnair commented 4 years ago

How can i fix that on my local? (Sorry for the stupid question, i am new)

Honestly, I don’t know. I cloned the repo and copied the code from the plugin to my codebase and fixed it myself by editing the code. I also fixed other problems mentioned in other issues (ionicons, footer height).

maxcook commented 4 years ago

Ok i see. It would be awesome if you could push that stuff to github for us to also use :)

RomuloPBenedetti commented 4 years ago

A workaround for this problem is to invoke the datepicker from code side:

async openDatePicker() {
    const datePickerModal = await this.modalCtrl.create({
        component: Ionic4DatepickerModalComponent,
        cssClass: 'li-ionic4-datePicker',
        componentProps: { 'objConfig': this.datePickerObj }
    });
    await datePickerModal.present();

    datePickerModal.onDidDismiss().then((data) => {
        this.myDate = data.data.date;
    });
}
<ion-input placeholder="bla" readonly [(ngModel)]="myDate" (click)="openDatePicker()"> </ion-input>
ipehimanshu commented 10 months ago

Hello

@RomuloPBenedetti

do you face issue like

Error: NG0906: The Ionic4DatepickerModalComponent is not an Angular component, make sure it has the @Component decorator.

Let me know if yes and you already fix

Thank you