如何从日期选择器设置语言环境格式?
Posted
技术标签:
【中文标题】如何从日期选择器设置语言环境格式?【英文标题】:How to set locale format from datepicker? 【发布时间】:2012-12-09 05:44:25 【问题描述】:如何根据用户的语言环境在 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
。
【问题讨论】:
api.jqueryui.com/datepicker/#option-dateFormat 【参考方案1】:使用dateFormat
option 更改为自定义格式
$(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/看到
【讨论】:
链接和demo坏了【参考方案2】:你可以这样设置日期格式:
$(".datefield2").datepicker( "dateFormat": "dd.mm.yy");
【讨论】:
为什么这是公认的答案?问题是关于将格式设置为用户的语言环境,而不是dd.mm.yy。当 OP 说 21.12.2012 时,这只是德国格式的一个示例。我是不是误会了什么? 我们可以将其设置为用户区域设置的任何原因。因为我的网站在全世界运行,每个人都希望日期变成他们的格式。【参考方案3】:网络上的 JQuery 文档似乎在玩捉迷藏 日期选择器的 i18n 文件参见例如
Where are the i18n files of jQuery UI datepicker >= 1.11.0
截至发布此链接:
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://***.com/questions/494958/how-do-i-localize-the-jquery-ui-datepicker
// https://***.com/questions/13993619/how-to-set-locale-format-from-datepicker
$(".datepicker").datepicker($.datepicker.regional['de']);
$(".datepicker").datepicker('option','dateFormat','yy-mm-dd')
);
</script>
</head>
【讨论】:
【参考方案4】:由于似乎没有现成的语言环境信息,我决定使用一些不同的方法:我只使用 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());
【讨论】:
以上是关于如何从日期选择器设置语言环境格式?的主要内容,如果未能解决你的问题,请参考以下文章