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

OnaBai · Accepted Answer · 2013-09-30T15:01:31.677

@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:

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.
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/

Interesting the incorrect format of the date is handled differently in 2.918. previous versions didn't show the date at all this version does show whatever is entered into the value attribute, yet the datepicker is not populated correctly. If you open the dp in your example the date is set to today, regardless the value. See here months set to 'xx' still shows the value http://jsfiddle.net/vojtiik/dxZV3/1/ — Vojtiik, Sep 30 '13 at 13:13
OnaBai, the format i specified is the one i'm trying to get. This is not a format for parsing. Check this fiddle http://jsfiddle.net/TQnny/ select a date and see the format displays correctly. The issue is that initially when the page loads it wont handle and display the date. — Mentor, Sep 30 '13 at 14:35
So you want to receive the dates in one format (`MM/dd/yyy`) but then display / work them in another (`dd MMM yyyy `), correct? — OnaBai, Sep 30 '13 at 14:41

score 1 · Answer 2 · answered Sep 30 '13 at 13:07

1

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

answered Sep 30 '13 at 13:07

Vojtiik

2,558
1
17
21

That's why format is for i think, so you can change how a date is displayed. Your suggested format would not return the date in the format i'm seeking to, which would return for example 18 Sep 2013. – Mentor Sep 30 '13 at 14:27

score 0 · Answer 3 · answered Dec 14 '15 at 17:11

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

Kendo UI datepicker doesn't display value initially when formatted

3 Answers3