fix(editor): disregard Flatpickr error on Date Editor

- when user passes a date that is not in the accepted range, Flatpickr will show a warning which should be disregarded completely

packages/common/src/editors/dateEditor.ts

@@ -32,6 +32,7 @@ declare function require(name: string): any;
 export class DateEditor implements Editor {
   private _$inputWithData: any;
   private _$input: any;
+  private _pickerMergedOptions: FlatpickrOption;
 
   flatInstance: any;
   defaultDate: string;
@@ -82,6 +83,10 @@ export class DateEditor implements Editor {
     return this.grid.getOptions().autoCommitEdit;
   }
 
+  get pickerOptions(): FlatpickrOption {
+    return this._pickerMergedOptions;
+  }
+
   /** Get the Validator function, can be passed in Editor property or Column Definition */
   get validator(): EditorValidator | undefined {
     return (this.columnEditor && this.columnEditor.validator) || (this.columnDef && this.columnDef.validator);
@@ -111,22 +116,25 @@ export class DateEditor implements Editor {
         onChange: (selectedDates: Date[] | Date, dateStr: string, instance: any) => {
           this.save();
         },
+        errorHandler: (error) => {
+          // do nothing, Flatpickr is a little too sensitive and will throw an error when provided date is lower than minDate so just disregard the error completely
+        }
       };
 
       // merge options with optional user's custom options
-      const pickerMergedOptions: FlatpickrOption = { ...pickerOptions, ...(this.editorOptions as FlatpickrOption) };
+      this._pickerMergedOptions = { ...pickerOptions, ...(this.editorOptions as FlatpickrOption) };
       const inputCssClasses = `.editor-text.editor-${columnId}.flatpickr`;
-      if (pickerMergedOptions.altInput) {
-        pickerMergedOptions.altInputClass = 'flatpickr-alt-input editor-text';
+      if (this._pickerMergedOptions.altInput) {
+        this._pickerMergedOptions.altInputClass = 'flatpickr-alt-input editor-text';
       }
 
       this._$input = $(`<input type="text" data-defaultDate="${this.defaultDate}" class="${inputCssClasses.replace(/\./g, ' ')}" placeholder="${placeholder}" title="${title}" />`);
       this._$input.appendTo(this.args.container);
-      this.flatInstance = (this._$input[0] && typeof this._$input[0].flatpickr === 'function') ? this._$input[0].flatpickr(pickerMergedOptions) : flatpickr(this._$input, pickerMergedOptions as unknown as Partial<FlatpickrBaseOptions>);
+      this.flatInstance = (this._$input[0] && typeof this._$input[0].flatpickr === 'function') ? this._$input[0].flatpickr(this._pickerMergedOptions) : flatpickr(this._$input, this._pickerMergedOptions as unknown as Partial<FlatpickrBaseOptions>);
 
       // when we're using an alternate input to display data, we'll consider this input as the one to do the focus later on
       // else just use the top one
-      const altInputClass = (pickerMergedOptions && pickerMergedOptions.altInputClass) || '';
+      const altInputClass = (this._pickerMergedOptions && this._pickerMergedOptions.altInputClass) || '';
       this._$inputWithData = (altInputClass !== '') ? $(`.${altInputClass.replace(' ', '.')}`) : this._$input;
     }
   }

packages/common/src/interfaces/flatpickrOption.interface.ts

@@ -63,6 +63,12 @@ export interface FlatpickrOption {
   /** defaults to false, enables time picker */
   enableTime?: boolean;
 
+  /**
+   * callback method when Flapickr detects an error.
+   * For example if a minDate is specified and setDate is called with a date that is lower than minDate it will throw an error.
+   */
+  errorHandler?: (error: any) => void;
+
   /** Allows using a custom date formatting function instead of the built-in handling for date formats using dateFormat, altFormat, etc. */
   formatDate?: (dateObj: Date, format: string, locale: Locale) => string;
 

packages/web-demo-vanilla-bundle/src/examples/example03.ts

@@ -72,6 +72,7 @@ export class Example3 {
           // required: true,
           decimal: 2,
           valueStep: 1,
+          maxValue: 10000,
           alwaysSaveOnEnterKey: true,
         },
         type: FieldType.number,
@@ -132,7 +133,7 @@ export class Example3 {
         id: 'start', name: 'Start', field: 'start', sortable: true,
         formatter: Formatters.dateIso, type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
-        editor: { model: Editors.date, },
+        editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
         grouping: {
           getter: 'start',
           formatter: (g) => `Start: ${g.value}  <span style="color:green">(${g.count} items)</span>`,