Datepicker does not apply changes made

Navigation
1

I'm using the bootstrap datepicker, but when I make some modifications they do not apply 

var defaults = $.fn.datepicker.defaults = {
        autoclose: false,
        beforeShowDay: $.noop,
        calendarWeeks: false,
        clearBtn: true,
        daysOfWeekDisabled: [],
        endDate: Infinity,
        forceParse: true,
        format: 'dd/mm/yyyy',
        keyboardNavigation: true,
        language: 'pt',*
        minViewMode: 0,
        multidate: false,
        multidateSeparator: '-',
        orientation: "auto",
        rtl: false,
        startDate: -Infinity,
        startView: 0,
        todayBtn: false,
        todayHighlight: false,
        weekStart: 0
    };

* I put the pt language and I changed it here: 

var dates = $.fn.datepicker.dates = {
        en: {
            days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
            months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            today: "Today",
            clear: "Clear"
        },

       pt: {
            days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado", "Domingo"],
            daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab", "Dom"],
            daysMin: ["Do", "Sg", "Te", "Qa", "Qi", "Sx", "Sa", "Do"],
            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"],
            today: "Hoje",
            clear: "Limpar"
        }

    };

Using this way: 

<form method="post" action="">
    Início do período:
    <input type="text" id="calendarioIni" name="dataInicio">
    Fim do período:
    <input type="text" id="calendarioFim" name="dataFim"> 
    <input style="display: none;" type="submit" value="Consultar" />                                    
    <br><br><br>

    <?php if(isset($_POST['dataInicio']) && isset($_POST['dataFim']))
    {
        $dataIni = $_POST['dataInicio'];
        $dataFim = $_POST['dataFim'];
        echo $dataIni."<br>";//Teste para verificar o valor nas variáveis que recebem a data via POST
        echo $dataFim."<br>";
    } 
    ?>                                    
</form>

When I open the calendar it is in English, how do I apply this modification? 

$(document).ready(function() 
    {
        $('#calendarioIni').datepicker({
            format: 'dd/mm/yyyy',
            startDate: '01/01/1998', // 1 de Janeiro de 1998
            endDate: '31/12/1998', // 31 de Janeiro de 1998,
            language: "pt-BR",
            onSelect: checaVazio
        });
});
    
asked by anonymous 13.12.2017 / 19:18

2 answers

1

use the translation of the datapiker 

<script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/boot‌​strap-datepicker/js/‌​locales/bootstrap-da‌​tepicker.pt-BR.min.j‌​s"></script>$('.datepicker').datepicker({language:'pt-BR'});

Ortryitdirectly

Youcansettheglobaldefaultsbeforeyoudefinetheinputs:

$(function(){$.datepicker.setDefaults({showOn:"focus",
    dateFormat: "dd/mm/yy",
    dayNames: ["Domingo", "Segunda", "Terça", "Quarte", "Quinta", "Sexta", "Sábado"],
    dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']
});

Or you can set the attributes of each input individually: 

$(function () {
 $("#data").datepicker({
    showOn: "focus",
    dateFormat: "dd/mm/yy",
    dayNames: ["Domingo", "Segunda", "Terça", "Quarte", "Quinta", "Sexta", "Sábado"],
    dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']
 });
});

NOTE: Be careful. It is not good programming practice to change the library manually. Only use this if there is no other way to solve your "problem".

Source: link

    
13.12.2017 / 19:29
1

Example tested and working: 

$(function () {
  $('#data').datepicker({
    language: 'pt-BR'
  });
});
<link type="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script><scripttype="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script><scripttype="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.pt-BR.min.js"></script><inputtype="text" id="data">
    
13.12.2017 / 19:35
Make screen reader read image alt text Sort file presentation depending on the extension