How to set the date format of the date displayed in kendo datepicker to the same format as the system?

Question

I'm using the kendo datePicker in my web application.

The date displayed in it has the format MM/DD/YYYY by default.

I would like to get the format of the date used by the operating system or the browser and apply it on the kendo datePicker.

Is there a method or function in javascript that can provide this please?

Answer 1

Since you didn't give me any code, you could try this:

    td = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 

    if(mm<10) {
        mm='0'+mm
    } 

    td = dd+'/'+mm+'/'+yyyy;
   $(document).ready(function() {
                    var today = td,
                        birthdays = [
                           new Date(today.getFullYear(), today.getMonth(), 11),
                           new Date(today.getFullYear(), today.getMonth() + 1, 6),
                           new Date(today.getFullYear(), today.getMonth() + 1, 27),
                           new Date(today.getFullYear(), today.getMonth() - 1, 3),
                           new Date(today.getFullYear(), today.getMonth() - 2, 22)
                        ];

                    $("#datepicker").kendoDatePicker({
                        value: today,
                        dates: birthdays,
                         ....});

DatePicker Code adapted from here

EDIT: I've noticed now you've asked about system date. I've searched a bit and found out this method Date.prototype.toLocaleDateString()

Acording to this you get the formats:

e.g. for me on 13 December, 2011:

1. Safari returns 13 December 2001
2. Firefox 12/13/2011
3. Opera Tuesday December 13, 2011
4. Chrome Tuesday, December 13, 2011
5. IE 6 Tuesday, 13 December, 2011

Yet, I didn't tested it, so please provide me with evidence in case I'm wrong

hope it helps you

Answer 2

You should use the current culture to determine the format, using Kendo Globalization.

Determine the current culture:

@{
    var culture = Thread.CurrentThread.CurrentCulture.Name;
}

Add the Kendo culture scripts:

<script src="jquery.js"></script>
<script src="kendo.all.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/kendo.culture." + culture + ".min.js")"></script>  

Then either apply current culture to all widgets:

<script type="text/javascript">
    kendo.culture("@culture");
</script>

...or, hard-code on per-widget basis.

$("#firstDate").kendoDatePicker({
    culture: "en-GB",
    //....
});

List of widgets which depends on the current culture

• Calendar
• DatePicker
• TimePicker
• DateTimePicker
• NumericTextBox
• MaskedTextBox (globalized mask literals)
• Scheduler
• Gantt
• All widgets that support date or numeric formatting.

globalize.js:

Note that when globalize.js is registered before Kendo UI scripts, then Kendo UI will use globalize.js features instead of Kendo UI Globalization.