1

estoy usando datetimepicker de jquery, me gustaria poder ejecutar una función al cambiar la fecha, si lo hago al cambiar el div, cuando este pierde el foco, me dispara también la funcion. Necesito que ejecute la funcion solo cuando cambie la fecha y no al perder el foco.

$(document).ready(function(){
    datepicker();
})  




function datepicker() {
    $(".datepicker").datetimepicker({
        format: "d-m-Y",
        language: 'es',
        timepicker: false,
    });
    $.datetimepicker.setLocale('es');
}

$("#idCalendario").on( "change", function() {    
    alert();    
});

<input  type="text" id="idCalendario" value=""  class="form-control datepicker input-sm "  >

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input  type="text" id="idCalendario" value=""  class="form-control datepicker input-sm "  >

2
  • ¿Qué función lanzas? ¿Cómo la enlazas con el datepicker? Commented el 6 sept. 2018 a las 10:27
  • Buenas, he editado la pregunta, he puesto un alert como ejemplo, en esta caso cada vez que el div cambia, me ejecuta el alert pero cuando le doy a aceptar al alert, vuelve a ejecutarse el alert y asi sin parar Commented el 6 sept. 2018 a las 10:36

2 respuestas 2

5

Para responder a tu pregunta, vamos a hacer una pequeña investigación basada en tu código.

Paso 1: Leer la API

Para ello vamos a https://xdsoft.net/jqplugins/datetimepicker/. La verdad es que la documentación es mejorable, pero encontramos una serie de eventos interesantes:

  • onChangeDateTime: Evento desencadenado cuando la fecha del control es modificada.
  • onClose: Evento desencadenado al ocultar el calendario del control.
  • onShow: Evento desencadenado al mostrar el mensaje del control.

Paso 2: Probar la API en tiempo de ejecución

Ahora construimos un pequeño ejemplo e investigamos qué ocurre al seleccionar una fecha:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script>
    $(document).ready(function() {
        $('#idCalendario').datetimepicker({
            onChangeDateTime: function(ct, $input) {
                console.log('onChange: ' + $input.val());
            },
            onClose: function(ct, $input) {
                console.log('close.');
            },
            onShow: function(ct, $input) {
                console.log('show.');
            },
        });
    });
</script>
<input  type="text" id="idCalendario" value=""  class="form-control datepicker input-sm "  >

Paso 3: Establecer una solución

Una sorpresa desagradable es que se desencadena varias veces el evento onChangeDateTime. Sin embargo, solo te interesa controlar el evento una vez, así que optaré por lo siguiente:

Controlar cuándo se muestra el control. A partir de ahí, almacenamos todos los cambios en un array. Cuando se oculte el control, llamamos a la función facilitándole el conjunto de cambios. Probablemente solo te interese el último valor (el de la fecha final), pero pasaré todos los cambios por si acaso:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script>
    function miFuncion(cambios) {
        // Ésta es la función que se encarga de lo que tú quieras hacer.
        console.log('¡Solo me ejecuto una vez por cambio!');
        console.log('He recibido ' + cambios.length + ' cambios de fechas.');
        console.log('El último cambio recibido ha sido: ' + cambios[cambios.length - 1] + '.');
    }
    $(document).ready(function() {
        var cambios = new Array();
        var registrando = false;
        $('#idCalendario').datetimepicker({
            onChangeDateTime: function(ct, $input) {
                if (registrando) {
                    cambios[cambios.length] = $input.val();
                }
            },
            onClose: function(ct, $input) {
                if (registrando) {
                    miFuncion(cambios);
                    registrando = false;
                }   
            },
            onShow: function(ct, $input) {
                registrando = true;
            },
        });
    });
</script>
<input  type="text" id="idCalendario" value=""  class="form-control datepicker input-sm "  >

Y eso sería todo. Espero que te sirva.

1
  • Hola @LorenzoMartín, antes he visto un comentario tuyo en la respuesta en la que me pedías simplificar el proceso. He estado algo liado, pero si quieres puedo tratar de ayudarte (si no estás interesado en la fecha, puedes eliminar la variable de cambios y cualquier referencia a ella, así como eliminar el manejador del evento onChangeDateTime) Si lo deseas puedo editar la respuesta y añadir la simplificación al final :) Commented el 6 sept. 2018 a las 17:35
1

Puede validarlo con algo como esto

<script>
var Anterior="";
$("#OBJETO").focus(function(){
    Anterior=$(this).val();
});

$("#OBJETO").change(function(){
    if($(this).val()!=Anterior){
        //ACCIONES AL CAMBIO
    }
});

$("#OBJETO").blur(function(){
    if($(this).val()!=Anterior){
        //ACCIONES AL PERDER EL FOCO
    }
});
</script>

También puede revisar el método blur

Saludos :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.