0

Olá, eu estou tentando lacalizar o meu datetimepicker para pt-br mas não estou conseguindo. Eu tentei fazer da maneira como eles ensinam na página oficial mas não consegui. O plugin está funcionando perfeitamente mas com esse problema de estar em inglês. Fora isso eu gostaria de saber como modificá-lo para adicionar as "meias horas" nele. Por exemplo, ao selecionar a hora eu tenho as opções: 12:00, 13:00, 14:00 e etc. Eu já vi sistemas que usam o mesmo plugin e tem as opções: 12:00, 12:30, 13:00, 13:30 e em diante. Gostaria de fazer essas duas alteraçoes e ficaria imensamente grato se alguém pudesse me ajudar.

Script:

<script type="text/javascript" charset="utf-8"> 

    $('.js_date_time').datetimepicker({
        format: 'd/m/Y H:i',
        lang: 'pt'
    }).setLocale('pt');
    DataTablesConfig("datatables");

</script>
1
  • O problema da tradução permanece mas consegui resolver o das horas eu consegui resolver da seguinte forma: $('.js_date_time').datetimepicker({ format: 'd/m/Y H:i', allowTimes:['00:00', '00:30', '01:00', '01:30', '2:00', '02:30', '3:00', '3:30', '04:00', '04:30', '05:00', '05:30','06:00', '06:30' ], }); Obs: Não coloquei o restante das horas aqui por questão de limitação de caracteres mas dá pra entender a ideia. Espero que ajude quem se encontrar na mesma situação que eu. Commented 2/08/2016 às 21:52

7 Respostas 7

4

A cerca do pt-br, creio que te ajude desta maneira:

$('.js_date_time').datetimepicker({
   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: 'Proximo',
   prevText: 'Anterior'
});

Eu pesquisei alguns times que façam essa afinação por minutos, então deixarei aqui dois links de datetime. Acredito que referenciando da mesma forma do exemplo acima nas datas sobre a hora, pode ser de grande ajuda.

Opção 1

Opção 2

obs: Ambos os links constam lang e locale, que acaba tornando obsoleto o exemplo acima se for seguir um dos dois, mas deixei o exemplo para deixar claro como se cria uma "tradução" caso tenha dificuldades com o locale/lang.

Atualizado:

Visando seu script e lendo um pouco sobre, as configurações são bastante parecidas com o que eu disponibilizei, mas com pequenas alterações. Segue o exemplo básico do script que você está utilizando:

obs: script com partes copiadas no site do desenvolvedor deste picker

jQuery('#datetimepicker1').datetimepicker({
 i18n:{
  de:{
   months:[
   'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto' 'Setembro', 'Outubro', 'Novembro', 'Dezembro',  
   ],
   dayOfWeek:[
    'D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'
   ]
  }
 },
 timepicker:false,
 format:'d.m.Y'
});

Na parte de setar as horas em seu DateTime, verifiquei esse pedaço do script:

jQuery('#datetimepicker5').datetimepicker({
 datepicker:false,
 allowTimes:[
  '12:00', '13:00', '15:00', 
  '17:00', '17:05', '17:20', '19:00', '20:00'
 ]
});

obs: Este exemplo foi feito de modo "manual" de "tradução" para ser uma opção a mais, caso o lang de seu script não funcione corretamente no seu código

2
  • Obrigado pelo retorno mas como eu havia dito anteriormente o datetimepicker que eu estou usando não é o padrão do html, não é o do bootstrap e nem o do JQuery UI. Ele é o do seguinte link: JQuery Date and Time Picker Plugin. Commented 2/08/2016 às 21:19
  • @GuilhermeRamalho Entendi meu amigo, vou completar com o que eu acabei de ler sobre este script que você está utilizando em relação as horas setadas. Mas pelo que se da para entender neste script, você pode utilizar do exemplo parecido que postei acima. Completarei a reposta Commented 2/08/2016 às 22:03
2

@Guilherme, pegue o código de exemplo! Bootstrap com DateTimePicker

<html>
    <head>
        <title>Bootstrap com datetimepicker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    </head>
    <body>
        <div class="row">
            <div class='col-sm-6' style="width:295px;">
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker5'>
                        <input type='text' class="form-control"/>
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: "08/02/2016",
                    locale: 'pt-br'
                });
            });
            </script>
        </div>
    </body>
