Задать вопрос
@giraphe

Tabulator мин/макс дата выбор?

натолкнулся на статью про ограниченный выбор дат в 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},
    ],
});
  • Вопрос задан
  • 55 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы