fix(editors): allow input editing with Flatpickr editor (#704)

* fix(editors): allow input editing with Flatpickr editor - allows the user to enter a date directly into the input field. By default, direct entry is disabled. - remove jQueryUI from Composite Editor example and also use Flatpickr editor, however for the Cypress E2E test to work, it is easier to type the date in the input instead of using Flapickr date & month in picker which is a lot harder
6pac · Oct 22, 2022 · 2d64e47 · 2d64e47
1 parent afca1a2
commit 2d64e47
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/cypress/integration/example-composite-editor-modal-dialog.spec.js b/cypress/integration/example-composite-editor-modal-dialog.spec.js
@@ -210,11 +210,10 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
     cy.get('[data-editorid=duration] input')
       .type('7');
 
-    cy.get('[data-editorid=start] input')
-      .type('02/02/2020');
-
-    cy.get('.ui-datepicker-trigger').click(); // just 
-    cy.get('a.ui-state-default').contains('1').click();
+    cy.get('[data-editorid=start] input:visible[type=text]')
+      .focus()
+      .type('02/02/2020')
+      .type('{Enter}');
 
     cy.get('[data-editorid=effort-driven] input')
       .click();
@@ -232,12 +231,12 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
 
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '7 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).should('contain', '02/01/2020');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('img').should('have.length', 1);
 
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '7 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).should('contain', '02/01/2020');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('img').should('have.length', 1);
 
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
@@ -294,11 +293,10 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
     cy.get('[data-editorid=percent] input[type=text]')
       .type('44');
 
-    cy.get('[data-editorid=start] input')
-      .type('02/02/2020');
-
-    cy.get('.ui-datepicker-trigger').first().click(); // just 
-    cy.get('a.ui-state-default').contains('1').click();
+    cy.get('[data-editorid=start] input:visible[type=text]')
+      .focus()
+      .type('02/02/2020')
+      .type('{Enter}');
 
     cy.get('[data-editorid=effort-driven] input')
       .click();
@@ -314,7 +312,7 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
     cy.window().then((win) => {
       expect(win.console.log).to.have.callCount(7);
       expect(win.console.log).to.be.calledWith('composite editor input changed', {
-        description: 'random text', duration: 9, effortDriven: true, start: '02/01/2020', title: 'Task 8899'
+        description: 'random text', duration: 9, effortDriven: true, start: '02/02/2020', title: 'Task 8899'
       });
     });
   });
@@ -327,7 +325,7 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
       const htmlText = $cell.html();
       expect(htmlText).to.eq('<span class="percent-complete-bar" style="background:silver;width:44%" title="44%"></span>');
     });
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(5)`).should('contain', '02/01/2020');
+    cy.get(`[style="top:12500px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
     cy.get(`[style="top:12500px"] > .slick-cell:nth(6)`).should('contain', '');
     cy.get(`[style="top:12500px"] > .slick-cell:nth(7)`).find('img').should('have.length', 1);
   });

diff --git a/examples/example-composite-editor-modal-dialog.html b/examples/example-composite-editor-modal-dialog.html
@@ -6,8 +6,9 @@
   <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <title>SlickGrid example: CompositeEditor</title>
   <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
-  <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css" />
+  <link rel="stylesheet" href="examples-unicode-icons.css" type="text/css"/>
   <link rel="stylesheet" href="examples.css" type="text/css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   <style>
     .cell-title {
       font-weight: bold;
@@ -167,7 +168,7 @@ <h2>View Source:</h2>
   <script src="../lib/firebugx.js"></script>
 
   <script src="../lib/jquery-3.1.0.js"></script>
-  <script src="../lib/jquery-ui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
   <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
   <script src="../slick.core.js"></script>
@@ -214,8 +215,8 @@ <h2>View Source:</h2>
       { id: "desc", name: "Description", field: "description", width: 100, editor: Slick.Editors.LongText, massUpdate: false, },
       { id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Integer, massUpdate: true, validator: durationValidator, formatter: durationFormatter },
       { id: "percent", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete },
-      { id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, massUpdate: true, },
-      { id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, massUpdate: false, },
+      { id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Flatpickr, massUpdate: true, },
+      { id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Flatpickr, massUpdate: false, },
       { id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, massUpdate: true, }
     ];
     var options = {

diff --git a/slick.editors.js b/slick.editors.js
@@ -402,6 +402,7 @@
       $input.focus().select();
       flatpickrInstance = $input.flatpickr({
         closeOnSelect: true,
+        allowInput: true,
         altInput: true,
         altFormat: "m/d/Y",
         dateFormat: 'm/d/Y',