Bootstrap Datepicker with Codeigniter

Question

Good evening, class,

I’m in a PHP project in Codeigniter, where I’m already using Bootstrap and Morris.js (graphics). I need to implement Datepicker now, and doing the same way that it would have worked in a test without Codeigniter is not working. Can someone give me a light? Already Linkei the css and js, and nothing. Maybe I’m doing wrong. Anyway, if anyone can help me, follows the way I’m doing:

At the head

<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="<?php echo base_url(); ?>assets/bootstrap/css/sb-admin.css" rel="stylesheet">

    <!-- Bootstrap Datepicker -->
<link href="<?php echo base_url(); ?>assets/bootstrap/css/plugins/datepicker.css" rel="stylesheet">

<!-- Morris Charts CSS -->
<link href="<?php echo base_url(); ?>assets/bootstrap/css/plugins/morris.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="<?php echo base_url(); ?>assets/bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- Latest compiled and minified JavaScript -->
    <script src="<? echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js') ?>"></script>

    <!-- Bootstrap Datepicker JavaScript -->
    <script src="<? echo base_url(); ?>assets/bootstrap/js/plugins/datepicker/datepicker.js') ?>"></script>

In the body

<!-- jQuery -->
<script src="<?php echo base_url(); ?>assets/bootstrap/js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js"></script>

<!-- Morris Charts JavaScript -->
<script src="<?php echo base_url(); ?>assets/bootstrap/js/plugins/morris/raphael.min.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/js/plugins/morris/morris.min.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/js/plugins/morris/morris-data.js"></script>

<!-- Bootstrap Datepicker JavaScript -->
<script src="<?php echo base_url(); ?>assets/bootstrap/js/plugins/datepicker/datepicker.js"></script>
<script src="<?php echo base_url(); ?>assets/bootstrap/js/plugins/datepicker/datepicker-data.js"></script>

And this is the datepicker-data.js

$(function(){
        $('.datepicker').datepicker({
                autoclose: true,
        todayHighlight: true
        })
});

I called it that in the form:

<form>
                <div class="form-group">
                    <label for="data" class="control-label">Data:</label>
                        <div class="input-group">
                            <input type="text" class="form-control datepicker" id="data">
                            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                        </div>
                </div>
                <div class="form-group">
                    <label for="turma" class="control-label">Turma:</label>
                    <select class="form-control">
                        <option>Turma 1</option>
                        <option>Turma 2</option>
                        <option>Turma 3</option>
                    </select>
                </div>
            </form>

Answer 1

Matheus, your datepicker-data.js file code is not functional, it replaces this excerpt (commented to make you understand the modifications) and tests please, because I can’t access your includes places to do it.

Follows:

/* $(document).ready somente é executado quando a página está carregada, 
   do contrário o código javascript pode ser executado antes dos includes
   do jQuery e Datepicker. */
$(document).ready(function(){
    $('.datepicker').datepicker({
            autoclose: true,
    todayHighlight: true
    }); //faltava um ponto e vírgula aqui.
});

I hope I’ve helped.