restringir - jQuery UI datepicker no se oculta cuando se hace clic fuera

jquery datepicker restringir fechas

Question

Encontré un problema con jQuery UI Datepicker en mi sitio.

Cuando hago clic en la entrada, muestra un selector de fecha correctamente. Sin embargo, cuando no selecciono ninguna fecha y simplemente hago clic fuera del elemento, no oculta el selector de fecha como esperaba.

Cuando presiono la tecla Esc, desaparece, cuando selecciono un día desaparece pero cuando hago clic fuera permanece ahí.

¿Hay alguien que sea capaz de encontrar el problema?

Gracias por adelantado :)

Enlace: http://bit.ly/SFeuzp

Answer 1

Aquí está mi solución:

var datePickerHover = false;

$(document).on({
    mouseenter: function (e) 
    {
        datePickerHover = true;
    },
    mouseleave: function () 
    {
        datePickerHover = false;
    }
}, ".datepicker");

$(document).on(''mouseup'',''html'',function()
{
    if(datePickerHover == false) $(''.datepicker'').hide();
});

Answer 2

Aquí hay una solución modificada que funcionó para mí:

$(".hasDatepicker").each(function (index, element) {
    var context = $(this);
    context.on("blur", function (e) {
        // The setTimeout is the key here.
        setTimeout(function () {
            if (!context.is('':focus'')) {
                $(context).datepicker("hide");
            }
        }, 250);        
    });        
});

Answer 3

Aquí hay una versión más corta del código anterior, un poco más fácil de leer:

$(document).click(function(e) { 
    if (!$(e.target).parents(''.ui-datepicker'').length)
        $(''.hasDatepicker'').datepicker(''hide'');
});

Answer 4

Buscando aquí mejores soluciones que las que tenía, pero creo que me gusta mi solución

$(function() {
  $(".datepicker").datepicker();

  $(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
    event.stopPropagation();
  });

  $("body").bind("click touchstart", function(event) {
    $(''.ui-datepicker'').hide();
    $(''.hasDatepicker'').blur();
  });
});

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="datepicker"/>

Answer 5

En el método de inicio para la inicialización del calendario, en el archivo js encuentre el div en el que se encuentra su calendario abierto. Como tengo

div.className="calendar-box";

// Estoy teniendo datepicker en el elemento "#container"

$ (documento) .unbind (''clic''). bind ("click", function (e) {

if($(e.target).parents(".calendar-box").length == 0 && (e.target).id != ''container'')
{
       //code to hide calendar..
}   });                 

Answer 6

Esta es mi solución ..

a continuación puede encontrar este código con fusionado si () s

var datepickerHideFix = function() {

$(document).on("click", function (e) {

    var elee = $(e.target);

    if (!elee.hasClass(''hasDatepicker'')) {

        if (elee.isChildOf(''.ui-datepicker'') === false) {

            if (elee.parent().hasClass(''ui-datepicker-header'') === false) {

                $(''.hasDatepicker'').datepicker(''hide'');
            }
        }
    }

    e.stopPropagation();
});
};

Fusionado si () s

var datepickerHideFix = function() {

$(document).on("click", function (e) {

    var elee = $(e.target);

    if (!elee.hasClass(''hasDatepicker'') &&
        elee.isChildOf(''.ui-datepicker'') === false &&
        elee.parent().hasClass(''ui-datepicker-header'') === false) {

        $(''.hasDatepicker'').datepicker(''hide'');
    }

    e.stopPropagation();
});
};

Answer 7

Modifiqué ligeramente el código de @SaraVanaN y se parece a esto:

$(document).on("click", function(e) {
    var elem = $(e.target);
    if(!elem.hasClass("hasDatepicker") && 
        !elem.hasClass("ui-datepicker") && 
        !elem.hasClass("ui-icon") && 
        !elem.hasClass("ui-datepicker-next") && 
        !elem.hasClass("ui-datepicker-prev") && 
        !$(elem).parents(".ui-datepicker").length){
            $(''.hasDatepicker'').datepicker(''hide'');
    }
});

