Kendo datepicker acting weired for different computers on two different timezone

Question

Kendo datepicker acting weired for different computers on two different timezone

5.8k Views Asked by AudioBubble At 21 January 2014 at 09:01

Hi we use a simple kendo datepicker for our web application.

$("#DateInput").kendoDatePicker({
        format: "dd/MM/yyyy",        
        culture: "en-GB",
        max: new Date()
    });

Now when we try to get the datepicker value in Javascript my browser gives me date format dd/MM/yyyy but my colleague's browser gives him MM/dd/yyyy. We have tried to use same culture as you can see in kendo and as well as in our web.config we have put the globalization settings as follows.

<system.web>
    <globalization uiCulture="en-GB" culture="en-GB" />
</system.web>

My computer's date format and settings are as follows;

Region & Language format: English(United Kinddom)
Keyboard Layout: English(United Kingdom)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+6

My colleague's date format and settings are;

Region & Language format: English(Australia)
Keyboard Layout: English(Australia)
Long and Short Date format: dd MMMM yyyy
Timezone: GMT+8

Last bit of information, we are using Chrome for testing on both places. It is probably the UTC problem. I want the date format in "dd/MM/yyyy" for both occasion. Any workable solution will be highly appreciated. Thanks.

Original Q&A

There are 2 best solutions below

**Jarosław Kończak** · Answer 1 · 2014-01-21T09:09:12.793000

Try to add this code at top of your page before you gonna render any kendo widget:

kendo.culture("en-GB");

It should forced kendo widgets to work in all location using en-GB culture.

If you're using ASP.MVC I recommend add it in "_Layout.cshtml" like:

<head>
...

    <script src="@Url.Content("~/Scripts/jquery/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Kendo/js/kendo.all.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Kendo/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Kendo/js/cultures/kendo.culture.pl-PL.min.js")"></script>
    <script src="@Url.Content("~/Kendo/js/cultures/kendo.culture.en-GB.min.js")"></script>
    <script src="@Url.Content("~/Kendo/js/cultures/kendo.culture.de-DE.min.js")"></script>

    <script type="text/javascript">
        kendo.culture("en-GB");
    </script>

    //widgets create scripts for your views if you write it here
</head>

Detail on globalization can be found on this link:

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/globalization

**Mahib** · Answer 2 · 2014-01-21T12:09:44.657000

If your intention is to convert the date into your desired format "dd/MM/yyyy" and if your kendo grid is not providing you the correct result in different places, create your own. Some thing like this.

In Json:

var FixedDateFormat = "PlodDate: '" + (Date.getUTCDate() + 1) + "/" + (Date.getUTCMonth() + 1) + "/" + Date.getUTCFullYear() + " 00:00:00";

Here I have added 1 on Date and Month cause getUTCDate/Month starts from 0. As you have said in comments you are accepting the date as string and then converting that back to DateTime so I've added the time " 00:00:00".

In MVC: You probably need to do something like following to convert;

DateTime X = Convert.ToDateTime(PlodDate);

UPDATE

I've got a better solution for you on JS. You are reading datepicker value with something like this, right??

$("#YourDatePickerName").data("kendoDatePicker").value()

Here you can tell your browser what local you want to use like the following

$("#YourDatePickerName").data("kendoDatePicker").value().toLocaleString("en-GB");

Which will generate exact same result for every culture.

Further Update

If you want to do it Kendo's way then you can use kendo.toString(). You can check it here.

Kendo datepicker acting weired for different computers on two different timezone

There are 2 best solutions below

Related Questions in DATE

Related Questions in DATETIME

Related Questions in KENDO-UI

Related Questions in KENDO-ASP.NET-MVC

Related Questions in KENDO-DATEPICKER

Trending Questions

Popular # Hahtags

Popular Questions