How to put time and date in input fields with jQuery and jQuery UI?

1

How do you include jQuery UI style files and JavaScript files so that the date and time inputs perfectly display the fields in pt_BR? Do I need to change the attributes of the libraries?

    
asked by anonymous 21.08.2014 / 17:54

1 answer

1

This is the code whose styles can be placed in the header and the javascript libraries along with the codes and attributes can be placed in the footer or in an external file and is suitable for any system that uses html/css/javascript/jquery to work.

<link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.min.css" type="text/css" rel="stylesheet" />
<link href="css/jquery.ui.timepicker.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.js"></script><scriptsrc="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="js/jquery.ui.timepicker.js"></script>
    <script>
        $(function(){

            jQuery('#timepicker').timepicker();
            jQuery('#datepicker').datepicker();

            /* Brazilian initialisation for the jQuery UI date picker plugin. */
            /* Written by Leonildo Costa Silva ([email protected]). */
            (function( factory ) {
                if ( typeof define === "function" && define.amd ) {

                    // AMD. Register as an anonymous module.
                    define([ "../datepicker" ], factory );
                } else {

                    // Browser globals
                    factory( jQuery.datepicker );
                }
            }(function( datepicker ) {

            datepicker.regional['pt-BR'] = {
                closeText: 'Fechar',
                prevText: '&#x3C;Anterior',
                nextText: 'Próximo&#x3E;',
                currentText: 'Hoje',
                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'],
                dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'],
                dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
                dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],
                weekHeader: 'Sm',
                dateFormat: 'dd/mm/yy',
                firstDay: 0,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''};
            datepicker.setDefaults(datepicker.regional['pt-BR']);

            return datepicker.regional['pt-BR'];

            }));
            /* Brazilian Portuguese translation for the jQuery Timepicker Addon */
            /* Written by Diogo Damiani ([email protected]) */
            (function ($) {
                $.timepicker.regional['pt-BR'] = {
                    timeOnlyTitle: 'Escolha o horário',
                    timeText: 'Horário',
                    hourText: 'Hora',
                    minuteText: 'Minutos',
                    secondText: 'Segundos',
                    millisecText: 'Milissegundos',
                    microsecText: 'Microssegundos',
                    timezoneText: 'Fuso horário',
                    currentText: 'Agora',
                    closeText: 'Fechar',
                    timeFormat: 'HH:mm',
                    amNames: ['a.m.', 'AM', 'A'],
                    pmNames: ['p.m.', 'PM', 'P'],
                    isRTL: false
                };
                $.timepicker.setDefaults($.timepicker.regional['pt-BR']);
            })(jQuery);

        });
    </script>
    
21.08.2014 / 17:54