Блог

Как мне создать пользовательский редактор выбора даты и времени вместо простого редактора выбора даты?

Я создал средство выбора даты и времени из библиотеки jquery-ui с помощью дополнения jquery-ui-timepicker независимо, но я не могу заставить это работать с пользовательским редактором tabulator.

Любая помощь была бы отличной. Спасибо!

Документация табулятора включает руководство по созданию пользовательских редакторов

По сути, важные моменты заключаются в том, что он должен возвращать узел DOM, то есть должен вызывать функцию ‘success’, когда значение было установлено, и ‘cancel’, если значение не изменилось.

В случае виджета пользовательского интерфейса jquery вам также необходимо убедиться, что вы создаете экземпляр виджета внутри onRendered обратного вызова, который запускается при добавлении элемента в DOM, иначе jQuery выдаст ошибку.

В качестве основного примера на основе встроенного редактора ввода:

 var dateFormatter = function(cell, onRendered, success, cancel, editorParams){
    var cellValue = cell.getValue(),
    var input = document.createElement("input"); // define input element
    
    //assign current cell value to input element
    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    //handle loss of focus to the input element and changes in value
    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") amp;amp; input.value !== "") || input.value !== cellValue){
            success(input.value); //if value has changed save value 
        }else{
            cancel(); //otherwise cancel edit
        }
    }
    
    //submit new value on blur or change
    input.addEventListener("change", onChange);
    input.addEventListener("blur", onChange);

    //instantiate the jQuery widget
    onRendered(function(){
        $(input).datepicker({
            //date picker setup options
        });
    });

    //return input element
    return input;
}

 

(Использование события размытия может вызвать проблемы, если вам нужно щелкнуть элементы управления для виджета jQuery, поэтому вы можете захотеть прокомментировать прослушиватель событий размытия)

(Также событие изменения может быть не тем, что вам нужно, в зависимости от варианта использования, но я считаю, что виджет jquery datepicker имеет onSelect обратный вызов, который вы могли бы использовать для запуска функции успеха)

Затем вам нужно будет прикрепить средство форматирования к столбцу в его определении столбца:

 {title:"Date", field:"date", formatter:dateFormatter}