Format of DatePicker value.

9 posts, 1 answers
  1. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 07 Dec 2011 Link to this post

    If I want to get the value from a DataPicker called startDate, I found an example to get the value like this:


    The result is in this format:

    Mon Nov 28 00:00:00 EST 2011

    How can I format the value as displayed in the box, ie. MM/dd/yyy, or a standard DateTime format?

  2. Answer
    Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 09 Dec 2011 Link to this post

    Hello Cyndie,

    "Mon Nov 28 00:00:00 EST 2011" is the format of Date object - (new Date()).toString(). The DatePicker value() method returns Date object. You can format it using kendo.toString(new Date(), "MM/dd/yyyy").

    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Trent
    Trent avatar
    22 posts
    Member since:
    Dec 2011

    Posted 08 Mar 2012 Link to this post

    Sorry to open an old thread but I'm having an issue with this as well. I want a friendly date so I used this code:

    Razor code in my MVC view:
    <input id="expenseClaimDate" name="expenseClaimDate" value="@Model.ExpenseClaimDate"/>

    Javascript code:
    $(document).ready(function () {
        $("#expenseClaimDate").kendoDatePicker({ format: "dd MMMM yyyy" });

    When the page opens the date is displayed in the datepicker as "20/03/2012 12:00:00 AM"

    If I change the date it's correctly displayed as "09 March 2012"

    Is this a known issue?

  4. Jason Potter
    Jason Potter avatar
    10 posts
    Member since:
    Sep 2006

    Posted 31 Jul 2012 Link to this post

    I am also seeing this issue.

    $("#dateOffer #startDate").kendoDatePicker({
            format: "ddd dd MMM yyyy",
            min: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
            value: new Date(now.getFullYear(), now.getMonth(), now.getDate())

    But when it loads it shows it as:
    Wed Aug 08 2012 00:00:00 GMT+1000 (EST)

    Once I pick a value it shows correctly:
    Wed 08 Aug 2012

    Any idea's?
  5. Jim
    Jim avatar
    19 posts
    Member since:
    Feb 2008

    Posted 01 Mar 2013 Link to this post

    I have the same problem - has anyone found a resolution?
  6. Jim
    Jim avatar
    19 posts
    Member since:
    Feb 2008

    Posted 01 Mar 2013 Link to this post

    ...and the answer is that you need to provide a parse format

        parseFormats: ["yyyy-MM-ddThh:mm:ss"]
  7. Mark
    Mark avatar
    10 posts
    Member since:
    Dec 2012

    Posted 28 Nov 2013 Link to this post

    You could just use the following to retrieve what's in the input box:
  8. Igor
    Igor avatar
    21 posts
    Member since:
    Sep 2016

    Posted 06 Oct 2016 Link to this post

    My column in the grid can have the different values (date, number, options of dropdown box, etc). Grid definition includes

    columns: [
                    { field: "value", title: "Value", editor: cellEditor },                 
    And my

    function cellEditor(container, options) {
    var type = dataItem.type;        

    if( type=="DATE" ){
                  $('<input data-text-field="' + options.field + '" data-bind="value:' + options.field + '" data-value-field="' + options.field +'" data-format="{0:MM/dd/yyyy}"/>')
                  .kendoDatePicker({close: function(e) {


    My value for date is “MM/dd/yyyy” string. And your date picker can properly parse it during loading. But when editing’s done I see not desired string Tue Oct 30 2007 00:00:00 GMT-0400 (Eastern Daylight Time)

    How can I format it to original “MM/dd/yyyy” string to show in the grid when editing is done? Should I override something or you have a hook like complete: function(e) {}?

    Best regards,
  9. Dimiter Topalov
    Dimiter Topalov avatar
    635 posts

    Posted 11 Oct 2016 Link to this post

    Hello Igor,

    You can use the columns.format option to display numeric and date values in the desired format.

    I hope this helps.

    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top