1

Boa noite turma,

Estou em um projeto PHP no CodeIgniter, onde já estou usando o Bootstrap e Morris.js (gráficos). Preciso implementar o Datepicker agora, e fazendo da mesma forma que já havia funcionado em um teste sem o CodeIgniter não está funcionando. Alguém pode me dar uma luz? Já linkei o css e o js, e nada. Talvez eu esteja fazendo errado. Enfim, se alguém puder me ajudar, segue a forma que estou fazendo:

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

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

E esse é o datepicker-data.js

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

Chamei assim no 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>

1 Resposta 1

0

Matheus, o seu código do arquivo datepicker-data.js não está funcional, substitui por este trecho (comentado para que você entenda as modificações) e testa por favor, pois não consigo acessar seus includes locais para fazê-lo.

Segue:

/* $(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.
});

Espero ter ajudado.

1
  • Valeu, Bruno! Muito obrigado!
    – Matheus
    Commented 19/07/2016 às 11:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .