尝试本地化 jQuery 移动日期选择器输入答案

【问题标题】：Trying to localise a jQuery mobile datepicker input尝试本地化 jQuery 移动日期选择器输入
【发布时间】：2012-11-26 10:07:16
【问题描述】：

我有一个 jQuery 移动日期选择器（比如 here），它使用 <input type="date" />，它需要能够以适当的格式显示日期，具体取决于区域设置。

默认情况下，日期选择器日历以英文-UK 样式格式(dd-mm-yyyy) 的日期显示。有时，该服务将在美国拥有用户，因此希望显示为美国格式(mm-dd-yyyy)。

区域设置在网站的配置中定义，使用globalization culture 属性。理想情况下，日期选择器需要响应配置中的语言环境设置，而不是用户的设置。

因此，这不是语言等的情况。只需选择日期并显示给用户后，输入区域中的格式即可。由于某些本地化功能，在配置中设置文化可以完美地格式化网站上其他地方的日期字符串，当显示为字符串时。仅在日期选择器中这是一个问题。

编辑：所以，问题是 - 是否可以更改 datepicker 输入显示日期的格式？

编辑 2：再环顾一番后，似乎日期格式是由用户的本地设置决定的，不能被覆盖。肯定是这样吗？如果是这样，有什么方法可以测试这个功能吗？我尝试将本地设置更改为美国，但到目前为止没有看到输出发生任何变化。如果我知道它以这种方式成功运行，那么运行它可能就足够了。

编辑 3：我现在能够成功地测试更改本地系统设置时的格式更改。这样做应该没问题。谢谢！

【问题讨论】：

糟糕，可能应该更清楚地说明这一点。现在在编辑中添加。

标签： jquery asp.net html jquery-ui jquery-mobile

【解决方案1】：

稍微研究一下代码（好吧，不是很少，而是很多！），我能够用这段代码解决问题：

/* Brazilian initialisation for the jQuery UI date picker plugin. */
/* Written by Leonildo Costa Silva (leocsilva@gmail.com). */
jQuery(function($){
    $.datepicker.regional['pt-BR'] = {
        closeText: 'Fechar',
        prevText: '&#x3c;Anterior',
        nextText: 'Pr&oacute;ximo&#x3e;',
        currentText: 'Hoje',
        monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',
        'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
        'Jul','Ago','Set','Out','Nov','Dez'],
        dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
        dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 0,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };

    $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
    $.mobile.date.prototype._setOptions($.datepicker.regional['pt-BR']);
    $(":jqmData(role='date')").datepicker('destroy');
    $(":jqmData(role='date')").datepicker();
});

上面的代码（发挥神奇作用）的重要和附加部分是这样的：

    $.mobile.date.prototype._setOptions($.datepicker.regional['pt-BR']);
    $(":jqmData(role='date')").datepicker('destroy');
    $(":jqmData(role='date')").datepicker();

【讨论】：

谢谢，自己想不通！

【解决方案2】：

如果您使用this 数据选择器直到 JQM 版本 1.1，那么答案是否定的，您可以在其 js 文件中更改 ot 但不能动态更改。

但是看看this 日期选择器。我已经在我的 android/iphone 应用程序上对其进行了测试，它运行良好，并且可以动态更改。

还有一个DateBox，但我没有这方面的经验，这给我带来了一些问题。

【讨论】：

【解决方案3】：

找到更好的解决方案。而不是这个：

$.mobile.date.prototype._setOptions($.datepicker.regional['pt-BR']);
$(":jqmData(role='date')").datepicker('destroy');
$(":jqmData(role='date')").datepicker();

您只能在脚本调用中插入“延迟”属性来禁用异步加载。例如：

            <script src="/includes/jquery.mobile-1.4.5.min.js"></script>
            <script src="/layout_mobile/js/jquery-ui/datepicker.js" defer></script>
            <script src="/layout_mobile/js/jquery.mobile.datepicker.js" defer></script>
            <script src="/layout_mobile/js/jquery.ui.datepicker-pt-BR.js" defer></script>

【讨论】：