</html>
5
  • Cara, eu agradeço de verdade você ter se dado ao trabalho e ter tido a boa vontade de me ajudar mas esse timepicker que você usa no exemplo é o nativo do bootstrap, certo? O que eu estou usando é diferente como mostra a imagem do meu comentário anterior e o link que eu pus no início da questão justamente pra ele não ser confundido com o JQuery UI Datetimpicker e outros. Commented 2/08/2016 às 18:07
  • 1
    Entendo, verifiquei seu link se postou, fui ver sobre documentação xdsoft, mas jQuery UI é diferente jQuery, eu nem uso jQuery UI =s ... ai complicou rss. Coloca antes jquery e depois jquery-ui, veja outro exemplo codepen.io/KingRider/pen/GqXOXp sem bootstrap ;-)
    – KingRider
    Commented 2/08/2016 às 18:43
  • Cara, funcionou agora. o problema é que eu tava chamando a propriedade de seguinte forma: $('.js_date_time').datetimepicker({ format: 'd/m/Y H:i', }).setLocale('pt-BR'); Quando deveria estar chamando o método separado. Assim: $('.js_date_time').datetimepicker().setLocale('pt-BR'); $('.js_date_time').datetimepicker({ format: 'd/m/Y H:i', }); Commented 2/08/2016 às 21:58
  • Obrigado por toda paciência e pela ajuda. Commented 2/08/2016 às 22:04
  • ah entendi e estranho! Que bom se resolveu.
    – KingRider
    Commented 2/08/2016 às 23:57
-1

Muito Simples Pessoal

//Calendario 
$('#datetimepicker1').datetimepicker({
    format: 'DD/MM/YYYY HH:mm'
});
-1
(function($){$.fn.datetimepicker.dates['br'] = {
            days: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
            daysShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            daysMin: ['D','S','T','Q','Q','S','S','D'],
            months:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthsShort:['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        };
    }(jQuery));
 

$('.js_date_time').datetimepicker({
        format: 'd/m/Y H:i',
        language: 'br'
    });
-1
(function($){$.fn.datetimepicker.dates['br'] = { days: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'], daysShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'], daysMin: ['D','S','T','Q','Q','S','S','D'], months:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'], monthsShort:['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'], }; }(jQuery));

$('.js_date_time').datetimepicker({ format: 'd/m/Y H:i', language: 'br' });
-1
  • Criar um arquivo de javascript de inicialização do timepicker e salvar no mesmo diretorio do timepicker (Por exemplo):

jquery-ui-timepicker-addon-locale-pt-BR.js

  • Fazer referência para o arquivo javascript após o timepicker (Por exemplo):

<script src="~/Scripts/jquery-ui-timepicker-addon.js"></script>
<script src="~/Scripts/jquery-ui-timepicker-addon-locale-pt-BR.js"></script>

Conteúdo do arquivo:

//Configuracao para portugues do Brasil
jQuery(function($){
    $.timepicker.regional['pt-BR'] = { 
        currentText: 'Agora',
        closeText: 'Ok',
        amNames: ['AM', 'A'],
        pmNames: ['PM', 'P'],
        timeFormat: 'HH:mm',
        timeSuffix: '',
        timeOnlyTitle: 'Selecionar hora',
        timeText: 'Hor&aacute;rio',
        hourText: 'Hora',
        minuteText: 'Minuto',
        secondText: 'Segundo',
        millisecText: 'Milissegundo',
        microsecText: 'Microssegundo',
        timezoneText: 'Fuso Hor&aacute;rio',
        isRTL: false
    };    
    $.timepicker.setDefaults($.timepicker.regional['pt-BR']);
});
1
  • Pode ser criado 1 vez seguindo a mesma lógica onde são determinadas as inicializações e configurações de scripts do projeto; Dessa forma fica global para poder ser utilizado em todo o projeto
    – nandox
    Commented 16/09 às 14:40
-3

Boa tarde resolvido bem fácil datetimepicker ver.2.5.19 ou até posterior jquery.datetimepicker.js

var dateHelper = null, defaultDateHelper = null, globalLocaleDefault = 'pt-BR', globalLocale = 'pt-BR'; Depois; var initDateFormatter = function(){ var locale = default_options.i18n['pt-BR'], Depois; // for locale settings $.datetimepicker = { setLocale: function(locale){ var newLocale = default_options.i18n['pt-BR'] ? locale : 'pt-BR'; if (globalLocale !== newLocale) { globalLocale = 'pt-BR'; Depois; setLocale: function(locale){ var newLocale = default_options.i18n['pt-BR'] ? locale : 'pt-BR'; if (globalLocale !== newLocale) { globalLocale = 'pt-BR'; // reinit date formatter initDateFormatter(); Depois; var dateHelper = null, defaultDateHelper = null, globalLocaleDefault = 'pt-BR', globalLocale = 'pt-BR';

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .