Find Jquery Datetimepicker for EN

Asked

Viewed 38,138 times

1

Hello, I’m trying to lacquer mine datetimepicker for en but am not succeeding. I tried to do the way they teach on the official page but could not. The plugin is working perfectly but with this problem of being in English. Other than that I would like to know how to modify it to add the "half hours" in it. For example, when selecting the time I have the options: 12:00, 13:00, 14:00 and etc. I have seen systems that use the same plugin and have the options: 12:00, 12:30, 13:00, 13:30 and so on. I would like to make these two changes and I would be immensely grateful if someone could help me.

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>
  • The translation problem remains but I was able to solve the hours I was able to solve as follows: $('.js_date_time').datetimepicker({&#xA; format: 'd/m/Y H:i',&#xA; allowTimes:['00:00', '00:30', '01:00', '01:30', '2:00', '02:30',&#xA; '3:00', '3:30', '04:00', '04:30', '05:00', '05:30','06:00', '06:30'&#xA; ],&#xA; }); Note: I did not put the rest of the hours here for the sake of character limitation but I can understand the idea. I hope it helps anyone who finds themselves in the same situation as me.

5 answers

4

About the en, I think it helps you this way:

$('.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'
});

I’ve researched some teams that do this tune-up for minutes, so I’ll leave here two links from datetime. I believe that referencing in the same way as the example above on the dates about the time, can be of great help.

Option 1

Option 2

Obs: Both links are lang and locale, that ends up making obsolete the above example if you follow one of the two, but I left the example to make clear how to create a "translation" if you have difficulties with the locale/lang.

Updated:

Aiming at their script and reading a little about, the settings are quite similar to what I made available, but with small changes. Follow the basic example of script that you are using:

Obs: script with parts copied on the developer’s website of this 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'
});

On the part of setting the hours on your Datetime, I checked that piece of script:

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

Obs: This example was done in "manual" mode of "translation" to be an option for more, if the lang of your script not working properly in your code

  • Thanks for the return but as I had said earlier the datetimepicker that I am using is not the standard of html, not the bootstrap and not the Jquery UI. It is the following link: Jquery Date and Time Picker Plugin.

  • @Guilhermeramalho I understood my friend, I will complete with what I just read about this script that you are using in relation to the hours set. But for what you can understand in this script, you can use the similar example I posted above. I will complete the answer

2


@William, take the example code! Bootstrap with 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>
  • Man, I really appreciate you going to all the trouble and having the good will to help me out, but this timepicker you use in the example is the bootstrap native, right? What I’m using is different as shown in the image of my previous comment and the link I put at the beginning of the question precisely so it is not confused with Jquery UI Datetimpicker and others.

  • 1

    I understand, I checked your posted link, I went to see about xdsoft documentation, but jQuery UI is different jQuery, I don’t even use jQuery UI =s ... ai complicated rss. Put before jquery and then jquery-ui, see another example http://codepen.io/KingRider/pen/GqXOXp without bootstrap ;-)

  • Dude, it worked now. Problem is, I was calling the property this way: $('.js_date_time').datetimepicker({&#xA; format: 'd/m/Y H:i',&#xA; }).setLocale('pt-BR'); When you should be calling the separate method. So: $('.js_date_time').datetimepicker().setLocale('pt-BR');&#xA;$('.js_date_time').datetimepicker({&#xA; format: 'd/m/Y H:i',&#xA; });

  • Thank you for all your patience and help.

  • ah understood and strange! How nice it solved.

0

(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'
    });

0

(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' });

0

Very Simple Personal

//Calendario 
$('#datetimepicker1').datetimepicker({
    format: 'DD/MM/YYYY HH:mm'
});

Browser other questions tagged

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