UI-Tabulator node Date time picker

Dashboard
1

Hiho friends,
since I my favorite scheduler node still has not been ported to Dashboard 2 I wanna use the ui-tabulator node as scheduler. For that I need to know how / if the tabulator node can define a field for a date time (2025-01-13 15:34:41) objekt combine with a picker or a bit better than just editing the raw string.

image
image372×218 11.1 KB

that s what I ve for this field:

        {
            "title": "Alert Date",
            "field": "startDateTime",
            "sorter": "date",
            "width": 150,
            "headerFilter": true,            
            "editor": "input"                     
        },
2

Yes it can. But it requires to install a dependency - the luxon package.
Here is an example of how you can set a date field:

{field: "breachDate",title: "Breach Date",width: 120,headerSortTristate: true,hozAlign: "center",
   formatter:"datetime",formatterParams:{inputFormat:"yyyyMMdd",outputFormat:"dd/MMM/yyyy",invalidPlaceholder:"(invalid date)"},
   sorter:"date", sorterParams:{format:"yyyyMMdd",alignEmptyValues:"bottom"},
   editor:"date", editorParams:{format:"yyyyMMdd",max:maxBreachDate()}},
3

ok, that sounds a bit more than "working out of the box". I found something interesting out that does work without installing third party stuff. Currently I don´t know how to make it work with a date time string format I want ("YYYY-MM-DD HH:mm:ss") . It places the date time string in (german) language format ("DD-MM-YYYY HH:mm:ss") even if I set the format like below. I now need to know how to come around this :wink:

        {
            "title": "Alert Date",
            "field": "requestDateTime",
            "sorter": "date",
            "width": 150,
            "headerFilter": true,
            "editor": "datetime",
            "editorParams": {
                "format": "YYYY-MM-DD HH:mm:ss",
                "elementAttributes": {
                    "title": "YYYY-MM-DD HH:mm:ss"
                }
            }
        },

looks then like this and ignores the given format:

image
image376×167 2.13 KB

EDIT: Damn, I think I was talking BS since the picker seems only to be available for the sorting / head.

4

ok, it does work to setup the date time picker to work with the cells but somehow my data is not shown when loaded and when using the picker to set the date time it does not spawn an event. (at least not "cellEdited").

image
image392×165 3.68 KB

current code:

        },
{
    "title": "Alert Date",
    "field": "requestDateTime",
    "sorter": "date",
    "width": 150,
    "headerFilter": "input",
    "editor": "datetime",
    "editorParams": {
        "format": "YYYY-MM-DD HH:mm:ss",
        "inputFormat":"YYYY-MM-DD HH:mm:ss",
        "outputFormat":"YYYY-MM-DD HH:mm:ss"
    },
    "formatter": "datetime",
    "formatterParams": {
        "format": "YYYY-MM-DD HH:mm:ss"
    }
},
{
    "title": "End Date",
    "field": "observationEndTime",
    "sorter": "date",
    "width": 150,
    "headerFilter": "input",
    "editor": "datetime",
    "editorParams": {
        "format": "YYYY-MM-DD HH:mm:ss",
         "inputFormat":"YYYY-MM-DD HH:mm:ss",
        "outputFormat":"YYYY-MM-DD HH:mm:ss"
    },
    "formatter": "datetime", 
    "formatterParams": { 
        "format": "YYYY-MM-DD HH:mm:ss"
    }
},

EDIT:
removing this stuff fixes the issues with the display:

    "formatter": "datetime", 
    "formatterParams": { 
        "format": "YYYY-MM-DD HH:mm:ss"

but still the output with the dt-picker is (german) language format ("DD-MM-YYYY HH:mm:ss").
I guess that is the reason for not getting the "cellEdited" event. So I think if I just can fix this it should work. But I ve no clue how to get "YYYY-MM-DD HH:mm:ss" back.

here the complete initial ui-tabulator code for anyone who wants to try / help:

{
    "height": "378px",
    "layout": "fitDataFill",
    "movableColumns": true,
    "responsiveLayout": "collapse",
    "pagination": true,
    "paginationSize": 10,
    "selectableRows": 1,      
    "index": "id",        
    "columns": [
        {
            "field": "id",
            "visible": false
        },     
        {
            "title": "Alert Date",
            "field": "requestDateTime",
            "sorter": "date",
            "width": 150,
            "headerFilter": "input",
            "editor": "datetime",
            "editorParams": {
                "format": "YYYY-MM-DD HH:mm:ss",
                "inputFormat":"YYYY-MM-DD HH:mm:ss",
                "outputFormat":"YYYY-MM-DD HH:mm:ss"
            }
        },
        {
            "title": "End Date",
            "field": "observationEndTime",
            "sorter": "date",
            "width": 150,
            "headerFilter": "input",
            "editor": "datetime",
            "editorParams": {
                "format": "YYYY-MM-DD HH:mm:ss",
                "inputFormat":"YYYY-MM-DD HH:mm:ss",
                "outputFormat":"YYYY-MM-DD HH:mm:ss"
            }
        }
    ],
    "initialSort": [
        {
            "column": "requestDateTime",
            "dir": "desc"
        }
    ]
}