Input date ta in English

Asked

Viewed 1,214 times

2

I made an input date of the bootstrap and it ta in English, there is some way it stay in en?

HTML

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

<div class="container">
        <div class='col-md-5'>
                <div class="form-group">
                        <div class='input-group date' id='datetimepicker6'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                        </div>
                </div>
        </div>
        <div class='col-md-5'>
                <div class="form-group">
                        <div class='input-group date' id='datetimepicker7'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                        </div>
                </div>
        </div>
</div>

<script type="text/javascript" src="jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

JQUERY

  $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
  });
jquery css html5 twitter-bootstrap bootstrap-3

  • you can place the library Imports you are using?

  • @Juliohenrique I just put

3 answers

1

In your example you are using the French version bootstrap-datetimepicker.fr.js

Then you need to change this link to:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.pt-BR.min.js"></script>


$( "#datepicker" ).datepicker({
    format: "dd/mm/yyyy",
    language: "pt-BR"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.pt-BR.min.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

0

Try to put the stretch 

locale: 'pt-br'

after the useCurrent: false

ps: place a comma after false'.

0

You can try like this

Try to place at the top of the page just below the <!DOCTYPE html> what language the page refers to, type: <html lang="pt-br">

Then try placing this script after all other Cdns from <script>

<script>
    $('.datepicker').datetimepicker({
        format: 'DD-MM-YYYY HH:mm:ss'
    });
</script>

This way it takes the date in the desired format: 

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
    <div class='col-xs-4 input-group date'>
        <input type="text" class="form-control datepicker"/>
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div><br>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script>
    $('.datepicker').datetimepicker({
        format: 'DD-MM-YYYY HH:mm:ss'
    });
</script>

</body>
</html>

  • He’s still English :T

  • Maria in this case I suggest you test your code on another. html only with Datapicker to try to find out where the conflict is, because in Snippet I can see that the date is in "English" Or use my example and put the rest of your code on the page until you find out what is changing the date format.

  • But I want it in Portuguese, and in the snippet of his example is still in English...the months and weeks

  • Then your problem is with your Operating System or your Browser Version. If they are in English the input should probably follow the default language

Browser other questions tagged jquery css html5 twitter-bootstrap bootstrap-3

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