Datepicker does not apply changes made

Asked

Viewed 1,297 times

1

I’m using the bootstrap datepicker, but when I make some modifications they don’t 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 language pt and changed tbm 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 it as follows:

<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, as I do to 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
        });
});
javascript html5 bootstrap-3

  • but still in English

  • You wouldn’t have to do that. Just include this official script in your code: <script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.pt-BR.min.js"></script> and put the option language: "pt-BR" in its element.

  • when I put language: "en-br" the calendar doesn’t open anymore

  • You are doing something wrong. Look at Mark’s answer below.

  • really, I had forgotten a comma, but even so, it’s still in English and Marcus’s didn’t work either

  • Now that I’ve noticed, Chrome is in English, but Mozila and IE is in Portuguese...

  • No Chrome here gets in PT-BR normally. Look my answer below. It’s working.

  • A comma was missing after language: "pt-BR"... Always place a comma at the end of each line inside the object, to separate the values, except in the last line. Without this single comma, it gives error in the whole script.

  • Yes Dvd, I fixed it already, I just forgot to edit here, I even commented here, if you notice some comments above you will see. Paulo, I had already seen its implementation, but in my project there is something very wrong that is giving some very strange errors

  • If any plugin is not conflicting with the jQuery, I don’t know what it could be.

  • I’m pretty sure it’s conflict anyway, but I don’t know how to fix it

Show 6 more comments

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

Or try it directly

Vc can set global standards before defining inputs:

$(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 define 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: Caution. 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: https://api.jqueryui.com/datepicker/

  • I tested both ways, when I use the global patterns the calendar does not appear and the individual input continues in English

1

Tested and working example:

$(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>
<script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.pt-BR.min.js"></script>

<input type="text" id="data">

-1

You have to put the name you put on the Dates

var dates = $.fn.datepicker.dates = {
       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"
        }

};

$(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",
            onSelect: checaVazio
        });
});

Browser other questions tagged javascript html5 bootstrap-3

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