How to change date format in bootstrap from mm / dd / yyyy to dd / mm / yyyy

Navigation
5

This is the error you are giving:

  Uncaught TypeError: Can not set property 'pt-BR' of undefined

Insert some links to format the date, second time I picked up the net and even then the date is still wrong (another format) and I got this error (quoted above) on the page. And there is more, when I select the date, it goes to the textbox, but the calendar keeps appearing, only if I click somewhere else does it disappear. I've already put these three links: 

<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen"/>
<script src="~/Scripts/bootstrap-datepicker.js" ></script>

See how my jquery and js are. I think there is too much. 

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />    
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>        
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Styles.css" rel="stylesheet" />    
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen"/>
<script src="~/Scripts/bootstrap-datepicker.js" ></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>
    
asked by anonymous 03.07.2014 / 21:36

3 answers

13

Just put this language: 'pt-BR' 

$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',                
    language: 'pt-BR'
});

Download by Site

Download by Visual Studio via Manage Nuget Packages

  

Use the following example in the same sequence as css , js .

Example: 

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Data</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.js"></script>
    <script src="~/Scripts/bootstrap-datepicker-globalize.js"></script>
    <script src="~/Scripts/locales/bootstrap-datepicker.pt-BR.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datepicker3.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {
            $('.datepicker').datepicker({
                format: 'dd/mm/yyyy',                
                language: 'pt-BR'
            });
        });

    </script>
</head>
<body>
    <div> 
        <input type="text" name="data" class="datepicker" />
    </div>
</body>
</html>

Example On-Line

    
03.07.2014 / 22:06
1

It may not be good practice, but instead of adding other JS files. I edited the original file and kept the plugin creator references.

Take a look, if you find it convenient, copy the will, you do not have to add anything else, nor edit the original css.

link

Another thing, if you need to add more locales, it still works in other languages, but since my project was exclusively pt, it answered perfectly and loads faster, because you do not need to download another js with the translation.     

03.07.2014 / 22:19
0

I think the problem is happening because of the import order, try importing in this order:

1) datepicker.css

2) bootstrap-datepicker.js

3) bootstrap-datepicker.pt-BR.js

    
03.07.2014 / 21:43
Analysis of the machine / server using php Find ID in a column of delimiter-separated IDs in MySQL