Tabulator: How do I use the "datepicker" in a grid?

Created on 5 Apr 2017 · 3Comments · Source: olifolkerd/tabulator

I want to use calendar in tabulator grid.
I tried to something a lot.
Help me.
=============== this code not working =================
var editOption = function(cell, value){ var editor=$("<input type=text onfocus= this.select() >");

* editor.datepick.datepicker(); * <=not working~!!

editor.css({
    "padding":"3px",
    "width":"100%",
})        
.val(value);
if(cell.hasClass("tabulator-cell")){
    setTimeout(function(){
        editor.focus();
    },100);
}   
editor.on("change blur", function(e){    
   cell.trigger("editval", editor.val());
});        

editor.on("keydown", function(e){
    if(e.keyCode == 13){
        cell.trigger("editval", editor.val());
    }
});

return editor;

};

columns:[
{title:"work date", field:"work_date", sorter:"date", align:"center", width:100 ,editor:editOption},
],

Question - Ask On Stack Overflow

Source

soo1025

Most helpful comment

Hey,

Thanks for getting in touch, here is a jquery datepicker editor you can use:

var dateEditor = function(cell, value){
    //create and style input
    var input = $("<input type='text'/>");

    input.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });

    input.css({
        "border":"1px",
        "background":"transparent",
        "padding":"4px",
        "width":"100%",
        "box-sizing":"border-box",
    });

    input.val(value);

    setTimeout(function(){
        input.focus();
    },100)

    var inputBlur = function(e){
        if(e.target != input[0]){
            if( $(e.target).closest(".ui-datepicker").length == 0){
                $(document).off("mousedown", inputBlur);
                cell.trigger("editval", input.val());
            }
        }
    }

    $(document).on("mousedown", inputBlur);

    //submit new value on blur
    input.on("change", function(e){
        $(document).off("mousedown", inputBlur);
        cell.trigger("editval", input.val());
    });

    input.on("click", function(e){e.stopPropagation()});

    //submit new value on enter
    input.on("keydown", function(e){
        if(e.keyCode == 13){
            $(document).off("mousedown", inputBlur);
            cell.trigger("editval", input.val());
        }
    });

    return input;
},

Then just assign it to a column in the column definition array:

$("example-table").tabulator({
    columns:[
        {"title":"date", "field":"date", editor:dateEditor },
    ]
});

Let me know if that helps.

Cheers

Oli

olifolkerd on 9 Apr 2017

🎉1 👍1

All 3 comments

Hey,

Thanks for getting in touch, here is a jquery datepicker editor you can use:

var dateEditor = function(cell, value){
    //create and style input
    var input = $("<input type='text'/>");

    input.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
    });

    input.css({
        "border":"1px",
        "background":"transparent",
        "padding":"4px",
        "width":"100%",
        "box-sizing":"border-box",
    });

    input.val(value);

    setTimeout(function(){
        input.focus();
    },100)

    var inputBlur = function(e){
        if(e.target != input[0]){
            if( $(e.target).closest(".ui-datepicker").length == 0){
                $(document).off("mousedown", inputBlur);
                cell.trigger("editval", input.val());
            }
        }
    }

    $(document).on("mousedown", inputBlur);

    //submit new value on blur
    input.on("change", function(e){
        $(document).off("mousedown", inputBlur);
        cell.trigger("editval", input.val());
    });

    input.on("click", function(e){e.stopPropagation()});

    //submit new value on enter
    input.on("keydown", function(e){
        if(e.keyCode == 13){
            $(document).off("mousedown", inputBlur);
            cell.trigger("editval", input.val());
        }
    });

    return input;
},

Then just assign it to a column in the column definition array:

$("example-table").tabulator({
    columns:[
        {"title":"date", "field":"date", editor:dateEditor },
    ]
});

Let me know if that helps.

Cheers

Oli

olifolkerd on 9 Apr 2017

🎉1 👍1

thanks a lot. ^^;

You have a very good ability.

I tried to another way. your code is very simple and good.^^;

thank you very much again.

---------------------------- source

/////////////////datepicker/////////////////////////
var lay_pop = $('#caldiv');
var cpCell=null;

$("#caldiv").datepicker({
dateFormat : "mm-dd",
onSelect: function (dateText) {
cpCell.trigger("editval", dateText);
$('#caldiv').hide();
}
});

