# UI-Tabulator node Date time picker
**URL:** https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591
**Category:** Dashboard
**Created:** [13 January 2025 19:42 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591 "2025-01-13T19:42:26Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)
#### Post date: [13 January 2025 19:42 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591/1 "2025-01-13T19:42:26Z")
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.
that s what I ve for this field:
```auto
{
"title": "Alert Date",
"field": "startDateTime",
"sorter": "date",
"width": 150,
"headerFilter": true,
"editor": "input"
},
```
---
### Author:  [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [14 January 2025 08:58 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591/2 "2025-01-14T08:58:09Z")
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:
```auto
{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()}},
```
---
### Author:  [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)
#### Post date: [14 January 2025 10:17 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591/3 "2025-01-14T10:17:28Z")
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 😉
```auto
{
"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:
EDIT: Damn, I think I was talking BS since the picker seems only to be available for the sorting / head.
---
### Author:  [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)
#### Post date: [14 January 2025 11:35 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591/4 "2025-01-14T11:35:36Z")
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").
current code:
```auto
},
{
"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:
```auto
"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:
```auto
{
"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"
}
]
}
```
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [13 February 2025 11:35 UTC](https://discourse.nodered.org/t/ui-tabulator-node-date-time-picker/94591/5 "2025-02-13T11:35:43Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.