Kendo UI datepicker doesn't display value initially when formatted

Question

I have an issue with Kendo UI datepicker, it does not display an already set value through value attribute. Here's the markup:

<input data-kendoDatePicker="true" value="9/18/2013 12:00:00 AM"/>

<script>
    $(':input[data-kendoDatePicker=true]').kendoDatePicker({
        format: 'dd MMM yyyy'
    });
</script>

When the page loads it wont display any value. However, looking in the DOM the value is set for the input, it just doesn't take it! When a new value is selected it will be displayed and formatted. If i remove the format it works as expected

Answer 1

@Bobby_D is right, the problem is that you did not specify the right date format: MM/dd/yyy.

BTW: Do you know that you can define it as:

<input data-role="datepicker" value="9/18/2013 12:34:56 AM" data-format="MM/dd/yyyy"/>
<script>
    kendo.init($("input"));
</script>   

Basically, if you can set all properties in the HTML input you just need to do one call to kendo.init for getting the elements initialized. So, you can even do kendo.init($("body"));. This is very useful when initializing most components from HTML.

EDIT: There are two different options in Kendo DatePicker:

1. format: Specifies the format, which is used to format the value of the DatePicker displayed in the input. The format also will be used to parse the input.
2. parseFormats: Specifies a lis of date formats used to parse the value set with value() method or by direct user input. If not set the value of the format will be used. Note that format option is always used parsing process.

It seems to me that you want to receive dates in one format and then display them in another. Then you should use parseFormats for the possible ones that you receive (might be more than one) and format for the ones displayed in the widget.

You code would be:

$(':input[data-kendoDatePicker=true]').kendoDatePicker({
    format:        "dd MMM yyyy",
    parseFormats : [ "MM/dd/yyyy" ]
});

The code modified in here : http://jsfiddle.net/OnaBai/TQnny/1/

or in the alternative format:

<input id="datapicker" data-role="datepicker" value="9/18/2013 12:00:00 AM" data-format="dd MMM yyyy" data-parse-formats="MM/dd/yyyy"/>

and the JS for initializing it:

kendo.init($("init"));

The code modified in here : http://jsfiddle.net/OnaBai/TQnny/2/

Answer 2

You need to provide correct format of the date you have provided in the value. eg you are providing date in US format and expecting kendo to read it up in UK format, it can't make the call eg. months vs day is ambiguous.

http://jsfiddle.net/vojtiik/8CCqR/1/

   $(':input[data-kendoDatePicker=true]').kendoDatePicker({
       format: "MM/dd/yyyy"
//     format: "MM/dd/yyyy hh:mm:ss tt"
    });

Date Formatting

Answer 3

If you use AngularJS integration with Kendo UI you can try following code snippet:

HTML:

<input kendo-date-time-picker ng-model="dateStr" k-ng-model="date"/>

JS:

$scope.date = new Date();
$scope.dateStr = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss");

P.S. Don't forget to specify $filter object in the list of your controller dependencies