Bootstrap-datepicker: Input field disappears after selecting a date

[frizbee]

Can't find solution
Use with joomla 3.1 + Bootstrap

Is anyone had anything similar, please help.

[alaczi]

Same here, with Prado framework built in prototype.js, noconflict mode on jquery.

[alaczi]

Removing this._trigger('hide'); from the hide function last line helped but I dont think this is a proper solution.

[jzahedieh]

I have the same issue with magento and prototype.js with jQuery in no conflict mode.

I thought it might have something to do with the no conflict part of the documentation https://github.com/eternicode/bootstrap-datepicker#no-conflict

$("#datepicker").datepicker();
var datepicker = $("#datepicker").datepicker.noConflict();
$("#datepicker").bootstrapDP = datepicker;

But no luck, not getting any console warnings, but still hiding.

[jhenderson]

Just came across the same issue. I got around it using display: block !important

[frizbee]

solution is comment this line "type: 'hide'," OR display: block !important
both this ways work for me.
Thanks

hide: function(){
            this.picker.hide();
            $(window).off('resize', this.place);
            this.viewMode = this.startViewMode;
            this.showMode();
            if (!this.isInput) {
                $(document).off('mousedown', this.hide);
            }
            //this.set();
            this.element.trigger({
                //type: 'hide',
                date: this.date
            });
        },

[alaczi]

I think we experiencing the same described here: https://github.com/twitter/bootstrap/issues/6921

[sjenkinsdc]

I commented out "type: 'hide'," and it now works as expected.

[addorange]

Had same issue here once again, using bootstrap 2.3 and current eternicode datepicker. Solved it by commenting out "this._trigger('hide');". Seems to be colliding with other directives in bootstap. Maybe does not appear anymore in bootstrap 3.x

hide: function(e){
  if(this.isInline) return;
  if (!this.picker.is(':visible')) return;
  this.picker.hide().detach();
  this._detachSecondaryEvents();
  this.viewMode = this.o.startView;
  this.showMode();

  if (
    this.o.forceParse &&
    (
      this.isInput && this.element.val() ||
      this.hasInput && this.element.find('input').val()
    )
  )
    this.setValue();
  // this._trigger('hide');
},

[eternicode]

This happens when some library gives DOM elements a hide method -- jquery's method of triggering events attempts to call the DOM method if it exists, thus triggering whatever custom hide method the lib gave DOM elements. The solution? Don't use invasive libs :wink:

[chanified]

Had the same problem, I just came up with a quick and nasty hack if anyone else comes across this problem. Unfortunately I'm working on a mootools based project which to me is invasive and troublesome all the way as eternicode mentioned. Heres the fix well for my case anyway:

    jQuery.noConflict();
    (function($) {
        $(function() {

            $('#degree-element > input').datepicker({
                format: "dd/mm/yy",
                startView: 2,
                forceParse: false,
                minViewMode: 1,
                daysOfWeekDisabled: "0,1,2,3,4,5,6",
                autoclose: true,
                todayHighlight: true
            })
            .on('hide',function(){var a = $(this);setTimeout(function(){a.show();},2);})
            ;

        });
    })(jQuery);

[SerenadeX]

I'm dealing with this problem right now, mainly cause I am working on a magento app which uses prototype.js. Can't help that one. It would be nice if it didn't hide the element. I hate to have to use a hacky solution to make this awesome tool work.

[jonerd]

I had the same issue. Just rename this._trigger('hide') to this._trigger('hideDatepicker') to prevent the input field from disappearing. Accordingly you can then listen for 'hideDatepicker' event instead for 'hide' event.

[gowrizrh]

using jQuery 3.3.x with proto 1.7, input field disappears after clicking datepicker/timepicker.