CODEWITHSUNDEEP
kendo-uikendo-datetimepicker
Stringfellow
Stringfellow

Reputation: 2908

How to get Kendo DateTimePicker format to work like 'toLocaleString'?

I want the Kendo DateTimePicker to be formatted just as new Date()).toLocaleString("UTC", {timeZone: "UTC"}) + " (UTC)" formats its output string (e.g. ‎2015‎.‎04‎.‎23‎ ‎22‎:‎15‎:‎54 (UTC)). I have been able to set the value: using toLocaleString and get the correct initial format for the date and time but once the date or time values have been changed using the calendar dropdown the format goes back to default. I cannot figure out how to set the format property to get the correct result.

Here is the code I was experimenting with in the 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>

Upvotes: 0

Views: 3502

Answers (1)

jwatts1980
jwatts1980

Reputation: 7356

On the Kendo UI demo site, they have an example of globablization on a date and time picker (here: http://demos.telerik.com/kendo-ui/globalization/index) Here is the full code example: 

<!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>

The globalization files link to: http://demos.telerik.com/kendo-ui/content/web/globalization/cultures/kendo.culture.en-US.js . The pattern is kendo.culture.{culturename}. This page http://cdnjs.com/libraries/kendo-ui-core provides CDN links to a ton of Kendo culture files for various languages.

Hopefully this should provide you with enough of an example to be able to adjust the format of the date/time picker. In the code example above, there is a spot where they show how to change the pattern option:

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

The last piece is figuring out which culture you actually need. In the example above, the line 

kendo.culture(this.value());

changes the culture. You can read more about this built-in Kendo function here: http://docs.telerik.com/kendo-ui/api/javascript/kendo#methods-culture

If you simply call kendo.culture() it will return the current culture. So the line 

format: kendo.culture().calendar.patterns.d

sets the pattern for the current culture. Of cource for this to work, you have to have the correct culture file loaded.

If you look more in depth at one of the culture files, you can see the patterns and what formats they represent:

(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);

There are a number of reference that will show you how to load a script file using script. Or you can load them all, or combine them into one large JS file and minify it or something. You could also load the culture files from that CDN, or of course download them to your server and host them locally.

Upvotes: 0

Related Questions