Question

http://tabulator.info/examples/4.1

上面的“可编辑数据”示例显示了对日期字段使用自定义编辑器的情况（链接中的示例为DOB）。早期制表器版本以及此处和Github中都存在类似的示例。结果显示的javascript日期选择器对大多数用户而言效果最佳，但并非对所有用户（即使在Chrome上也是如此）完美。因此，用户经常尝试的另一种方法是尝试将日期直接输入到单元格中。不幸的是，这是有问题的，就像链接的例子一样。更改月份和日期还不错-但是直接更改年份非常困难。有没有人有潜在的解决方案？我已经研究了从模糊/焦点/不同格式/“ flatpicker” /等等开始的所有内容，但是我还是空了。

Answer 1

获得全面的跨浏览器支持的最佳方法是创建一个使用第三方日期选择器库的自定义格式化程序，例如jQuery UI datepicker。日期选择器的正确选择将取决于您的需求和现有的前端框架。

在jQuery datepicker的情况下，自定义格式化程序可能看起来像这样（本示例使用标准输入编辑器，您会注意到在 onRendered 函数中jQuery datepicker的标准输入）：

var dateEditor = function(cell, onRendered, success, cancel, editorParams){
    var cellValue = cell.getValue(),
    input = document.createElement("input");

    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";

    onRendered(function(){
        input.style.height = "100%";
        $(input).datepicker(); //turn input into datepicker
        input.focus();
    });

    function onChange(e){
        if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value != cellValue){
            success(input.value);
        }else{
            cancel();
        }
    }

    //submit new value on blur or change
    input.addEventListener("change", onChange);
    input.addEventListener("blur", onChange);

    //submit new value on enter
    input.addEventListener("keydown", function(e){
        switch(e.keyCode){
            case 13:
            success(input.value);
            break;

            case 27:
            cancel();
            break;
        }
    });

    return input;
}

然后可以将其添加到列定义中的列中： {title：“ Date”，字段：“ date”，editor：dateEditor}

Answer 2

我听不懂Oli的建议。再说一遍，我可能是一个新手，可能会错过一些简单的事情。经过大量的试验和错误后，这是我最终创建的一种骇客方法-建立在Oli的onRender建议的基础上，然后使用datepicker的onSelect其余方式。

优点：无论用户单击单元格中的哪个位置，都会显示日期选择器-因此，用户不太愿意尝试手动输入。如果用户碰巧尝试手动输入，则可以这样做。不太理想：如果用户手动输入，日期选择器将不会消失，直到他/她单击其他位置。但不是最热门。

     //Date Editor//
var dateEditor = function(cell, onRendered, success, cancel, editorParams){

var cellValue = cell.getValue(),
    input = document.createElement("input");
    input.setAttribute("type", "text");

    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";

    input.value = typeof cellValue !== "undefined" ? cellValue : "";


    onRendered(function(){
    $(input).datepicker({

    onSelect: function(dateStr) {
      var dateselected = $(this).datepicker('getDate');
      var cleandate = (moment(dateselected, "YYYY-MM-DD").format("MM/DD/YYYY"));
      $(input).datepicker( "destroy" );
      cell.setValue(cleandate,true);
      cancel();

     },
   });
    input.style.height = "100%"; 

   });


    return input;
};

Answer 3

我使用bootstrap中的datepicker，这是我的代码

var dateEditor = function (cell, onRendered, success, cancel, editorParams) {
    //create and style input
    var editor = $("<input type='text'/>");
    // datepicker
    editor.datepicker({
        language: 'ja',
        format: 'yyyy-mm-dd',
        autoclose: true,
    }).on('changeDate', function() {
        if(editorParams != 'row'){
            editor.trigger('keyup');
        }else{
            editor.trigger('change');
        }
    });

    editor.css({
        "padding": "3px",
        "width": "100%",
        "height": "100%",
        "box-sizing": "border-box",
    });

    editor.val(cell.getValue());

    onRendered(function(){
        editor.focus();
    });

    editor.on("blur", function (e) {
        e.preventDefault();
        if(editor.val() === '') {
            success(cell.getValue());
        }
        else {
            //submit new value on change
            editor.on("change", function (e) {
                success(editor.val());
            });

        }
    });

    return editor;
}

如何在单元格中编辑制表符日期？

3 个答案: