如何根据浏览器语言设置 Jquery UI Datepicker 日期格式？答案

【问题标题】：How to set Jquery UI Datepicker date format based on browser language?如何根据浏览器语言设置 Jquery UI Datepicker 日期格式？
【发布时间】：2014-04-18 11:50:27
【问题描述】：

我想从浏览器语言设置 Jquery UI DatePicker 日期格式，例如，如果 Google Chrome 中的“英语（英国）”在 语言和输入设置...（chrome: //settings/languages) 那么日期格式应该是 dd/mm/yyyy 并且如果 "English (United States)" 在列表的顶部，那么日期格式应该是 mm/dd /yyyy。有没有办法在 Chrome、Firefox 和 IE 中从浏览器语言设置日期格式...？

【问题讨论】：

browser language 是什么意思？
在“chrome://settings/languages”中，如果语言是英语（英国）或“en-GB”，那么 Jquery DatePicker 中的日期格式应该是“dd/mm/yyyy”，如果“美国”然后是“mm/dd/yyyy”，我必须根据浏览器首选或选择的语言设置日期格式...
您无法从浏览器设置或值中可靠地分辨出用户常用的日期格式。最好使用明确的格式（例如，使用月份名称，而不是数字）或让用户指定他们希望使用的格式。

标签： javascript jquery jquery-ui datepicker date-format

【解决方案1】：

在你的情况下，我建议检查语言

var userLang = navigator.language || navigator.userLanguage; 
// detect browser language but not a decent one 
if (userLang === "en-US") {
  $( ".selector" ).datepicker( "option", "dateFormat", "mm/dd/yyyy" );
} else {
  $( ".selector" ).datepicker( "option", "dateFormat", "dd/mm/yyyy" );
}

更新：

我正在研究 jQuery datepicker 的本地化，这里有一个 nice discussion 和一个不错的插件。

jQuery-localization，检测语言并为其加载相应的区域语言

$.localise('js/jquery.ui.datepicker');

注意： 默认情况下，它会查看为浏览器设置的区域设置，并且请求基于此的指定包的本地化。为了例如，如果语言环境是葡萄牙语/巴西 (pt-BR)，它将加载 js/jquery.ui.datepicker-pt.js 和 js/jquery.ui.datepicker-pt-BR.js。

【讨论】：

感谢您的回答，它看起来很适合我的情况，我也可以添加其他语言，或者我可以制作一个单独的 JS 文件，该文件将根据语言返回日期格式。
我的浏览器显示“en-us”，这可能会鼓励您将日期显示为月/日/年。但是，这不是我的系统设置。以明确的格式（如 ISO 8601 或 21-Mar-2014 或类似格式）显示日期要好得多。
@SohailxIN3N 我也在考虑它.. 只有英国和美国其他格式呢..
您的更新描述听起来像我所指的语言文件。下载后它们应该是 jQuery UI 的一部分。
非常感谢您与我分享您的知识，我认为“Jquery-localization”插件将是解决这种情况的好方法。

【解决方案2】：

这就是我正在处理的当前项目中的完成方式。不确定这是否是最好的方法，因为我相信 jQuery UI 中有可用的语言文件，但是 ...

var cfg = {
    container: '.datepicker',
    regional: {
        nl: {
            closeText: 'Sluiten',
            prevText: '←',
            nextText: '→',
            currentText: 'Vandaag',
            monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
            monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
            dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
            dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
            dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
            weekHeader: 'Wk',
            dateFormat: 'dd-mm-yy',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''
        }
    }
};

// extracted activation function
$.datepicker.regional = $.extend({}, $.datepicker.regional, cfg.regional);
$.datepicker.setDefaults($.datepicker.regional.nl);
this.datepicker.datepicker();

因此您可以在cfg 对象中添加语言并选择自定义格式。剩下要做的就是使传递给datepicker() 的语言动态化。可能来自 URL、cookie、会话、服务器变量……取决于您的项目如何使用语言。

希望对你有帮助。

【讨论】：