$(document).mouseup(function (e) {
if (!lay_pop.is(e.target) && lay_pop.has(e.target).length === 0){
lay_pop.css("display","none");
}
});
//////////////////////////////////////////////////////////

var editOption = function(cell, value){

var editor=$("<input type=text onfocus='this.select()'>");

editor.css({
    "padding":"3px",
    "width":"100%",
})

//Set value of editor to the value of the cell
.val(value);

//set focus on the select box when the editor is selected (timeout

allows for editor to be added to DOM)
if(cell.hasClass("tabulator-cell")){
setTimeout(function(){
editor.focus();
},100);
}

//==================== append this code

editor.on("focus",function(e){
var pos = cell.position();
cpCell=cell;
lay_pop.css('top', (pos.top-350) + 'px');
lay_pop.css('left', (pos.left) + 'px');
lay_pop.fadeIn();
});

//return the editor element
return editor;

};

-------------------------------------------------finish------------------------------------------------------

2017-04-09 23:25 GMT+09:00 Oli Folkerd notifications@github.com:

Hey,

Thanks for getting in touch, here is a jquery datepicker editor you can
use:

var dateEditor = function(cell, value){
//create and style input
var input = $("");

input.datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy",
});

input.css({
"border":"1px",
"background":"transparent",
"padding":"4px",
"width":"100%",
"box-sizing":"border-box",
});

input.val(value);

setTimeout(function(){
input.focus();
},100)

var inputBlur = function(e){
if(e.target != input[0]){
if( $(e.target).closest(".ui-datepicker").length == 0){
$(document).off("mousedown", inputBlur);
cell.trigger("editval", input.val());
}
}
}

$(document).on("mousedown", inputBlur);

//submit new value on blur
input.on("change", function(e){
$(document).off("mousedown", inputBlur);
cell.trigger("editval", input.val());
});

input.on("click", function(e){e.stopPropagation()});

//submit new value on enter
input.on("keydown", function(e){
if(e.keyCode == 13){
$(document).off("mousedown", inputBlur);
cell.trigger("editval", input.val());
}
});

return input;
},

Then just assign it to a column in the column definition array:

$("example-table").tabulator({
columns:[
{"title":"date", "field":"date", editor:dateEditor },
]
});

Let me know if that helps.

Cheers

Oli

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/252#issuecomment-292789011,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVi0HsPntJ70VbdU5c_qyxqoFpFiVZsvks5ruOpjgaJpZM4Mzv1k
.

soo1025 on 9 Apr 2017

👍1

Hey,

Thanks for getting in touch, here is a jquery datepicker editor you can use:

var dateEditor = function(cell, value){
  //create and style input
  var input = $("<input type='text'/>");

  input.datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "dd/mm/yy",
  });

  input.css({
      "border":"1px",
      "background":"transparent",
      "padding":"4px",
      "width":"100%",
      "box-sizing":"border-box",
  });

  input.val(value);

  setTimeout(function(){
      input.focus();
  },100)

  var inputBlur = function(e){
      if(e.target != input[0]){
          if( $(e.target).closest(".ui-datepicker").length == 0){
              $(document).off("mousedown", inputBlur);
              cell.trigger("editval", input.val());
          }
      }
  }

  $(document).on("mousedown", inputBlur);

  //submit new value on blur
  input.on("change", function(e){
      $(document).off("mousedown", inputBlur);
      cell.trigger("editval", input.val());
  });

  input.on("click", function(e){e.stopPropagation()});

  //submit new value on enter
  input.on("keydown", function(e){
      if(e.keyCode == 13){
          $(document).off("mousedown", inputBlur);
          cell.trigger("editval", input.val());
      }
  });

  return input;
},

Then just assign it to a column in the column definition array:

$("example-table").tabulator({
    columns:[
        {"title":"date", "field":"date", editor:dateEditor },
    ]
});

Let me know if that helps.

Cheers

Oli

@olifolkerd
There is an error in console while applying your code:

jquery-ui.min.js:8 Uncaught Missing instance data for this datepicker
_getInst @ jquery-ui.min.js:8
_selectDay @ jquery-ui.min.js:9
selectDay @ jquery-ui.min.js:9
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2

The date picker appears but no date gets entered in the table cell.
I think it's related to jQuery UI picker which we are using here. Maybe, the object selected is been destroyed. destroyed.