Come localizzo il Datepicker dell'interfaccia utente di jQuery?

Ho davvero bisogno di un calendario a discesa localizzato. Un calendario inglese non comunica esattamente l'eccellenza su un sito web norvegese ;-)

Ho sperimentato jQuery DatePicker , il loro sito web dice che può essere localizzato, ma sembra che non funzioni.

Sto usando ASPNET.MVC e voglio davvero attenermi a una libreria javascript. In questo caso jQuery.

Il calendario del toolkit ajax sarebbe accettabile, se solo mostrasse anche nomi norvegesi.

Aggiornamento: fantastico! Vedo che mi mancano i file della lingua, un dettaglio non così secondario :-)

Per coloro che hanno ancora problemi, devi scaricare il file della lingua che desideri da qui:

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

e poi includilo nella tua pagina come questo per esempio (lingua italiana):

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

quindi usa il codice di zilverdistel : D

Ho capito la demo e l'ho implementata nel modo seguente:

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

Avevo bisogno di impostare anche il valore predefinito per il formato della data ...

La stringa $.datepicker.regional['it']non traduce tutte le parole.

Per tradurre il datepicker devi specificare alcune variabili:

$.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();

In questo caso il tuo datepicker è tradotto correttamente.

  $.datepicker.setDefaults({
    closeText: "关闭",
    prevText: "<上月",
    nextText: "下月>",
    currentText: "今天",
    monthNames: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
    "七月","八月","九月","十月","十一月","十二月" ],
    dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
    dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
    dayNamesMin: [ "日","一","二","三","四","五","六" ],
    weekHeader: "周",
    dateFormat: "yy-mm-dd",
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: "年"
  });

il codice i18n potrebbe essere copiato da https://github.com/jquery/jquery-ui/tree/master/ui/i18n

1. È necessario caricare i file i18n dell'interfaccia utente jQuery:

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

2. Utilizzare la $.datepicker.setDefaultsfunzione per impostare i valori predefiniti per TUTTI i datepicker.

3. Nel caso in cui desideri sovrascrivere le impostazioni prima di impostare i valori predefiniti, puoi utilizzare questo:

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

L'ordine dei parametri è importante a causa del modo in cui jQuery.extendfunziona. Due esempi errati:

/*
 * 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"]);

Ecco un esempio di come puoi eseguire la localizzazione senza alcuna libreria aggiuntiva.

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

  $.datepicker.regional['cs'] = {
    closeText: 'Zavřít',
    prevText: '<Dříve',
    nextText: 'Později>',
    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>

Se utilizzi datepicker dell'interfaccia utente di jQuery e moment.js sullo stesso progetto, dovresti eseguire il piggyback dei dati locali di 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']);

nel caso qualcuno fosse ANCORA bloccato su questo, nonostante le altre risposte, ho risolto questo con:

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

notare il "GB" in più. Dopo di che ha funzionato bene.

Questa soluzione può aiutare.

$(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>

L'ho risolto aggiungendo la proprietà 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>

<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>

$ .datepicker.regional ["vi-VN"] = {closeText: "Đóng", prevText: "Trước", nextText: "Sau", currentText: "Hôm nay", monthNames: ["Tháng 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 "," Tháng chín "," Tháng mười "," Tháng mười một "," Tháng 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", "T3", "T4", "T5", "T6", "T7"], weekHeader : "Tuần", dateFormat: "dd / mm / yy", 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 / yy", 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 / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};weekHeader: "Tuần", dateFormat: "dd / mm / yy", firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: ""};

        $.datepicker.setDefaults($.datepicker.regional["vi-VN"]);