javascript - posteriores - jquery datetimepicker example

Bootstrap datepicker no se cierra automáticamente después de elegir una fecha

Question

Yo uso el último datesticker.js Bootstrap. Todo funciona bien, excepto que cuando selecciono una fecha del menú desplegable, no se cierra automáticamente. Busqué en la web e intenté usar la siguiente función en mi javascript como la siguiente:

 $(''#selectDate'').datepicker({
    autoclose: true
}).on(''changeDate'', function (ev) {
    (ev.viewMode == ''days'') ? $(this).datepicker(''hide'') : '''';      
});

pero cuando uso las herramientas de Google Chrome Dev, me di cuenta de que ev.viewmode no estaba definido. No estoy seguro de cómo avanzar.

Answer 1

1. Simplemente abre el bootstrap-datepicker.js
2. find: var defaults = $ .fn.datepicker.defaults (Línea 1391 en mi caso)
3. establecer autoclose: verdadero

Guarde y actualice su proyecto y esto debería hacer.

Answer 2

// 10000% de trabajo Vaya al archivo bootstrap-datepicker.js

Busca esto:

''mousedown touchstart'': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },

Answer 3

Cuando se desplaza sobre el div con la clase defaultdatepicker. Aparecerá el control de calendario. En Mouseleave desaparecerá.

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: ''dd/mm/yyyy'',
            todayHighlight: ''TRUE'',
            autoClose: true,
        });

        $(''#datepicker'').css({ "opacity": "1" });
    });

    $(''.defaultdatepicker'').on(''mouseleave'', function () {
        $(''.datepicker'').fadeOut(function () {
            $(''.formattedStartDate'').attr(''class'', ''formattedStartDate'');

            $(''#datepicker'').css({ "opacity": "0" });
        });
    });

Answer 4

Esto es trabajo para mí.

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on(''change'', function (ev) {
    $(this).datepicker(''hide'');
});

Answer 5

Esto funciono para mi

$(".date-picker").change(function() { 
    setTimeout(function() {
        $(".date-picker").datepicker(''hide''); 
        $(".date-picker").blur();
    }, 50);
});    

Answer 6

Ninguno de los anteriores funcionó para mí, sin embargo, al anular la opción predeterminada del selector de fecha funcionó a la perfección, y es de una sola línea:

$.fn.datepicker.defaults.autoclose = true;

Answer 7

Para mí, resultó ser un error tipográfico en la documentación de bootstrap-datepicker. En lugar de "autoclose: true", es "autoClose: true".

Espero eso ayude.

Answer 8

Prueba esto:

$(''#selectDate'').datepicker().on(''changeDate'', function(ev)
{                 
     $(''.datepicker'').hide();
});

Answer 9

Prueba esto:

$(''#selectDate'').datepicker()
.on(''changeDate'', function(ev){                 
    $(''#selectDate'').datepicker(''hide'');
});

Actualizar:

autoclose funciona bien cuando usas la versión actualizada de datepicker presente en github:

https://github.com/eternicode/bootstrap-datepicker

Answer 10

Si tiene varios cuadros de texto para los que ha aplicado el selector de fechas, entonces la solución anterior puede causar problemas. Por favor, intente esto en su lugar,

$(''.datepicker'').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on(''changeDate'', function (ev) {
     $(this).datepicker(''hide'');
});

Mira esto, https://github.com/eternicode/bootstrap-datepicker/issues/500

Nota: No olvide que estamos usando el selector de clase de jQuery, por lo que debe aplicar la clase datepicker a su cuadro de texto.

Answer 11

Agregué autoclose: verdadero, (con una coma al final y funciona)

 $(''.datepicker'').datepicker({
    format: ''dd/mm/yyyy'',
    todayHighlight:''TRUE'',
    autoclose: true,
})