1

Preciso colocar um datapicker em uma página, o mesmo deve ser em português e em formato "dd/mm/yyyy".

<div class="form-group col-md-2">
    <input type='text' class='form-control  datepicker' name="datefilter" id='data' placeholder='Data' />
</div>

$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    language: 'pt-BR'
});

<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment-with-locales.min.js"></script>

O datapicker está aparecendo porém em Inglês e com formato "mm/dd/yyyyy"

0

2 Respostas 2

1

Vc pode definir os padrões globais antes de definir os 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']
});

Ou pode definir os atributos de cada input individualmente:

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

Viu a opção dateFormat? É isso.

OBS: Cuidado. Não é uma boa prática de programação alterar a biblioteca manualmente. Só recorra a isso se não houver outro jeito de resolver seu "problema".

Fonte: https://api.jqueryui.com/datepicker/.

0

Para colocá-lo em PT-BR, edite o arquivo "jquery-ui.js" e altere o bloco

Function Datepicker()

para

function Datepicker() {
    this._curInst = null; // The current instance in use
    this._keyEvent = false; // If the last event was a key event
    this._disabledInputs = []; // List of date picker inputs that have been disabled
    this._datepickerShowing = false; // True if the popup picker is showing , false if not
    this._inDialog = false; // True if showing within a "dialog", false if not
    this._mainDivId = "ui-datepicker-div"; // The ID of the main datepicker division
    this._inlineClass = "ui-datepicker-inline"; // The name of the inline marker class
    this._appendClass = "ui-datepicker-append"; // The name of the append marker class
    this._triggerClass = "ui-datepicker-trigger"; // The name of the trigger marker class
    this._dialogClass = "ui-datepicker-dialog"; // The name of the dialog marker class
    this._disableClass = "ui-datepicker-disabled"; // The name of the disabled covering marker class
    this._unselectableClass = "ui-datepicker-unselectable"; // The name of the unselectable cell marker class
    this._currentClass = "ui-datepicker-current-day"; // The name of the current day marker class
    this._dayOverClass = "ui-datepicker-days-cell-over"; // The name of the day hover marker class
    this.regional = []; // Available regional settings, indexed by language code
    this.regional[ "" ] = { // Default regional settings
        closeText: "Done", // Display text for close link
        prevText: "Prev", // Display text for previous month link
        nextText: "Next", // Display text for next month link
        currentText: "Today", // Display text for current month link
        monthNames: [ "Janeiro","Fevereiro","Março","Abril","Maio","Junho",
            "Julho","Agosto","Setembro","Outubro","Novembro","Dezembro" ], // Names of months for drop-down and formatting
        monthNamesShort: [ "Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez" ], // For formatting
        dayNames: [ "Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado" ], // For formatting
        dayNamesShort: [ "Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab" ], // For formatting
        dayNamesMin: [ "Dm","Se","Te","Qa","Qi","Sx","Sa" ], // Column headings for days starting at Sunday
        weekHeader: "Wk", // Column header for week of the year
        dateFormat: "dd/mm/yy", // See format options on parseDate
        firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
        isRTL: false, // True if right-to-left language, false if left-to-right
        showMonthAfterYear: false, // True if the year select precedes month, false for month then year
        yearSuffix: "" // Additional text to append to the year in the month headers
    };

a linha dateFormat: "dd/mm/yy", // See format options on parseDate é a responsável por editar o formato da data.

Já na sua página você chama o Datepicker:

<script src="jquery/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>

Onde <script src="jquery/jquery-ui.js"></script> é a pasta onde o JS está instalado!

1
  • 2
    Igor eu acho bem complicado editar arquivos do framework, porque na próxima vez que eu fizer um update, vou perder toda a alteração. Mas de qualquer forma obrigado pela dica.
    – b3r3ch1t
    Commented 11/12/2016 às 17:55

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 .