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

ghiscoding · May 14, 2021 · 3088038 · 3088038
1 parent 2deb3e9
commit 3088038
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
@@ -1,3 +1,4 @@
+import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import {
   AutocompleteOption,
   BindingEventService,
@@ -7,6 +8,7 @@ import {
   EventNamingStyle,
   FieldType,
   Filters,
+  FlatpickrOption,
   Formatter,
   Formatters,
   GridOption,
@@ -251,7 +253,17 @@ export class Example12 {
         exportCustomFormatter: Formatters.dateUs,
         editor: {
           model: Editors.date,
-          editorOptions: { minDate: 'today' },
+          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-06-04', true);
+              instance.set('closeOnSelect', true);
+            },
+          } as FlatpickrOption,
           massUpdate: true,
           validator: (value, args) => {
             const dataContext = args && args.item;

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -439,8 +439,9 @@ export class DateEditor implements Editor {
 
   protected handleOnDateChange() {
     this._isValueTouched = true;
+    const currentFlatpickrOptions = this.flatInstance?.config ?? this._pickerMergedOptions;
 
-    if (this.args) {
+    if (this.args && currentFlatpickrOptions?.closeOnSelect) {
       const compositeEditorOptions = this.args.compositeEditorOptions;
       if (compositeEditorOptions) {
         this.handleChangeOnCompositeEditor(compositeEditorOptions);

diff --git a/packages/common/src/formatters/formatterUtilities.ts b/packages/common/src/formatters/formatterUtilities.ts
@@ -29,7 +29,7 @@ export function getAssociatedDateFormatter(fieldType: typeof FieldType[keyof typ
   return (_row: number, _cell: number, value: any, columnDef: Column, _dataContext: any, grid: SlickGrid) => {
     const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
     const customSeparator = gridOptions?.formatterOptions?.dateSeparator ?? defaultSeparator;
-    const inputType = columnDef?.type ?? 'date';
+    const inputType = columnDef?.type ?? FieldType.date;
     const inputDateFormat = mapMomentDateFormatWithFieldType(inputType);
     const isParsingAsUtc = columnDef?.params?.parseDateAsUtc ?? false;
 

diff --git a/packages/common/src/interfaces/flatpickrOption.interface.ts b/packages/common/src/interfaces/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 {
@@ -140,10 +141,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;
@@ -152,20 +153,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 value input associated with the calendar get updated. 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;
 }