如何本地化jQuery UI Datepicker？

103

我真的需要一個本地化的下拉日曆。英語日曆並不完全溝通上的挪威網站;-)如何本地化jQuery UI Datepicker？

我已經嘗試與jQuery DatePicker，他們的網站上說，它可以是局部卓越，但是這似乎並沒有工作。

我使用ASPNET.MVC，我真的想堅持一個JavaScript庫。在這種情況下，jQuery。

ajax工具包日曆是可以接受的，只要它也可以顯示挪威人的名字。

更新：太棒了！我看到我缺少語言文件，一個不那麼小的細節:-)

來源

2009-01-30 Thomas Eyde

退房[這]（http://jqueryui.com/datepicker/#localization 「演示」）演示。源代碼提供了一個很好的例子來說明如何去做。 – 2009-01-30 09:40:19

我想通了演示，並實現它的方式如下：

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

我需要設置的日期格式默認太...

來源

2010-05-25 14:08:17 Zilverdistel

這爲我工作︰`$ .datepicker.setDefaults（$。datepicker.regional [「uk」]）;` – alaster 2013-11-21 07:38:10

170

對於那些仍然有問題，你必須下載的語言從這裏提交你想：

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

，然後包括在您的網頁這樣的，例如（意大利語）：

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

然後使用zilverdistel's code：d

來源

2011-03-02 16:51:28 max4ever

這個鏈接在jQuery UI頁面中缺少？我找不到它http://jqueryui.com/datepicker/#localization – Adam 2016-06-15 10:35:12

您需要加載jQuery UI的國際化文件：

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

2.使用$.datepicker.setDefaults函數爲所有日期選擇器設置默認值。

如果你想覆蓋設置，您可以使用此默認設置之前，（S）：

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

參數的順序是由於的方式jQuery.extend作品重要。兩個不正確的示例：

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

來源

2014-12-28 09:29:53

字符串$.datepicker.regional['it']不能翻譯所有單詞。

對於翻譯的日期選擇器必須指定一些變量：

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

在這種情況下您的日期選擇正確翻譯。

來源

2015-06-19 12:06:26 kampageddon

下面是如何在沒有額外庫的情況下進行本地化的示例。

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>

來源

2015-11-07 15:49:29

謝謝Marek，它爲我工作 – Ovis 2017-03-01 11:13:30

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

的國際化代碼可以從https://github.com/jquery/jquery-ui/tree/master/ui/i18n

來源

2016-03-10 03:06:03 user1087079

以防萬一有人被複制依然停留在此，儘管其他的答案，我解決了這個有：

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

注意e xtra'GB'。之後，它工作得很好。

來源

2016-10-09 17:04:46 DevDonkey

如果你使用jQuery UI的日期選擇器和moment.js在同一個項目，你應該搭載關閉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']);

來源

2016-11-22 12:18:08

該解決方案可幫助。

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

來源

2017-12-05 04:41:23

如何本地化jQuery UI Datepicker？

回答

相關問題