angularx-flatpickr icon indicating copy to clipboard operation
angularx-flatpickr copied to clipboard

formatDate is incompatible with Flatpickr option of the same name

Open pdobrigkeit opened this issue 4 months ago • 0 comments

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

pdobrigkeit avatar Dec 18 '25 09:12 pdobrigkeit