如何将日期时间选择器与 ASP.NET 本地化集成

How to integrate datetimepicker with ASP.NET localisation

本文关键字:ASP NET 本地化 集成 选择器 日期 时间      更新时间:2023-09-26

我正在使用Trent Richardson的JQuery的datetimepicker扩展,通过NuGet获得:http://trentrichardson.com/examples/timepicker/

Trent的文档说,你可以创建一个本地化的日期时间选择器,如下所示:

$('#basic_example_4').timepicker(
    $.timepicker.regional['es']
);

我通过在文本框上设置 CssClass 属性将日期时间选择器附加到 ASP.NET 文本框,并让 JavaScript 通过选择 CSS 类来附加日期时间选择器:

<script type="text/javascript">
    $(document).ready(function () {
        $('.calendarStartDateTime').datetimepicker({
            dateFormat: 'yy-mm-dd',
            timeFormat: 'hh:mm TT',
            controlType: 'select',
            oneLine: true
        });
    });
</script>
...
<asp:TextBox ID="StartDateTime" runat="server" CssClass="calendarStartDateTime" meta:resourcekey="StartDateTimeResource1"></asp:TextBox>

我的 ASP.NET 页声明设置culture="auto"uiculture="auto",以便所有 ASP.NET 元素都从浏览器设置中选取区域性设置(因此我可以使用 ASP.NET 资源来本地化文本)。

我希望日期时间选择器也根据浏览器设置自动应用本地化,与服务器端组件的本地化方式保持一致。我如何实现这一点?我是否需要在 Javascript 中插入一个 ASP.NET 标签,如下所示:

<script type="text/javascript">    
    $(document).ready(function () {
        $('.calendarStartDateTime').datetimepicker({
            $.timepicker.regional[<% magic happens here %>],
            controlType: 'select',
            oneLine: true
        });
    });
</script>

还是应该在纯JavaScript中检测浏览器文化?


编辑:根据@smirnov的回答,我的时间选择器的最终代码是:

<script type="text/javascript">
    $(document).ready(function () {
        $('.calendarStartDateTime').datetimepicker(
            $.extend(
                {},
                $.datepicker.regional['<%= System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName %>'],
                $.timepicker.regional['<%= System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName %>'],
                {
                    dateFormat: 'yy-mm-dd',
                    timeFormat: '<%= System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortTimePattern %>',
                    controlType: 'select',
                    oneLine: true
                }
            )
        )
    });
</script>

此代码正确合并了 jQuery 内置日期选取器的区域化设置、Trent Richardson 的时间选取器属性和一些自定义设置。

使用 CultureInfo.CurrentCulture.TwoLetterISOLanguageName

由于时间选择器似乎使用国家/地区代码作为区域值,请尝试

...
$.timepicker.regional['<%=System.Globalization.CultureInfo.CurrentCulture.TwoLetterISOLanguageName%>'],
...