如何让Kendo DateTimePicker格式像#LocaleString'?

时间:2015-04-23 22:18:32

标签: kendo-ui kendo-datetimepicker

我希望将Kendo DateTimePicker格式化为new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)"格式化其输出字符串(例如2015.04.23 22:15:54(UTC))。我已经能够使用value:设置toLocaleString并获得日期和时间的正确初始格式,但是一旦使用日历下拉列表更改了日期或时间值,格式就会恢复为默认值。我无法弄清楚如何设置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>

1 个答案:

答案 0 :(得分:0)

在Kendo UI演示站点上,他们在日期和时间选择器上有一个globablization示例(这里: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提供了各种语言的大量Kendo文化文件的CDN链接。

希望这应该为您提供足够的示例,以便能够调整日期/时间选择器的格式。在上面的代码示例中,有一个位置显示如何更改模式选项:

var datePickerOptions = {
    format: kendo.culture().calendar.patterns.d
};

最后一部分是弄清楚你真正需要的文化。在上面的例子中,行

kendo.culture(this.value());

改变文化。您可以在此处阅读有关此内置Kendo功能的更多信息:http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-culture

如果您只是致电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加载文化文件,或者当然将它们下载到您的服务器并在本地托管它们。