x-editable: Datepicker conflict: showing and hiding

x-editable has a conflict with bootstrap datepicker because of which datepicker does not show at all.

Stack

jQuery 3.2.1 moment.js 2.18.1 Bootstrap 3.3.7 Datepicker 1.7.1 x-editable 1.5.3

Examples

jsFiddle with error: https://jsfiddle.net/szj3Lnk2/3/ When you click on input datepicker’s inside div does not show because of this line in bootstrap-editable.css (line 269):

.datepicker > div {
  display: none;
}

jsFiddle without x-editable, datepicker is shown after clicking on input: https://jsfiddle.net/sy5gzvzt/

Solution with other error

When I’ve overwritten this CSS line both datepickers show on click but the main one (from input) does not hide: https://jsfiddle.net/6pmezf5w/1/

Error: Uncaught TypeError: this.element.find(...).size is not a function

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 4
Comments: 16

Most upvoted comments

In some issue, this problem can be solved by overwrite .datepicker > div { display: inherit; }

+32

devlnt on Jan 4, 2018

function “size()” is deprecated in jquery >1.8. for fix this problem use “length”. how to fix: replace all “size()” to “length” in your js file.

+10

a13x3y on Jan 12, 2019

Same problem here, can someone please fix this?

I use this ‘fix’ for now but i’m not sure it works in all situations. Maybe this can help somebody untill the issue is solved:

$(dateRangeStart).datepicker({<your options>}).on('show', function(e) {
    $('.datepicker > div:first-of-type').css('display', 'initial');
});

graftak on Sep 28, 2017

Same problem exists with the datetimepicker addon from http://eonasdan.github.io/bootstrap-datetimepicker

rkorn86 on Oct 26, 2017