Cambié esta línea $(document).on("click", function(e) { pero no importa cómo lo haga con .on("click") o .click() y esta línea !$(elem).parents(".ui-datepicker").length tomé de .parent() funcionó para mí, debes volver a revisar la página web del .parent() de .parent() , porque ahora, para mí, cuando haces clic en una fecha, aparece el div que aparece con las fechas se cierran al instante y no puedes elegir ninguna de las fechas ...

Answer 8

Si desea, no oculte el calendario cuando haga clic en el mes siguiente / anterior, aplique el siguiente código.

$(document).click(function(e) { 
    var ele = $(e.toElement); 
    if (!ele.hasClass("hasDatepicker") && 
        !ele.hasClass("ui-datepicker") && 
        !ele.hasClass("ui-icon") && 
        !ele.hasClass("ui-datepicker-next") && 
        !ele.hasClass("ui-datepicker-prev") && 
        !$(ele).parent().parents(".ui-datepicker").length)
       $(".hasDatepicker").datepicker("hide"); 
});

Answer 9

Yo estaba teniendo el mismo problema. Parece que esto está solucionado y solucionado en la última versión de desarrollo, que puede obtener desde aquí:

http://eternicode.github.io/bootstrap-datepicker/

Estoy usando los valores por defecto, que parecen funcionar. Debe haber habido un error en las versiones anteriores.

Answer 10

Sus hasDatepicker tienen la clase hasDatepicker , así que intente esto:

$(".hasDatepicker").blur(function(e) { $(this).datepicker("hide"); });

Estoy 99% seguro de que funcionará!

Y, para tu información, si quieres que sea dinámico (se aplica a las entradas creadas después), puedes usar .on

$(".hasDatepicker").on("blur", function(e) { $(this).datepicker("hide"); });

ACTUALIZACIÓN ^{(PS, para usar lo siguiente, elimine completamente lo anterior de su código)}

Para responder a su comentario, la siguiente no puede ser la mejor solución, pero a través de prueba y error (en su sitio, usando la consola) ¡funciona! Y es relativamente corto en comparación con otras formas alternativas en las que pensé.

$(document).click(function(e) { 
    var ele = $(e.toElement); 
    if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length)
       $(".hasDatepicker").datepicker("hide"); 
});

Como una linea

$(document).click(function(e) { var ele = $(e.toElement); if (!ele.hasClass("hasDatepicker") && !ele.hasClass("ui-datepicker") && !ele.hasClass("ui-icon") && !$(ele).parent().parents(".ui-datepicker").length) $(".hasDatepicker").datepicker("hide"); });

El problema que encontré fue poder decir cuándo se hizo clic en el ícono de espacio, no quería cooperar, por lo que el control adicional tiene clases

Answer 11

$(function() {
  $(".datepicker").datepicker();

  $(".hasDatepicker, .ui-datepicker, .ui-datepicker-trigger").click(function(event) {
    event.stopPropagation();
  });

  $("body").bind("click touchstart", function(event) {
    $(''.ui-datepicker'').hide();
    $(''.hasDatepicker'').blur();
  });
});

<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="datepicker"/>

Answer 12

$("body").on("click", function (e) {
    var elem = e.target.offsetParent;
    if (elem &&
       !elem.classList.contains("ui-datepicker") &&
        !elem.classList.contains("ui-datepicker-calendar") &&
        !elem.classList.contains("ui-datepicker-header") &&
        !elem.hasAttribute("scope") &&
        !elem.classList.contains("ui-datepicker-week-end") &&
        !elem.classList.contains("input-cal-wrapper") &&
        !elem.classList.contains("picto-cal")
    ) {
        $(".hasDatepicker").datepicker("hide");
    }
});