1

Tengo un error al intentar cargar el DateRangePicker:

Error:
Uncaught TypeError: $(...).daterangepicker is not a function

Pienso que es un problema de la posición de las librerías pero no estoy seguro. Les dejo aquí cómo tengo organizadas las librerías.

Llamada a librerías:

    <!-- BootStrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <!-- DateRangePicker -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

Código JQuery:

<script>
    
    $(document).ready(function(){       
        
        $('#id_sc_field_periodo').daterangepicker({
                "autoApply": true,
                "startDate": "03/05/2005",
                "endDate": "03/12/2021",
                "locale": {
                    "firstDay": 1
                }
            },function(start, end) {
                var startDate = new Date(start.format('YYYY-MM-DD'));
                var endDate = new Date(end.format('YYYY-MM-DD'));
            
                console.log('New date range selected: '+startDate+' to '+endDate+'');
            
                var diasdif= startDate.getTime()-endDate.getTime();
                var contdias = Math.abs(diasdif/(1000*60*60*24));
            
            
                console.log(contdias);
            }
        );
        
    
    });
</script>

Código HTML:

<input class="sc-js-input css_periodo_obj scFormObjectOdd" id="id_sc_field_periodo" type="text" name="periodo" value="" size="25" maxlength="35">
3
  • ¿Podrías compartir también el código HTML para poder reproducir tu problema? Gracias. el 16 nov. 2021 a las 9:48
  • @OscarGarcia Sí, ahora mismo te subo el html del input
    – Maginon
    el 16 nov. 2021 a las 10:03
  • Ya he redactado una respuesta. En el orden que cargas las dependencias no funciona correctamente el código. Te he propuesto un orden de carga alternativo. el 16 nov. 2021 a las 10:22

1 respuesta 1

1

Todo apunta a que tienes un problema con el orden de carga de las bibliotecas de funciones o incluso tu código JavaScript.

Al intentar reproducir tu problema me ha saltado un error al intentar cargar el código JavaScript de Bootstrap antes de cargar jQuery.

De modo que he reordenado la carga y ahora funciona correctamente (te he dejado comentarios sobre el orden que te propongo):

$(document).ready(function(){       

    $('#id_sc_field_periodo').daterangepicker({
            "autoApply": true,
            "startDate": "03/05/2005",
            "endDate": "03/12/2021",
            "locale": {
                "firstDay": 1
            }
        },function(start, end) {
            var startDate = new Date(start.format('YYYY-MM-DD'));
            var endDate = new Date(end.format('YYYY-MM-DD'));

            console.log('New date range selected: '+startDate+' to '+endDate+'');

            var diasdif= startDate.getTime()-endDate.getTime();
            var contdias = Math.abs(diasdif/(1000*60*60*24));


            console.log(contdias);
        }
    );


});
<!-- Las hojas de estilos no suelen requerir un orden en especial -->

<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- DateRangePicker -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<!-- BootStrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- Moment.js no tiene ninguna dependencia, puede cargar en cualquier orden -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<!-- El resto de bibliotecas de funciones JavaScript sí, así que empezamos por jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<!-- DateRangePicker requiere jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<!-- BootStrap también requiere jQuery -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<input class="sc-js-input css_periodo_obj scFormObjectOdd" id="id_sc_field_periodo" type="text" name="periodo" value="" size="25" maxlength="35">

5
  • Gracias por tú respuesta pero he ordenado el orden de carga de las bibliotecas exactamente como tú me lo has indicado y ahora me devuelve el siguiente problema: Uncaught TypeError: $(...).datepicker is not a function
    – Maginon
    el 16 nov. 2021 a las 10:29
  • Imagino que ese mensaje de error te lo da en una línea de código que no está en tu pregunta, porque en ningún momento has usado un datepicker en él, así que imagino que está ocurriendo el mismo problema, pero con otra biblioteca de funciones diferente (recuerda que en tu ejemplo estás usando daterangepicker). el 16 nov. 2021 a las 10:54
  • Ok! Revisare entonces mi código bien. Muchas gracias!!
    – Maginon
    el 16 nov. 2021 a las 11:31
  • Ya he conseguido arreglarlo, por si a alguien le pasa lo mismo. La solución ha sido borrar la llamda a la biblioteca: <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>. Aunque borremos esa línea, el DateRangePicker funciona correctamente. Creo que es porque más abajo llamamos a su JQuery
    – Maginon
    el 16 nov. 2021 a las 11:49
  • Es probable que estés usando un "bundle" en algunas de las bibliotecas de funciones. Se llama así porque incluye las dependencias en el mismo paquete. Es decir, si necesita jQuery, ese bundle contiene jQuery, por lo que no necesita cargarse por segunda vez. el 16 nov. 2021 a las 12:29

Tu Respuesta

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

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