input date Html5

Question

input date Html5

Asked 9 years, 6 months ago

Viewed 9,997 times

1

I’ve been looking for Html5 settings for the date attribute to display the date in the format we used in Brazil (dd/mm/yyyy), but it doesn’t seem to have any extra settings for this. In some tutorials the default format is already this, but my calendar is displayed in the default yyyy/mm/dd. Any solution for this?

<html>
<head>
    <meta charset="UTF-8">
</head>
<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>  <!-- Não deixa o usuário clicar com o botão direito na página -->
    <div class="container clearfix">
        <?php
            include "header.php";
        ?>
            <div class="conteudo_painel">
                <h1>Painel do Cliente - <?php echo $_SESSION['nome_cliente']; ?></h1> <!-- Nome do cliente para mostrar no painel -->
                <!-- Div sobre o boleto -->
                    <div class="segunda_via">
                        <h2>2ª via do boleto</h2>
                        <h4>Escolha a data que efetuará o pagamento:</h4>
                        <form method="post" action="?acao=confirmar">
                            </br><input type="date" id="data" name="data" maxlength="10" size="" OnKeyPress=" formatar('##/##/####', this)">
                            </br><input type="image" src="img/gera_boleto.png" value="Confirmar" id="gera_boleto">
                        </form>
                    </div>
                    <?php
                        } else { //caso o boleto não tenha vencido e o cliente não tenha pago, mostra o boleto primeira via
                    ?>
                        <div class="boleto_itau" >
...

O chrome exibe no formato br e o safari no norte americado

1

Read here http://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format

– Leandro Curioso

2015/05/11 at 15:53
I tried it here in the Brazilian standard. Have a look here. http:/jsfiddle.net/Ls8gxzk7/

– Marconi

2015/05/11 at 17:09
Hello, Try this way using the jQuery UI library: Example: http://jsfiddle.net/uLnrd6pu/

– user30130

2015/08/14 at 13:47

1 answer

Browser other questions tagged html5

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

by Anderson Brunel Modolon • **1,111** points · Answer 1 · 2015-05-11T16:35:44+00:00

Try this:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8" />
</head>

Here is an example using the en datepicker, where it is available at: link github jquery.ui.datepicker-en-BR.js

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>teste</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="datepicker-pt-BR.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script>
        $(function() {
            $( "#datepicker" ).datepicker();
        });
   </script>
</head>
<body>

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

</body>
</html>