Error datepicker in laravel 5.6

Question

Error datepicker in laravel 5.6

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I am working with bootstrap datepicker in my application developed in laravel 5.6. It works fine, until I add the option of setStarDate and setEndDate when it starts to throw the error

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

Datepicker libraries are added in the master template in the

section

@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>

I tried adding them in another section (js) but it does not work for me.

The issue is what am I doing wrong, that does not work for me when I want to use those set options for dates

The calendar script code is before closing @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

jquery-datepicker laravel datepicker

asked by Virginia 07.11.2018 в 16:10

source

3 answers

Error in PHP Post ASP how to send ID to a form

score 0 · Answer 1

0

Change:

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

by:

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

The difference is that it's 'setStartDate' not 'setStarDate' ...

answered by 07.11.2018 в 17:34

score 0 · Answer 2

You can do this by capturing the event "change" of the input and then sending the options "minDate" and "maxDate" . If you want there to be a minimum difference of 1 day between "from" and "until", you can add a day simply by adding 1 to the variable "minDate" before assigning it. Any questions you can consult. Greetings!

The code would look something like this:

$(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>

score 0 · Answer 3

Thanks to everyone for their collaboration, I tried with the proposed solutions and continued with the same problem, until I carefully reviewed how the html is formed from laravel and found that it is best to take the datepicker library to the template page, including everything what I need in the @section ('adminlte_js').

I leave it here in case someone needs it.