change date format in datepicker-bootstrap

Asked

Viewed 1,651 times

-1

I am following the documentation but I can not change the format to the BR standard, follows below my codes:

Loading css. and . js files into my template:

<!-- DATAPICKER -->
<link href=' <?php echo base_url('assets/plugins/datepicker/datepicker3.css'); ?>' rel='stylesheet' />
<script type="text/javascript" src='<?php echo base_url('assets/plugins/datepicker/bootstrap-datepicker.js'); ?>'>
</script>
<script type="text/javascript" src='<?php echo base_url('assets/plugins/datepicker/locales/bootstrap-datepicker.pt-BR.js'); ?>'>
</script>

view where to generate the datapicker in br format:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <script type="text/javascript">  
        $(function(){
            $("#produto").autocomplete({
                source: "produtos/get_produto", // path to the method
                appendTo: $("#new_orcamento")
            });
        }); 
    </script>

    <script type="text/javascript">  
        $(function(){
            $("#cliente").autocomplete({
                source: "clientes/get_cliente", // path to the method
                appendTo: $("#new_orcamento")
            });
        }); 
    </script>

    <script type="text/javascript"> 
    $(function(){ 
        $('#search').datepicker({
            dateFormat: "yy-mm-dd",
            language: 'pt-BR'
        });
    });
    </script>

</head>

<body>


    <form action="/sistema/orcamentos/pesquisar1" method="post">
        <div class="row">
            <div class="col-sm-3">
                <div lass="form-group">
                    <input name="search1" class="form-control" id="search" type="text"
                        placeholder="Filtrar Cliente" value="<?php echo $view_termo1??null ;?>"> 
                        <span class="input-group-btn"> </span>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <input name="search2" class="form-control" id="search" type="text"
                        placeholder="Filtrar Produto" value="<?php echo $view_termo2??null ;?>"> 
                        <span class="input-group-btn"></span>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <input name="search3" class="form-control" id="search" type="text"
                        placeholder="Filtrar Situação" value="<?php echo $view_termo3??null ;?>"> 
                        <span  class="input-group-btn"> </span>
                </div>
            </div>

            <div class="col-sm-1">
                <button class="btn btn-primary " type="submit">Filtrar</button>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-3">
                <div lass="form-group">
                    <input name="search4" class="form-control" id="search" type="text"
                        placeholder="Filtrar Representante" value="<?php echo $view_termo4??null ;?>"> 
                        <span class="input-group-btn"> </span>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">                        
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" id="search" name="search5" 
                        placeholder="Data Inicio" value="<?php echo $view_termo5??null ;?>"> 
                        <div class="input-group-addon">
                             <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">                        
                    <div class="input-group date" data-provide="datepicker">
                        <input type="text" class="form-control" id="search" name="search6" 
                        placeholder="Data Fim" value="<?php echo $view_termo5??null ;?>"> 
                        <div class="input-group-addon">
                             <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <a data-toggle="modal" data-target="#new_orcamento" class="btn btn-primary ">Novo Orçamento</a>
            </div>

        </div>

    </form>

See that I’ve already changed the dateFormat for yy/mm/dd which is what I want but still when I use the datepicker it shows the date in the default format mm/dd/yyyy

bootstrap-3 datepicker

1 answer

0

Felipe, try this one:

<head>
    <link rel="stylesheet" href="http://sites.fullprog.com/testes/assets/css/bootstrap.css">
    <link rel="stylesheet" href="http://sites.fullprog.com/testes/assets/datepicker/css/bootstrap-datepicker.css">
    <title>Data Picker Bootstrap</title>
</head>
<body>
    <div class="container">
        <div class="input-group date" >
            <input class="form-control" name="event_date" id="event_date" type="text">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        </div>
    </div>
</body>
<!-- Script -->
<script src="http://sites.fullprog.com/testes/assets/js/jquery-1.9.1.min.js"></script>
<script src="http://sites.fullprog.com/testes/assets/js/bootstrap.min.js"></script>
<script src="http://sites.fullprog.com/testes/assets/datepicker/js/bootstrap-datepicker.js"></script>
<script src="http://sites.fullprog.com/testes/assets/datepicker/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script>
    $('.input-group.date').datepicker({
        format: 'dd/mm/yyyy',
        language: 'pt-BR',
        todayHighlight: true
    });
</script>

Online: http://sites.fullprog.com/testes/datapicker

If you want the file to download: http://sites.fullprog.com/testes/datapicker.rar

Browser other questions tagged bootstrap-3 datepicker

You are not signed in. Login or sign up in order to post.