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.