Jak zlokalizować jQuery UI Datepicker?

103

Naprawdę potrzebuję zlokalizowanego kalendarza rozwijanego. Kalendarz angielski nie dokładnie komunikować doskonałości na norweskiej stronie ;-)Jak zlokalizować jQuery UI Datepicker?

I eksperymentowali z jQuery DatePicker, ich stronie internetowej twierdzi, że może być lokalizowane jednak, że nie wydają się działać.

Używam ASPNET.MVC i naprawdę chcę trzymać się jednej biblioteki javascript. W tym przypadku jQuery.

Kalendarz zestawu narzędzi ajax byłby do przyjęcia, gdyby tylko on również wyświetlał norweskie nazwy.

Aktualizacja: Awesome! Widzę jestem brakujące pliki językowe, a nie tak drobny szczegół :-)

Źródło

2009-01-30 Thomas Eyde

Sprawdź się [to] (http://jqueryui.com/datepicker/#localization "demo") demo. Źródło podaje dobry przykład tego, jak to zrobić. –

zorientowali się demo i wprowadziły go w następujący sposób:

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

co potrzebne, aby ustawić domyślne dla DATEFORMAT zbyt ...

Źródło

2010-05-25 14:08:17 Zilverdistel

to działało dla mnie: '$ .datepicker.setDefaults ($. Datepicker.regional [" uk "]);' – alaster

170

dla tych, którzy nadal mają problemy, trzeba pobrać język złożyć chcą od tutaj:

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

a następnie umieścić go na swojej stronie jak to na przykład (język włoski):

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

następnie użyć zilverdistel's code: D

Źródło

2011-03-02 16:51:28 max4ever

Czy tego linku brakuje na stronie jQuery UI? Nie mogę go tam znaleźć http://jqueryui.com/datepicker/#localization – Adam

1. Trzeba załadować pliki i18n jQuery UI :

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

2. Zastosowanie $.datepicker.setDefaults funkcja ustawiania domyślnych dla WSZYSTKICH datepickerów.

3. W przypadku, gdy chcesz nadpisać ustawienie (s) przed ustawieniem domyślnych można użyć tego:

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

Kolejność parametrów jest ważne ze względu na sposób jQuery.extend robót. Dwa przykłady: nieprawidłowe

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

Źródło

2014-12-28 09:29:53

Ciąg $.datepicker.regional['it'] nie tłumaczą wszystkich słów.

Aby przetłumaczyć datepicker należy określić kilka zmiennych:

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

W tym wypadku datepicker jest prawidłowo przetłumaczone.

Źródło

2015-06-19 12:06:26 kampageddon

Oto przykład, w jaki sposób można wykonać lokalizację bez dodatkowej biblioteki.

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="[email protected]*" 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="[email protected]*" 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>

Źródło

2015-11-07 15:49:29

Dzięki Marek, zadziałało to dla mnie – Ovis

$.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: "年" 
    });

kod i18n mogą być kopiowane z https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Źródło

2016-03-10 03:06:03 user1087079

tylko w przypadku gdy ktoś jest wciąż tkwi w tej sprawie, mimo innych odpowiedzi, I rozwiązać ten z:

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

uwaga e xtra "GB". Potem wszystko działało dobrze.

Źródło

2016-10-09 17:04:46 DevDonkey

Jeśli używasz datepicker i moment.js jQuery UI jest na tym samym projekcie, należy na barana off danych locale moment.js męska:

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

Źródło

2016-11-22 12:18:08

To rozwiązanie może pomóc.

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

Źródło

2017-12-05 04:41:23

Jak zlokalizować jQuery UI Datepicker?

Odpowiedz

Powiązane problemy