jquery datetimepicker events

Question

jquery datetimepicker events

Navigation

#1 by (4 votes)
#2 by (0 votes)

1

I'm using datetimepicker of jquery, I would like to be able to execute a function when changing the date, if I do it when changing the div, when it loses the focus, I also shoot the function. I need you to execute the function only when the date changes and not when you lose the focus.

$(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 "  >

jquery datetimepicker

asked by Lorenzo Martín 06.09.2018 в 12:02

source

2 answers

0

You can validate it with something like this

<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>

You can also review the blur

method

Greetings:)

answered by 06.09.2018 в 12:37

Operate media and graph in R from a csv with data listed What is stdcall and what is it used for?

score 4 · Accepted Answer

To answer your question, let's do a little research based on your code.

Step 1: Read the API

For this we go to link . The truth is that the documentation is improvable, but we found a series of interesting events:

onChangeDateTime : Event triggered when the date of the control is modified.
onClose : Event triggered by hiding the control's calendar.
onShow : Event triggered when the control message is displayed.

Step 2: Test the API at run time

Now we build a small example and investigate what happens when selecting a date:

<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 "  >

Step 3: Establish a solution

An unpleasant surprise is that the onChangeDateTime event is triggered several times. However, you are only interested in controlling the event once, so I will opt for the following:

Control when the control is displayed. From there, we store all the changes in an array. When the control is hidden, we call the function facilitating the set of changes. Probably only you are interested in the last value (that of the final date), but I will pass all the changes just in case:

<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 "  >

And that would be it. I hope it serves you.