2

http://tabulator.info/examples/4.1

上面的可编辑数据示例显示了对日期字段使用自定义编辑器（链接中的示例是 DOB）。类似的例子存在于早期的制表器版本以及这里和 Github。生成的 javascript 日期选择器适用于大多数用户，但不是所有用户（即使在 Chrome 上也是如此）。因此，用户经常尝试的替代方法是尝试将日期直接输入到单元格中。但不幸的是，这是有问题的——与链接示例一样。更改月份和日期并不算太糟糕 - 但直接更改年份非常困难。有没有人有潜在的解决方案？我已经探索了从模糊/焦点/不同格式/“flatpicker”/等的所有内容 - 但我来了空。

4

3 回答 3

2

获得完全跨浏览器支持的最佳方法是创建一个使用第三方日期选择器库的自定义格式化程序，例如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", field:"date", editor:dateEditor}

于 2018-11-22T21:57:52.167 回答
0

我使用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;
}
于 2019-04-17T04:31:50.273 回答
0

我无法得到 Oli 建议的工作。再说一次，我可能会错过一些简单的东西，因为我更像是一个新手。经过大量的反复试验，这是我最终创建的一种 hack 方法——建立在 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;
};
于 2018-11-27T22:59:46.830 回答