0

tengo un problema con un datePicker en jQuery UI con bootstrap y Laravel.

Si lo pongo todo en un solo archivo, funciona sin problema, de esta forma:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />
<script src="jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="jquery-ui-1.12.1/jquery.ui.datepicker-es.js"></script>

<script>
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker({});
});
</script>
</head>

<body>
Fecha:
<input type="text" class="form-control" id="datepicker"></div>
</body>
</html>

Sin embargo si lo separo en dos, ya me da un error. No sé donde puede estar el problema.

Tengo el fichero "ranking.blade.php" donde está el código de la página.

  <!-- Extendemos de la aplicación app -->

@extends('layouts.app')

  <!-- Empezamos con el contenido -->

@section('content')

<div class="container">
    <div class="row justify-content-center">
    <div class="col">

      <div class="card">

    <!-- Menú de título de la página -->

  <div class="card-header text-white bg-primary py-2">
          <div class="row align-items-center">
            <div class="col-auto mr-auto">
              <i class="fas fa-futbol m-1"></i>
              <strong>Ranking</strong>
            </div>
          </div>
  </div>

  <div class="card-body">

 <!-- Contenido de la página -->

Fecha:
<input type="text" class="form-control" id="datepicker">

<script type="application/javascript">
$(function () {
$("#datepicker").datepicker({});
});
</script>

</div></div></div></div></div>
 
 @endsection

Tengo el fichero "partials.head.blade.php" donde pongo las cabeceras html.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>XXXXXXXXX</title>

    <!-- DatePicker -->
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />
    <script src="jquery-ui-1.12.1/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.js"></script>
    <script src="jquery-ui-1.12.1/jquery.ui.datepicker-es.js"></script>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

</head>

Y el error que me arroja en la web.

TypeError: $("#datepicker").datepicker is not a function. (In '$("#datepicker").datepicker({})', '$("#datepicker").datepicker' is undefined)

La verdad es que me tiene un poco perdido.

Muchas gracias por vuestras respuestas.

2
  • Estás usando rutas relativas para cargar las librerías de JQuery y JQueryUI. Es muy posible que la ruta para llegar a ellas no sea la misma en partials.head.blade.php que donde la pruebas y te funciona.
    – phpMyGuel
    Commented el 26 mar. 2020 a las 11:32
  • Hola phpMyGuel, gracias por tu respuesta. He hecho pruebas con "asset" y me sigue dando los mismos errores. Además si pongo mal los nombres de los ficheros, me arroja el error de "Failed to load resource....." por lo que los ficheros si los está encontrando bien. Gracias de todos modos. Un saludo. Commented el 26 mar. 2020 a las 11:54

1 respuesta 1

0

Tu jQuery debe ir antes del </body> y acá está la respuesta del porqué ¿Cuál es el mejor lugar para colocar los tag en HTML?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
</head>

<body>

  <p>Date: <input type="text" id="datepicker"></p>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#datepicker").datepicker();
    });
  </script>
  
</body>
</html>

Así que deberías sacar tus ficheros .js del partials.head.blade.php

1
  • Muchas gracias Synay. Los 'css' si los dejé en el "partials.head", y lo script me los traje justo antes del cierre </body>. Eres un crack!. Además el enlace que has puesto es muy aclarativo. Un saludo amigo. Commented el 26 mar. 2020 a las 15:32

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.