Datepicker conflict: showing and hiding

[simivar]

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

[zkang93]

Having the same problem, any solutions or workaround for this bug?

[graftak]

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');
});

[rkorn86]

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

[DrZeiss]

I'm having similar issue where clicking on a date or closing or submitting the date produces this error: Uncaught TypeError: this.element.find(...).size is not a function in bootstrap-editable.min.js:6

Anyone found a solution or workaround?

[devlnt]

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

[DrZeiss]

Thanks for the suggestion but unfortunately, that did not solve my problem. :(

[sogani02]

same problem, any suggestions?

[rahulsharma841990]

@devlnt Solution works for me. Thanks!

[palashmon]

@devlnt css solution worked for me. Thanks :+1:

[iscguerrero]

user jquery version 2.x

[a13x3y]

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.

[frabanca]

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.

@a13x3y answere fixed the issue for me. Thanks man! (I'm using jQuery 3.2.1)

[fastesol]

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.

Thanks for saving me time. It fixed the issue. 👍

[melroy89]

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.

Properly somebody should create a PR for this.

[melroy89]

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.

Properly somebody should create a PR for this.

Ps. if the size() issue is fixed. The pop-up doesn't close anymore plus I can't see the icons and the Today button is still hidden :confounded: .

[cferrante]

Thanks @a13x3y:

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.

Works for me to prevent error when clicking outside the control.

BTW @danger89 when I instantiate the control like so...

$("#date_control_id").datepicker({ autoclose : true });

I don't have any issue with the control closing once I pick the date. Perhaps this will work for you?

@danger89 regarding

can't see icons

For showing the previous and next icons, I finally found a font awesome solution:

$.fn.datepicker.DPGlobal.template = $.fn.datepicker.DPGlobal.template.replace(/icon-/g, "fa fa-"); https://github.com/vitalets/x-editable/issues/435

Whew - hope this helps someone!