Somehow that ‘.editable-date’ class did not allow me to click on the td column. It turned out that this was the problem. What I did is to remove the class and add it again at the end.

I have an HTML table with 3 columns. In the third column if I click on it, using some JQuery a date input appears but I can not make it functional. If I click on it the calendar doesn`t show up, even if the day, month, year can be selected. If I press F4 key, the calendar shows as it should.

This is the code that I used:

        $('body').on('click','.editable-date', function() {
            if($(this).children("input").length > 0)
                return false;
            var tdObj = $(this);
            var preText = tdObj.html();
            var inputObj = $("<input type='date' id = 'picker' />");
            tdObj.html("");
            inputObj.width('auto')
                .height('auto')
                .css({border:"0px",fontSize:"15px"})
                .val(preText.trim())
                .appendTo(tdObj)
                .trigger("focus")
                .trigger("select");
            
            inputObj.keyup(function(event){
                 if (27 == event.which){  // press ESC-key
                    tdObj.html(preText);
                }
              });
            
            $('#picker').change(function(){
                    var text = $(this).val();
                    tdObj.html(text);
                });
          
        });

Any help would be very welcome!