我希望Kendo DateTimePicker的格式与new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)"格式化其输出字符串一样(例如。2015.04.23 22:15:54(UTC))。我已经能够使用toLocaleString设置value:，并获得正确的日期和时间初始格式，但一旦使用日历下拉列表更改了日期或时间值，格式就会返回默认值。我不知道如何设置format属性以获得正确的结果。
以下是我在Kendo UI Dojo中尝试的代码：http://dojo.telerik.com/iFiNO/2
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datetimepicker/index">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
value: (new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)",
format: "g"
});
</script>
</body>
</html>
在Kendo UI演示网站上，他们有一个日期和时间选择器的全球化示例(此处：http://demos.telerik.com/kendo-ui/globalization/index)以下是完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
<script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>
<div id="example">
<div id="product-view" class=" demo-section k-header">
<div class="right">
<label for="culture">Choose culture:</label>
<input id="culture" value="en-US" />
</div>
<h2>Product promotion</h2>
<ul id="fieldlist">
<li>
<label for="startDate">Discount start date:</label>
<input id="startDate" />
<input id="startTime" value="12:00 AM" />
</li>
<li>
<label for="endDate">Discount end date:</label>
<input id="endDate" />
<input id="endTime" value="12:00 AM" />
</li>
<li>
<label for="initial">Initial price:</label>
<input id="initial" value="10" min="1"/>
</li>
<li>
<label for="discount">Discount:</label>
<input id="discount" value="0.05" min="0" max="0.5" step="0.01"/>
</li>
</ul>
</div>
<style>
#example h2 {
padding: 5px 0 15px;
font-weight: normal;
border-bottom: 1px solid rgba(128,128,128,.3);
}
#product-view {
overflow: hidden;
width: 600px;
padding: 20px 20px 0 20px;
margin: 30px auto;
background-position: 0 -255px;
}
.right
{
float:right;
}
#fieldlist
{
width: 100%;
float:left;
margin:0;
padding: 10px 0 30px 0;
}
#fieldlist li
{
list-style:none;
padding:5px 0;
}
#fieldlist label {
display: inline-block;
width: 140px;
text-align: right;
}
</style>
<script>
$(document).ready(function() {
function startDateChange() {
var date = startDate.value();
if (date) {
date = new Date(date);
date.setDate(date.getDate() + 1);
endDate.min(date);
}
}
function endDateChange() {
var date = endDate.value();
if (date) {
date = new Date(date);
date.setDate(date.getDate() - 1);
startDate.max(date);
}
}
function changeCulture() {
kendo.culture(this.value());
var datePickerOptions = {
format: kendo.culture().calendar.patterns.d
};
var timePickerOptions = {
format: kendo.culture().calendar.patterns.t
};
startDate.setOptions(datePickerOptions);
endDate.setOptions(datePickerOptions);
startTime.setOptions(timePickerOptions);
endTime.setOptions(timePickerOptions);
initial.value(initial.value());
discount.value(discount.value());
}
var startDate = new kendo.ui.DatePicker($("#startDate"), { change: startDateChange });
var endDate = new kendo.ui.DatePicker($("#endDate"), { change: endDateChange });
var startTime = new kendo.ui.TimePicker($("#startTime"));
var endTime = new kendo.ui.TimePicker($("#endTime"));
var initial = new kendo.ui.NumericTextBox($("#initial"), { format: "c" });
var discount = new kendo.ui.NumericTextBox($("#discount"), { format: "p" });
var today = new Date();
startDate.value(today);
endDate.min(today);
today = new Date(today);
today.setDate(today.getDate() + 1);
endDate.value(today);
startDate.max(today);
$("#culture").kendoDropDownList({
change: changeCulture,
dataTextField: "text",
dataValueField: "value",
dataSource: [
{text: "bg-BG", value: "bg-BG"},
{text: "de-DE", value: "de-DE"},
{text: "en-US", value: "en-US"},
{text: "en-GB", value: "en-GB"}
]
});
});
</script>
</div>
</body>
</html>
全球化文件链接到：http://demos.telerik.com/kendo-ui/content/web/globalization/cultures/kendo.culture.en-US.js。图案为kendo.culture.{culturename}。本页http://cdnjs.com/libraries/kendo-ui-core提供了指向大量不同语言的剑道文化文件的CDN链接。
希望这能为您提供足够多的示例，以便能够调整日期/时间选择器的格式。在上面的代码示例中，他们展示了如何更改模式选项：
var datePickerOptions = {
format: kendo.culture().calendar.patterns.d
};
最后一件事是弄清楚你真正需要的是哪种文化。在上面的例子中，行
kendo.culture(this.value());
改变文化。你可以在这里阅读更多关于这个内置剑道功能的信息：http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-培养
如果您简单地调用kendo.culture()，它将返回当前区域性。所以线路
format: kendo.culture().calendar.patterns.d
为当前文化设置模式。当然，要使其工作，您必须加载正确的区域性文件。
如果您更深入地查看其中一个区域性文件，您可以看到它们所代表的模式和格式：
(function( window, undefined ) {
kendo.cultures["en-US"] = {
name: "en-US",
numberFormat: {
pattern: ["-n"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
percent: {
pattern: ["-n %","n %"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "%"
},
currency: {
pattern: ["($n)","$n"],
decimals: 2,
",": ",",
".": ".",
groupSize: [3],
symbol: "$"
}
},
calendars: {
standard: {
days: {
names: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
namesAbbr: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
namesShort: ["Su","Mo","Tu","We","Th","Fr","Sa"]
},
months: {
names: ["January","February","March","April","May","June","July","August","September","October","November","December",""],
namesAbbr: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",""]
},
AM: ["AM","am","AM"],
PM: ["PM","pm","PM"],
patterns: {
d: "M/d/yyyy",
D: "dddd, MMMM dd, yyyy",
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
g: "M/d/yyyy h:mm tt",
G: "M/d/yyyy h:mm:ss tt",
m: "MMMM dd",
M: "MMMM dd",
s: "yyyy'-'MM'-'dd'T'HH':'mm':'ss",
t: "h:mm tt",
T: "h:mm:ss tt",
u: "yyyy'-'MM'-'dd HH':'mm':'ss'Z'",
y: "MMMM, yyyy",
Y: "MMMM, yyyy"
},
"/": "/",
":": ":",
firstDay: 0
}
}
}
})(this);
有许多参考资料将向您展示如何使用脚本加载脚本文件。或者你可以将它们全部加载，或者将它们组合成一个大的JS文件并缩小它或其他什么。您也可以从CDN加载区域性文件，当然也可以将它们下载到服务器并在本地托管。