Como localizo o jQuery UI Datepicker?

121

Eu realmente preciso de um calendário suspenso localizado. Um calendário em inglês não comunica exatamente excelência em um site norueguês ;-)

Eu experimentei o jQuery DatePicker , o site deles diz que ele pode ser localizado, mas isso não parece funcionar.

Estou usando o ASPNET.MVC e quero realmente manter uma biblioteca de javascript. Nesse caso, jQuery.

O calendário do ajax toolkit seria aceitável, se ele também exibisse nomes noruegueses.

Atualização: Incrível! Percebo que estão faltando os arquivos de idioma, um detalhe não tão pequeno :-)

Thomas Eyde
fonte
Confira esta demonstração. A fonte dá um bom exemplo de como fazê-lo.
Thomas Watnedal

Respostas:

183

Para aqueles que ainda têm problemas, você deve baixar o arquivo de idioma que deseja aqui:

https://github.com/jquery/jquery-ui/tree/master/ui/i18n

e inclua-o na sua página como esta, por exemplo (idioma italiano):

<script type="text/javascript" src="/scripts/jquery.ui.datepicker-it.js"></script>

então use o código de zilverdistel : D

max4ever
fonte
Esse link está ausente na página da interface do usuário do jQuery? Eu não posso encontrá-lo lá jqueryui.com/datepicker/#localization
Adam
79

Eu descobri a demonstração e a implementei da seguinte maneira:

$.datepicker.setDefaults(
  $.extend(
    {'dateFormat':'dd-mm-yy'},
    $.datepicker.regional['nl']
  )
);

Eu também precisava definir o padrão para o formato da data ...

Zilverdistel
fonte
11
funcionou para mim:$.datepicker.setDefaults($.datepicker.regional["uk"]);
alaster
26

A corda $.datepicker.regional['it'] não traduz todas as palavras.

Para traduzir o datepicker, você deve especificar algumas variáveis:

$.datepicker.regional['it'] = {
    closeText: 'Chiudi', // set a close button text
    currentText: 'Oggi', // set today text
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',   'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'], // set month names
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'], // set short month names
    dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'], // set days names
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'], // set short day names
    dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'], // set more short days names
    dateFormat: 'dd/mm/yy' // set format date
};

$.datepicker.setDefaults($.datepicker.regional['it']);

$(".datepicker").datepicker();

Nesse caso, o seu datepicker é traduzido corretamente.

kampageddon
fonte
Esta resposta mostra como adicionar a localização diretamente, sem importar bibliotecas. Este é o método que eu precisava porque estou utilizando o jQuery $.getScript()para buscar a biblioteca principal na API hospedada do Google.
Alexander Dixon
11
  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "&#x3C;上月",
    nextText: "下月&#x3E;",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

o código i18n pode ser copiado de https://github.com/jquery/jquery-ui/tree/master/ui/i18n

user1087079
fonte
8

1. Você precisa carregar os arquivos da jQuery UI i18n:

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js">
</script>

2. Use a $.datepicker.setDefaultsfunção para definir padrões para TODOS os seletores de data.

3. Caso deseje substituir as configurações antes de definir os padrões, você pode usar isto:

var options = $.extend(
    {},                                  // empty object
    $.datepicker.regional["fr"],         // fr regional
    { dateFormat: "d MM, y" /*, ... */ } // your custom options
);
$.datepicker.setDefaults(options);

A ordem dos parâmetros é importante devido à maneira como jQuery.extendfunciona. Dois exemplos incorretos:

/*
 * This overwrites the global variable itself instead of creating a
 * customized copy of french regional settings
 */
$.extend($.datepicker.regional["fr"], { dateFormat: "d MM, y"});

/*
 * The desired dateFormat is overwritten by french regional 
 * settings' date format
 */
$.extend({ dateFormat: "d MM, y"}, $.datepicker.regional["fr"]);
Salman A
fonte
5

Aqui está um exemplo de como você pode fazer a localização sem alguma biblioteca extra.

jQuery(function($) {
  $('input.datetimepicker').datepicker({
    duration: '',
    changeMonth: false,
    changeYear: false,
    yearRange: '2010:2020',
    showTime: false,
    time24h: true
  });

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '&#x3c;Dříve',
    nextText: 'Později&#x3e;',
    currentText: 'Nyní',
    monthNames: ['leden', 'únor', 'březen', 'duben', 'květen', 'červen', 'červenec', 'srpen',
      'září', 'říjen', 'listopad', 'prosinec'
    ],
    monthNamesShort: ['led', 'úno', 'bře', 'dub', 'kvě', 'čer', 'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'],
    dayNames: ['neděle', 'pondělí', 'úterý', 'středa', 'čtvrtek', 'pátek', 'sobota'],
    dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    dayNamesMin: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
    weekHeader: 'Týd',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };

  $.datepicker.setDefaults($.datepicker.regional['cs']);
});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script src="datepicker-cs.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      console.log("test");
      $("#test").datepicker({
        dateFormat: "dd.m.yy",
        minDate: 0,
        showOtherMonths: true,
        firstDay: 1
      });
    });
  </script>
