натолкнулся на статью про ограниченный выбор дат в Tabulator (
https://www.soum.co.jp/misc/tabulator-tips/25/).
Ссылка на Табулятор (
tabulator.info/docs/5.2/edit#edit-custom), но у меня иной код немного редактора и он работает.
при попытке внедрить в свой код, не работает. Нет выбора ограниченного дат, можно выбрать любую дату.
в связи с перепробованными попытками множественными, отсутствия результата - обращаюсь к Вам, профессионалы, за советом, как связать свое и материал, чтобы ограниченный выбор дат в связке работал.
//Create Date Editor
var dateEditor = function(cell, onRendered, success, cancel){
//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
//create and style input
var cellValue = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd"),
input = document.createElement("input");
input.setAttribute("type", "date");
input.style.padding = "4px";
input.style.width = "100%";
input.style.boxSizing = "border-box";
input.value = cellValue;
onRendered(function(){
input.focus();
input.style.height = "100%";
});
function onChange(){
if(input.value != cellValue){
success(luxon.DateTime.fromFormat(input.value, "yyyy-MM-dd").toFormat("dd.MM.yyyy"));
}else{
cancel();
}
}
//submit new value on blur or change
input.addEventListener("blur", onChange);
//submit new value on enter
input.addEventListener("keydown", function(e){
if(e.keyCode == 13){
onChange();
}
if(e.keyCode == 27){
cancel();
}
});
return input;
};
var tabledataMain = [
{
id:1,
dbw:"01.08.2021",
dfw: "10.08.2022",
},
];
//Build Tabulator
var table = new Tabulator("#main-table", {
height:311,
data:tabledataMain,
layout:"fitColumns",
history:true,
columns:[
{title: "ID", field: "id", formatter:"rownum", hozAlign:"center", vertAlign:"middle", width:60, frozen: true, visible:false, download:true},
{title: "Дата начальная", field: "dbw", headerHozAlign:"center", vertAlign:"middle", width: 250, hozAlign:"center", width:140, editor:dateEditor},
{title: "Дата конечная", field: "dfw", headerHozAlign: "center", vertAlign: "middle", width: 250, hozAlign:"center", width:140, editor:dateEditor},
],
});