0

estoy trabajando con datepicker de bootstrap en mi aplicación desarrollada en laravel 5.6. Funciona bien, hasta que le agrego la opción de setStarDate y setEndDate cuando comienza a lanzar el error

Uncaught TypeError: $(...).datepicker is not a function

Las librerias de datepicker están agregadas en el template master en la sección

@yield('adminlte_css')
<!-- datepicker -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Intenté añadirlas en otra sección (js) pero no me funciona.

El asunto es qué estoy haciendo mal, que no me funciona cuando quiero emplear esas opciones de set para las fechas

introducir la descripción de la imagen aquí

El código script del calendario está antes de cerrar @section('content')

 <script type="text/javascript">
   $('#datedesde').datepicker({  
    format: 'dd-mm-yyyy',
    language: 'es',
    autoclose: true,
    todayHighlight: true, 
   }).on('changeDate',
function (selected) {
    $('#datehasta').datepicker('setStartDate', $('#datedesde').val());

});

$('#datehasta').datepicker({  
    format: 'dd-mm-yyyy',
    language: 'es',
    autoclose: true,
    todayHighlight: true,

}).on('changeDate',
function (selected) {
    $('#datedesde').datepicker('setEndDate', $('#datehasta').val());

});
</script>

 @stop
2
  • Hola @Virginia. Cual es tu codigo js? Donde estas intentando hacerlo?
    – Fran Islas
    Commented el 7 nov. 2018 a las 15:58
  • @FranIslas edité la pregunta para incluir el código js
    – Virginia
    Commented el 7 nov. 2018 a las 16:01

3 respuestas 3

0

Cambia:

$('#datehasta').datepicker('setStarDate', $('#datedesde').val());

por:

$('#datehasta').datepicker('setStartDate', $('#datedesde').val());

La diferencia es que es 'setStartDate' no 'setStarDate'...

1
  • Si, tenía un error de tipeo, ya tantas veces que lo habia escrito y borrado, pero no, el error sigue igual. @jmarrdiaz
    – Virginia
    Commented el 7 nov. 2018 a las 17:27
0

Puede hacerlo capturando el evento "change" de los input y luego enviando las opciones "minDate" y "maxDate". Si deseas que que haya una diferencia minima de 1 dia entre "desde" y "hasta", puedes sumarle un dia simplemente sumando 1 a la variable "minDate" antes de asignarla. Cualquier duda puedes consultar. Saludos!

El código te quedaría algo así:

$(function() {
      var defaults = {
        closeText: 'Cerrar',
        prevText: '<Ant',
        nextText: 'Sig>',
        currentText: 'Hoy',
        monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene','Feb','Mar','Abr', 'May','Jun','Jul','Ago','Sep', 'Oct','Nov','Dic'],
        dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
        dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
        dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        autoclose: true,
    todayHighlight: true,
    };

    $.datepicker.setDefaults(defaults);
  
      $('#datepickerDesde').datepicker()
    .on('change', function(e) {
        var minDate = $(this).datepicker('getDate');
              if (minDate) { 
                   $('#datepickerHasta').datepicker('setDate', minDate).
              datepicker('option', 'minDate', minDate);
              }
             
        
    });
  
   $('#datepickerHasta').datepicker()
    .on('change', function(e) {
        var maxDate = $(this).datepicker('getDate');
              if (maxDate) { 
                   $('#datepickerDesde').datepicker('setDate', maxDate).
              datepicker('option', 'maxDate', maxDate);
              }
             
        
    });


  });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


<div  class="input-group date" data-provide="datepicker">
   <label for="datepickerDesde">Desde:</label>
    <input id="datepickerDesde" readonly  type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>
<div  class="input-group date" data-provide="datepicker">
   <label for="datepickerHasta">Hasta:</label>
    <input id="datepickerHasta" readonly type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

0

Gracias a todos por su colaboración, probé con las soluciones propuestas y seguía con el mismo problema, hasta que revisé detenidamente como se forma el html desde laravel y encontré que lo mejor esa llevar la librería de datepicker al template page, incluyendo todo lo que necesito en el @section('adminlte_js').

Lo dejo por acá por si alguien lo necesita.

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.