</head>

<body>
  <h1>Here is your datepicker</h1>
  <input id="test" type="text" />
</body>
</html>

Marek Pavelek
fonte
5

Se você usar datepicker e moment.js da interface do usuário do jQuery no mesmo projeto, deverá extrair os dados da localidade do moment.js:

// Finnish. you need to include separate locale file for each locale: https://github.com/moment/moment/tree/develop/locale
moment.locale('fi'); 

// fetch locale data internal structure, so we can shove it inside jQuery UI
var momentLocaleData = moment.localeData(); 

$.datepicker.regional['user'] = {
    monthNames: momentLocaleData._months,
    monthNamesShort: momentLocaleData._monthsShort,
    dayNames: momentLocaleData._weekdays,
    dayNamesShort: momentLocaleData._weekdaysMin,
    dayNamesMin: momentLocaleData._weekdaysMin,
    firstDay: momentLocaleData._week.dow,
    dateFormat: 'yy-mm-dd' // "2016-11-22". date formatting tokens are not easily interchangeable between momentjs and jQuery UI (https://github.com/moment/moment/issues/890)
};

$.datepicker.setDefaults($.datepicker.regional['user']);
joonas.fi
fonte
3

apenas no caso de alguém ainda estar preso a isso, apesar das outras respostas, resolvi isso com:

$.datepicker.setDefaults($.datepicker.regional['en-GB']);

observe o 'GB' extra. Depois disso, funcionou bem.

DevDonkey
fonte
1

Esta solução pode ajudar.

$(document).ready(function () {
  var userLang = navigator.language || navigator.userLanguage;

  var options = $.extend({},
    $.datepicker.regional["ja"], {
      dateFormat: "yy/mm/dd",
      changeMonth: true,
      changeYear: true,
      highlightWeek: true
    }
  );

  $("#japaneseCalendar").datepicker(options);
});
#ui-datepicker-div {
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
</head>
<body>
<h3>Japanese JQuery UI Datepicker</h3>
<input type="text" id="japaneseCalendar"/>

</body>
</html>


fonte
1

Eu o resolvi adicionando a propriedade data-date-language="it":

$(document).ready(function() {
  $('#TxtDaDataDoc_Val').datepicker();
});
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="form-group col-xs-2 col-sm-2 col-md-2">
    <div class="input-group input-append date form-group" 
        id="TxtDaDataDoc" data-date-language="it">
        <input type="text" class="form-control" name="date" 
               id="TxtDaDataDoc_Val" runat="server" />
        <span class="input-group-addon add-on">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

Daniele
fonte
0
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src=">/js/datepicker-fr.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({minDate: 0 , dateFormat: 'mm/dd/yy'});
});

</script>

<script type="text/javascript">
$(document).ready(function(){
$('#datepicker').datepicker($.datepicker.regional['fr']);
});
</script>
Amusetoi
fonte
0

$ .datepicker.regional ["vi-VN"] = {closeText: ""óng", prevText: "TrTc", nextText: "Sau", currentText: "Hô nay", monthNames: ["Thung một", "Tháng hai "," Tháng ba "," Tháng tư "," Thâng năm "," Tháng sáu "," Thāng bảy "," Tháng tám "," Thing chín "," Thing mười "," Thing mười một "," Thing mười hai "], monthNamesShort: [" Một "," Hai "," Ba "," Bốn "," Năm "," Sáu "," Bảy "," Tám "," Chín "," Mười "," Mười một "," Mười hai "], dayNames: ["Chủnhật "," Thứ hai "," Thứ ba "," Thứ tư "," Thứnăm "," Thứ sáu "," Thứbảy "], dayNamesShort: [" CN "," Hai "," Ba ", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T2", "T3", "T4", "T5", "T6", "T7"], weekHeader : "Tuần", dateFormat: "dd / mm / aa", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], weekHeader: "Tuần", dateFormat: "dd / mm / aa", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};dayNamesShort: ["CN", "Hai", "Ba", "Tư", "Năm", "Sáu", "Bảy"], dayNamesMin: ["CN", "T2", "T3", "T4" , "T5", "T6", "T7"], weekHeader: "Tuần", dateFormat: "dd / mm / aa", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / aa", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / aa", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);
Trần Văn Huy
fonte