Search code examples
x-editablebootstrap-datetimepicker

X-editable with datetimepicker

I am trying to configure x-editatable with datetimepicker. When I click to edit the date and time x-editatable returns the following error:

Uncaught TypeError: Cannot read property 'addClass' of undefined
    at Popup.show (bootstrap-editable.js:1091)
    at Editable.show (bootstrap-editable.js:1802)
    at Editable.toggle (bootstrap-editable.js:1824)
    at Editable.<anonymous> (bootstrap-editable.js:1547)
    at HTMLAnchorElement.r (jquery.js:10502)
    at HTMLAnchorElement.dispatch (jquery.js:5237)
    at HTMLAnchorElement.m.handle (jquery.js:5044)

The error is from this information:

this.tip().addClass(this.containerClass);

My code:

<a href="javascript:;" id="protocol-created" data-type="datetime" data-pk="1" data-url="/post" data-placement="right" title="Open">
    15/03/2013 12:45
</a>

JS

$('#protocol-created').editable({
    format: "yyyy-mm-dd hh:ii",
    viewformat: "dd/mm/yyyy hh:ii",
    validate: function (a) {
        if (a && 10 === a.getDate()) return "Day cant be 10!";
    },
    datetimepicker: {
        rtl: false,
        todayBtn: "linked",
        weekStart: 1
    }
});

I am using the bootstrap-3 version of x-editable and the version of Jquery is 3.4.1

Solution

  • I solved the problem by updating the plugin to the bootstrap version 4 https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable