SlickGrid: compound editor in cell with two date fields?

I am using SlickGrid with jQuery, and would like to have a compound editor within a cell as in example 3a, but with two date fields rather than two text fields.

Helpfully, Example 3 shows how to use SlickGrid date pickers to edit date fields, but does not have a compound editor. I would like to combine the two.

So instead of adding input fields in raw HTML when the user clicks on the row, as in example 3a:

this.init = function () {
  $from = $("<INPUT type=text style='width:40px' />")
      .appendTo(args.container)
      .bind("keydown", scope.handleKeyDown);
  $(args.container).append("&nbsp; to &nbsp;");
  $to = $("<INPUT type=text style='width:40px' />")
      .appendTo(args.container)
      .bind("keydown", scope.handleKeyDown);
  scope.focus();
};

I guess I need to use the Slick.Editors.Date editor for $from and $to instead, as in example 3. But how can I set them to use this editor, rather than simply appending an input field?

Thank you for your help.

Solution

I think you'll need to write a custom editor for this and use this new editor for your cells instead.

Refer this link for documentation and templates for SlickGrid editors: https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors

All out-of-the-box editors can be found in the slick.editors.js. Once you look at the code, it's pretty simple to follow. I would suggest starting with the NumericRangeEditor used in example 3a as a base and edit it to include dateFields (or even datePickers) instead of the text-boxes.

You can add this to slick.editors.js or include it in your own JS file.

Hope this helps!