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

Asked

Viewed 42,780 times

6

That’s the mistake you’re making:

Uncaught Typeerror: Cannot set Property 'en-BR' of Undefined

Insert some links to format the date, according to what I took on the net and even then the date is still wrong(another format) and I have this error (quoted above) on the page. And what’s more, when I select the date, it goes into the textbox, but the calendar keeps showing up, only if I click somewhere else does it disappear. I 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>

Look at my jquery and js. I think there’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>
javascript c# css twitter-bootstrap

  • I had this problem, edited the original and turned into en

  • @pnet is doing this by mvc Asp.net in visual studio neh ?

3 answers

14


Just put this on language: 'pt-BR' 

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

Download by Site

Download via Visual Studio via Manage Nuget Packages

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

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

inserir a descrição da imagem aqui

  • Didn’t need the includes, just the jquery function and solved with emus includes. Thanks.

  • 1

    Blz @pnet, is that we have to think that this can and will serve many people, understood !!!

  • 1

    Okay, Arry, I get it.

1

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

Take a look, if you find it convenient, copy the will, no need to keep adding anything else, nor edit the original css.

https://gist.github.com/aymone/eb135c65f4f32fda8c9c

Another thing, in case I need to add more locales, it still works in other languages, but as my project was exclusively en, it served me perfectly and loads even faster, because it does not need to download a js with the translation.

0

I believe the problem is happening because of the order of imports, try to import in this order:

1) datepicker.css

2) bootstrap-datepicker.js

3) bootstrap-datepicker.en-BR.js

  • jquery and bootstrap.js come before these 3 files?

  • jquery is required for bootstrap plugins ... http://getbootstrap.com/getting-started/#template

  • then, I have had on another screen some error saying that jquery is missing. Can I save it. What jquery do I use for this? See my edit.

  • In the example of the template that I posted the guy uses version 1.11 ... but I believe that this will depend on the plugins that you use ... Your plugin I believe this is: http://eternicode.github.io/bootstrap-datepicker and they use version 1.9.1 of jquery, but nothing prevents you from using a more current version and testing...

  • So, I downloaded the guy and came up with a folder with multiple files and folders. What do I do now? How do I add it? Add it all to my project?

  • But the javascript error continues, still working the format, but still not closing the calendar.

Show 1 more comment

Browser other questions tagged javascript c# css twitter-bootstrap

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