[SOLUCIONADO] Laravel - jquery - datepicker

[jprolando]

en general explico que cuando utilizo el datepicker afuera de las plantillas de Blade anda perfecto; cuando lo pongo dentro del blade no me carga y el datepicker me devuelve el error "dateFecha.js:1 Uncaught ReferenceError: $ is not defined"

Archivo app.blade.php dentro del head tengo el código de jquery:

Código PHP:

  <script src="{{ asset('js/jsQuery.js') }}"></script> 
  

js es la carpeta que se encuentra dentro de la carpeta publica.

Ademas antes de cerrar el head tengo todo lo relacionado a el código de datepicker (ya aclaro que también tengo todas las carpetas necesarias descargadas en la carpeta publica.

Código PHP:

      <link rel="stylesheet" href="{{asset('datePickerjp/css/bootstrap-datepicker3.css')}}">
    <script src="{{asset('datePickerjp/js/bootstrap-datepicker.js')}}"></script>
 
    <script src="{{asset('datePickerjp/locales/bootstrap-datepicker.es.min.js')}}"></script> 
  

El archivo vista que tengo tiene el siguiente codigo:

Código PHP:

  @section('content')
// aqui todo el codigo necesario
//donde se encuentra el input
                        <form method="POST" action="{{ url('cajaDiaria') }}">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label for="fechamov">Elija dia de caja diaria:</label>
                                <input type="text" class="form-control datepicker" name="fechamov" id="fechamov" value="{{ old('fechamov') }}" placeholder="aaaa-mm-dd">
                            </div>
                            <button type="submit" class="btn btn-primary">Ver Caja Diaria</button>
                        </form>
@endsection
<script src="{{asset('/js/dateFecha.js')}}">"></script> 
   

y el archivo dateFecha.js con el siguiente codigo:

Código:

    $('.datepicker').datepicker({
    format: "yyyy/dd/mm",
    todayBtn: "linked",
    language: "es",
    autoclose: true,
    orientation: "auto",
    todayHighlight: true
	});

Me parece que el tema esta en el orden en el que se ejecutan los bloques de archivo.

Cualquier ayuda, sera bienvenida.
Muchas gracias

[ArturoGallegos]

Tambien el error esta en que realmente nunca declaraste $ y das por sentado que lo hiciste.

utiliza

Código Javascript:

jQuery('.datepicker').datepicker({
    format: "yyyy/dd/mm",
    todayBtn: "linked",
    language: "es",
    autoclose: true,
    orientation: "auto",
    todayHighlight: true
    });
 

o bien

Código Javascript:

var $j = jQuery.noConflict();
 
$j(function($){
$('.datepicker').datepicker({
    format: "yyyy/dd/mm",
    todayBtn: "linked",
    language: "es",
    autoclose: true,
    orientation: "auto",
    todayHighlight: true
    });
});
 

[jprolando]

Muchas gracias por tu respuesta, tu sabes que el problema sigue estando.

Al definir la variable como lo expones, me sigue dando el error que no reconoce ahora en vez del $, la variable definida

Codigo:

Código:

var $fecha = jQuery.noConflict();
 
$fecha(function($){
$('.datepicker').datepicker({
    format: "yyyy/dd/mm",
    todayBtn: "linked",
    language: "es",
    autoclose: true,
    orientation: "auto",
    todayHighlight: true
    });
});

Error:

Código:

Uncaught ReferenceError: jQuery is not defined

Sigo, cualquier ayuda sera bienvenida.

Gracias

[ArturoGallegos]

jQuery is not defined es un problema muy distinto a $

si jQuery no esta definido definitivamente el problema es el orden en que terminan de cargar.

1.- asegurate que la librería de jQuery sea invocada antes que tu código,
2.- utiliza las propiedades async y defer

async hará que cargue en paralelo con tu sitio,
defer hará que cargue una vez que termino de cargar el sitio, es decir sera lo ultimo en cargar.

<script src="..." async />
<script src="..." defer />

No recomiendo utilizar ambos sobre el mismo script, los resultados pueden ser muy distinto a lo deseado.

[jprolando]

Arturo,
Ahora si quedo pronto, el código del datepicker en mi pagina se cargaba antes del jquery.
Quedo solucionado al decirle que el de mi pagina se cargara al final del sitio con defer.

Quedando así,

Código:

<script src="{{asset('/js/dateFecha.js')}}" defer></script>

Muchas gracias, quedo solucionado