fetrarij / ngx-daterangepicker-material

Pure Angular 2+ date range picker with material design theme, a demo here:
https://fetrarij.github.io/ngx-daterangepicker-material/
MIT License
249 stars 252 forks source link

Datepicker won't work if used in a custom component for Formly #454

Open FirozESS opened 2 years ago

FirozESS commented 2 years ago

Hello,

Since I use formly for all my forms, my html looks condensed like this -

`<form [formGroup]="addReportFileForm" (ngSubmit)="onSubmit(model)"> <formly-form [form]="addReportFileForm" [fields]="fields" [model]="model">

        </form>`

In my component file, I added a custom daterangepicker like this -

{ key: 'resultAt', className: 'col-md-6', type: 'rangeDatepicker', templateOptions: { required: false, label: 'Result At (date range)', datepickerOptions: { max: new Date(), min: '1900-09-10' }, },

And this is a snippet of what the custom component looks like - ` @Component({ selector: 'app-formly-date-range-picker', template: <input ngxDaterangepickerMd type="input" autocomplete="off" class="form-control col-md-6" [(ngModel)]="selected" startKey="start" endKey="end"

}) export class FormlyRangeDatepickerComponent extends FieldType { selected: {start: Dayjs, end: Dayjs};

defaultOptions = { templateOptions: { change: () => {}, } };`

I got the input showing up, but clicking on it does not popup the date picker. Not sure if this is a bug where it's unable to work as a formly component instead if inline in HTML.

ngx-daterangepicker-material : 3.0.4 angular : 9.1.7 node : 14.18.1 formly : 5.9.3

fetrarij commented 2 years ago

hi @FirozESS , did you imported it in app.module.ts? if you could create a stackblitz this would be easy to follow.

Thanks