-
Notifications
You must be signed in to change notification settings - Fork 874
Open
Description
Website Page
Custom Editors
Describe the issue
To get this example working, I had to make the change below.
var dateEditor = function(cell, onRendered, success, cancel, editorParams){
//cell - the cell component for the editable cell
//onRendered - function to call when the editor has been rendered
//success - function to call to pass thesuccessfully updated value to Tabulator
//cancel - function to call to abort the edit and return to a normal cell
//editorParams - params object passed into the editorParams column definition property
//create and style editor
var editor = document.createElement("input");
editor.setAttribute("type", "date");
//create and style input
editor.style.padding = "3px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
//Set value of editor to the current value of the cell
editor.value = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd")
//set focus on the select box when the editor is selected
onRendered(function(){
editor.focus();
editor.style.css = "100%";
});
//when the value has been set, trigger the cell to update
function successFunc(){
- success(luxon.DateTime.fromFormat(cell.getValue(), "yyyy-MM-dd").toFormat("dd/MM/yyyy"));
+ success(luxon.DateTime.fromFormat(editor.value, "yyyy-MM-dd").toFormat("dd/MM/yyyy"));
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
//return the editor element
return editor;
};
//in your column definition for the column
{title:"Birthday", field:"dob", editor:dateEditor}Metadata
Metadata
Assignees
Labels
No labels