13

如何根据用户的语言环境在 jQuery UI 的 datepicker 中设置日期格式？

我得到源html：

<script type="text/javascript">
    $(function() {
        $(".datefield2").datepicker($.datepicker.regional['de']);
    });
</script>
<form action="/Home/TestDate" method="post">    <input class="datefield2 hasDatepicker valid" name="date" value="21.12.2012" type="text" id="date">
    <input type="submit" value="send">
</form>

如果在我得到的日期选择器中选择一个日期12/21/2012，但是我需要21.12.2012。

4

4 回答 4

17

使用dateFormat选项更改为自定义格式

$(function() {
    $(".datefield2").datepicker($.datepicker.regional['de']);
    $(".datefield2").datepicker('option','dateFormat','dd.mm.yy');
});

真正的问题是您需要手动包含本地化文件。

它们可以在https://github.com/jquery/jquery-ui/tree/master/ui/i18n
找到 。德语专用的是https://github.com/jquery/jquery-ui/blob/master/ ui/i18n/datepicker-de.js

演示（完全本地化）可以在http://jsfiddle.net/gaby/h07ny9ep/看到

于 2012-12-21T16:28:32.697 回答
2

您可以像这样设置日期格式： 

  $(".datefield2").datepicker({ "dateFormat": "dd.mm.yy"});
于 2012-12-21T16:27:09.193 回答
0

网络上的 JQuery 文档似乎在隐藏日期选择器的 i18n 文件的位置，例如

jQuery UI datepicker >= 1.11.0 的 i18n 文件在哪里

截至此发布链接：

https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/i18n/datepicker-de.js

似乎是有效的。如果我把它包括在内，它本身就不起作用。我最终使用了http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js这与我使用的 1.12 jquery 版本不同，但它似乎工作。

请注意，我在这里使用 iso 日期格式 2017-03-18 作为 yy-mm-dd 而不是德语语言环境样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
    $(function() {
        // https://stackoverflow.com/questions/494958/how-do-i-localize-the-jquery-ui-datepicker
        // https://stackoverflow.com/questions/13993619/how-to-set-locale-format-from-datepicker
        $(".datepicker").datepicker($.datepicker.regional['de']);
        $(".datepicker").datepicker('option','dateFormat','yy-mm-dd')
    });
</script>
</head>
于 2017-03-18T12:20:30.150 回答
0

由于似乎没有现成的语言环境信息，我决定使用一些不同的方法：我只使用 datepicker 来选择日期并从中检索日期，但为了显示，我使用普通的 div 和Date .toLocaleDateString()。这样，我就不必费心检索格式或更糟糕的情况——我自己提供它们。

JSFiddle

HTML：

<div style="position:relative">
  <div id="date-text">

  </div>
  <div style="position: absolute; left: 0; top: 0">
    <input type="text" size="10" id="dt" style="opacity:0"/>
  </div>
</div>

JS：

var today = new Date();
today.setHours(0,0,0,0);
$("#dt").datepicker({defaultDate: today}).on('change', function() {
  $("#date-text").html($("#dt").datepicker("getDate").toLocaleDateString());
});
$("#date-text").html(today.toLocaleDateString());
于 2017-09-20T08:59:20.740 回答