formatDate is incompatible with Flatpickr option of the same name
Describe the bug
Hey, I am trying to integrate your package into a new Angular app I am building. For validation reasons I would like to return a Date() object from the flatpickr. The example from the webpage shows that the function has 3 arguments and you can return any type. (https://flatpickr.js.org/examples/#custom-parsing-and-formating)
Your function has a single argument and returns a string (https://mattlewis92.github.io/angularx-flatpickr/docs/directives/FlatpickrDirective.html#source)
Is there a possibility to return a Date object directly from the input without further transformations? Am I overlooking something?
Otherwise I would like to see a compatible signature with the original flatpickr.
Minimal reproduction of the problem with instructions
import { JsonPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FlatpickrDirective, provideFlatpickrDefaults } from 'angularx-flatpickr';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'mwl-demo-app',
standalone: true,
imports: [FlatpickrDirective, FormsModule, JsonPipe],
providers: [provideFlatpickrDefaults()],
template: `
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Basic demo</h3>
</div>
<div class="panel-body">
<input
class="form-control"
mwlFlatpickr
type="text"
[formatDate]="formatDateActual"
[(ngModel)]="basicDemoValue"
/>
NgModel value: {{ basicDemoValue }}
</div>
</div>
</div>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
.inline-flatpickr .form-control,
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
display: none;
}
`,
],
})
export class DemoComponent {
basicDemoValue = '2017-01-01';
readonly formatDateExpected = (date: string, format: string, locale: string): Date => {
// Your formatting logic
return parse(date, 'YYYY-MM-DD', new Date());
};
readonly formatDateActual = (date: string): string => {
// Your formatting logic
return ''
};
}
Screenshots
No response
@angular/core version
20.3.0
angularx-flatpickr version
8.1.0
Browser name and version
Chrome latest