Datepicker as cell editor in datatable

Webix JS
1

I’m trying to implement an editable datepicker as a cell editor in a datatable, to allow a user to either select a date from the calendar, or manually enter a date. The standard date editor only supports date selection, but not manual date entry.

Please see snippet https://snippet.webix.com/tdnxyvbm

With this code sample, the navigation of the datepicker (e.g. clicking on arrow left/right, clicking on year etc) doesn’t work. Because it is invoked as a popup, any click closes the datepicker and returns focus to the datatable.

Can you pls advise how to implement proper behaviour?

2

Hello,

Because it is invoked as a popup, any click closes the datepicker and returns focus to the datatable.

it’s normal behavior for popup editors. Any click outside the editor or its popup stops editing of the master component (saves editor value and closes the editor). That’s why the popup with a datepicker closes - the click target is outside it.

The standard date editor only supports date selection, but not manual date entry.
You can create a custom editor with the needed functionality.
Check the snippet, please Code Snippet. Though it’s rather an approximate solution, it may satisfy your needs.

3

hi Nastja, that snippet doesn’t work, it doesn’t show the calendar, it is just a text entry?

4

@johsmith Code Snippet
The icon was an old one

5

Brilliant, that works nicely. Thank you

6

One more question, please. This works great in a datatable, but if I apply this to the spreadsheet widget (as a cell editor), the editor doesn’t fire.

Here is a snippet with the code: https://snippet.webix.com/siym1liy

Can you please advise?

7

Hello @johsmith ,

Please check this: https://snippet.webix.com/bp3trhmb

8

Also, is possible to remove icon after clicking on the cell:
https://snippet.webix.com/o4ol6t8b

9

Thank you Nastja, what a quick response. That works. Great support!