如何本地化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？

回答

相关问题