feat(editors): add ways to preload date without closing date picker

src/app/examples/grid-editor.component.ts

@@ -1,11 +1,11 @@
 import { Component, Injectable, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
+import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import {
   AngularGridInstance,
   AutocompleteOption,
   Column,
-  EditCommand,
   Editors,
   EditorArgs,
   EditorValidator,
@@ -308,7 +308,17 @@ export class GridEditorComponent implements OnInit {
           model: Editors.date,
           // override any of the Flatpickr options through "editorOptions"
           // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          editorOptions: { minDate: 'today' } as FlatpickrOption
+          editorOptions: {
+            minDate: 'today',
+
+            // if we want to preload the date picker with a different date,
+            // we could toggle the `closeOnSelect: false`, set the date in the picker and re-toggle `closeOnSelect: true`
+            // closeOnSelect: false,
+            // onOpen: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => {
+            //   instance.setDate('2021-12-31', true);
+            //   instance.set('closeOnSelect', true);
+            // },
+          } as FlatpickrOption
         },
       }, {
         id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin',

src/app/modules/angular-slickgrid/editors/dateEditor.ts

@@ -118,7 +118,12 @@ export class DateEditor implements Editor {
         closeOnSelect: true,
         wrap: true,
         locale: currentLocale,
-        onChange: () => this.save(),
+        onChange: () => {
+          const currentFlatpickrOptions = this.flatInstance?.config ?? this._pickerMergedOptions;
+          if (this.args && currentFlatpickrOptions?.closeOnSelect) {
+            this.save();
+          }
+        },
         errorHandler: (error: Error) => {
           if (error.toString().includes('invalid locale')) {
             console.warn(`[Angular-Slickgrid] Flatpickr missing locale imports (${currentLocale}), will revert to English as the default locale.
@@ -150,7 +155,7 @@ export class DateEditor implements Editor {
       }
 
       this._$editorInputElm.appendTo(this.args.container);
-      this.flatInstance = (flatpickr && this._$editorInputElm[0] && typeof this._$editorInputElm[0].flatpickr === 'function') ? this._$editorInputElm[0].flatpickr(this._pickerMergedOptions) : flatpickr(this._$editorInputElm, this._pickerMergedOptions as unknown as Partial<FlatpickrBaseOptions>);
+      this.flatInstance = (!!flatpickr && this._$editorInputElm[0] && typeof this._$editorInputElm[0].flatpickr === 'function') ? this._$editorInputElm[0].flatpickr(this._pickerMergedOptions) : flatpickr(this._$editorInputElm, 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

src/app/modules/angular-slickgrid/models/flatpickrOption.interface.ts

@@ -1,3 +1,4 @@
+import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Locale } from 'flatpickr/dist/types/locale';
 
 export interface FlatpickrOption {
@@ -137,10 +138,10 @@ export interface FlatpickrOption {
   // -----------------
 
   /** Function(s) to trigger on every date selection. See Events API */
-  onChange?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onChange?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function(s) to trigger on every time the calendar is closed. See Events API */
-  onClose?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onClose?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function(s) to trigger on every time the calendar gets created. See Events API */
   onDayCreate?: (date: Date | Date[]) => void;
@@ -149,20 +150,20 @@ export interface FlatpickrOption {
   onDestroy?: (day: Date) => void;
 
   /** Function(s) to trigger when the date picker gets drestroyed. See Events API */
-  onKeyDown?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onKeyDown?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function(s) to trigger on every time the month changes. See Events API */
-  onMonthChange?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onMonthChange?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function(s) to trigger on every time the calendar is opened. See Events API */
-  onOpen?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onOpen?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function to trigger when the calendar is ready. See Events API */
   onReady?: () => void;
 
   /** Function(s) to trigger on every time the year changes. See Events API */
-  onValueUpdate?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onValueUpdate?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 
   /** Function(s) to trigger on every time the year changes. See Events API */
-  onYearChange?: (selectedDates: Date[] | Date, dateStr: string, instance: any) => void;
+  onYearChange?: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => void;
 }