Datetime Picker in Portuguese

Asked

Viewed 5,814 times

2

I added the component of DateTimePicker to my project. inserir a descrição da imagem aqui

But the same is all in English, I added the option of pt-BR in Function that creates it in the field, and even so it remains in English. How do I make the months/days of the week ?

function atualizarCalendariosHora() {
    $(".calendarioHora").mask("99/99/9999 99:99");
    $(".calendarioHora").datetimepicker("destroy");

    $(".calendarioHora:not([readonly='readonly']):not([readonly='true'])").datetimepicker({
        format: 'd/m/Y H:i',
        lang: 'pt-BR',
        mask: '99/99/9999 99:99',
        onClose: function () {
            try {
                $(this).valid();
            }
            catch (e) {
            }
        }
    });
}
  • which plugin friend?

3 answers

4

You can choose what you want to insert information, for example.
DAYNAMES = Name of days.
You put into an array the names and it will appear in your calendar! The following code demonstrates some attributes you can change.

$(".data").datepicker({
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior'
});
<link type="text/css" href="http://www.botecodigital.info/exemplos/datapicker/css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.botecodigital.info/exemplos/datapicker/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.botecodigital.info/exemplos/datapicker/js/jquery-ui-1.8.20.custom.min.js"></script>
<input type="text" class="data hasDatepicker" id="dp1458823238871">

You can check an example on this site:
http://www.botecodigital.info/exemplos/datapicker/
Inspect the source code and you’ll see how simple it is!

Try to leave your script like this:

function atualizarCalendariosHora() {
    $(".calendarioHora").mask("99/99/9999 99:99");
    $(".calendarioHora").datetimepicker("destroy");

    $(".calendarioHora:not([readonly='readonly']):not([readonly='true'])").datetimepicker({
        format: 'd/m/Y H:i',
        lang: 'pt-BR',
       dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior',
        mask: '99/99/9999 99:99',
        onClose: function () {
            try {
                $(this).valid();
            }
            catch (e) {
            }
        }
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • 1

    Note that the component is the DateTimePicker and not the DatePicker.

  • Try to put: locale: 'en'

4


I managed to solve my problem with: $.datetimepicker.setLocale('pt-BR'); after the definition of Datetimepicker.

function atualizarCalendariosHora() {
    $(".calendarioHora:not([readonly='readonly']):not([readonly='true'])").datetimepicker({
        format: 'd/m/Y H:i',
        mask: '99/99/9999 99:99',
        onClose: function () {
            try {
                $(this).valid();
            }
            catch (e) {
            }
        }
    });

    $.datetimepicker.setLocale('pt-BR');
}

1

Try creating Datepìcker like this:

$(".calendarioHora").datepicker({
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado', 'Domingo'],
    dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
    dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
    monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});
  • Note that the component is the DateTimePicker and not the DatePicker.

Browser other questions tagged

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