0

tengo un proyecto en laravel donde uso el motor de plantillas blade y dentro uso boostrap-datepicker con boostrap4 , para ello tengo el siguiente código donde mi intención es capturar el evento cuando se modifique el valor del datepicker, pero la funcionalidad que tengo es que al tocar el datepicker y se abre, en ese momento ya me lanza el evento y NO lo hace cuando modifico la fecha.

El código es el siguiente

    <script type="text/javascript">

    $('#datepicker_fecha_inicio').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'dd/mm/yyyy',
        locale: 'es-es',
        autoclose: false
    })
    .change(function(e) {

        let  data = $('#datepicker_fecha_inicio').val();
        data = data.replace('/','');
        data = data.replace('/','');

        var uri = ' {{ route("front.xxxxxxxx,":date") }} ';
        url = uri.replace(':date', data);

        window.location.href = url;

    });

</script>

El datepicker tiene esta forma visualmente introducir la descripción de la imagen aquí

2
  • Desconozco si afecte, pero tu route esta correcta? route("front.xxxxxxxx,":date") no deberia ser route("front.xxxxxxxx", ":date")? Commented el 14 abr. 2020 a las 15:56
  • Gracias jonatan la ruta la puse "fake"
    – ilernet
    Commented el 14 abr. 2020 a las 16:59

2 respuestas 2

1

Puedes incluir dentro del objeto del datepicker la función de change y ahi disparar el evento change si la fecha es diferente

$('#datepicker_fecha_inicio').datepicker({
    uiLibrary: 'bootstrap4',
    format: 'dd/mm/yyyy',
    locale: 'es-es',
    autoclose: false,
    onSelect: function(newDate) {
        if (newDate !== this.value) {
            $(this).change();
        }
    }
})
.on('change', function(e) {
    let  data = $(this).val();
    data = data.replace('/','');
    data = data.replace('/','');

    let uri = '{{ route("front.xxxxxxxx", ":date") }}';
    url = uri.replace(':date', data);

    window.location.href = url;
});

Para el datepicker que ocupas tienes un evento para el objeto datepicker

$('#datepicker_fecha_inicio').datepicker({
    uiLibrary: 'bootstrap4',
    format: 'dd/mm/yyyy',
    locale: 'es-es',
    autoclose: false,
    change: (e) => {
        console.log(e);
        let data = $(this).val();
        data = data.replace('/','');
        data = data.replace('/','');

        let uri = '{{ route("front.xxxxxxxx", ":date") }}';
        url = uri.replace(':date', data);

        window.location.href = url;
    }
});
3
  • Gracias, he probado ese código poniendo console.log en los eventos y solo me "entra" al "change", cuando le doy al botón de la "casa" del datepicker. Adjunto captura en el post principal
    – ilernet
    Commented el 14 abr. 2020 a las 16:58
  • Revisa mi respuesta editada para integrar la documentación de tu datepicker Commented el 14 abr. 2020 a las 17:23
  • Gracias Jonathan, en mi caso tengo el autoclose activado por lo tanto , he cambiado el change por el evento close...ahora si que me funciona , 1000 gracias
    – ilernet
    Commented el 15 abr. 2020 a las 6:49
1

Según la documentación de datepicker de bootstrap, los eventos los puedes invocar con la función on , para el caso tuyo deberia usar changedate, que detecta cuando cambias la fecha de tu datepicker.

Ej:

$('#sandbox-container input').datepicker().on('changeDate',function(e) { console.log(e) });

Para el caso de tu código quedaría de esta forma:

<script type="text/javascript">

    $('#datepicker_fecha_inicio').datepicker({
        uiLibrary: 'bootstrap4',
        format: 'dd/mm/yyyy',
        locale: 'es-es',
        autoclose: false
    })
    .on('changeDate',function(e) {

        let  data = $('#datepicker_fecha_inicio').val();
        data = data.replace('/','');
        data = data.replace('/','');

        var uri = ' {{ route("front.xxxxxxxx,":date") }} ';
        url = uri.replace(':date', data);

        window.location.href = url;

    });

</script>
3
  • Gracias, ese código lo he probado tal cual y no me hace nada y no veo ningún error en la consola. He probado a poner un alert y tampoco me salta, con lo que no me coje ese evento.
    – ilernet
    Commented el 14 abr. 2020 a las 15:33
  • Hola, estas usando el siguiente [datepicker] (uxsolutions.github.io/bootstrap-datepicker/…) o es otra libreria? Commented el 14 abr. 2020 a las 16:52
  • Uso este -> gijgo.com/datepicker
    – ilernet
    Commented el 14 abr. 2020 a las 17:05

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.