How to change data format in bootstrap from mm / dd / yyyy to dd / mm / yyyy
This is the error you are giving:
Uncaught TypeError: Cannot set property 'pt-BR' of undefined
Insert some links to format the date, according to tutorial I got on the net and even then the date remains wrong(another format) and I have this error(cited 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 elsewhere does it disappear. I've 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 doing. I think it's 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>
3 answers
Just put that language: 'pt-BR'
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
language: 'pt-BR'
});
Download from the Site
Download by Visual Studio via Manage Nuget Packages
Use example below in the same sequence of
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>
Online Example
May not be a 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, do not need to be adding anything else, nor edit the original css.
Https://gist.github.com/aymone/eb135c65f4f32fda8c9c
Something else, in case I need to add more locales, it keeps working in other languages, but like my project it was exclusively pt-br, served me perfectly and loads even faster, because you do not need to download another js with the translation.
I believe the problem is happening because of the order of imports, try importing in this order:
1) datepicker.css
2) bootstrap-datepicker.js
3) bootstrap-datepicker.pt-BR.js