Why document ready does not work for kendo controls

Question

Please try the following code for example:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<script type="text/javascript">

function DateOfBirth_Change() {
    var input = document.getElementById("DateOfBirth").value;
    document.getElementById("spanDateOfBirth").innerHTML = input;
}
$(document).ready(function () {
    DateOfBirth_Change();
});

</script>

<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="24/10/1984" />
<script>
    jQuery(function(){jQuery("#DateOfBirth").kendoDatePicker({"change":DateOfBirth_Change,"format":"dd/MM/yyyy","parseFormats":["dd/MM/yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
<span id="spanDateOfBirth" style="padding-left: 25px;"></span>

It does not work on page load if the document ready function is defined above kendo control...But if it's below, it works fine... Why is this so?

Did you ever get this solved? And if so, could you post the answer? — Mathias Lykkegaard Lorenzen, Feb 03 '16 at 15:23

score 1 · Answer 1 · edited May 23 '17 at 11:45

I can see that you have set value of <input type=date.. as "24/10/1984" and which is in wrong format according to HTML5 input date type. Refer - http://www.w3schools.com/html/html5_form_input_types.asp, http://www.w3.org/TR/html5/single-page.html#dates-and-times

When in document.ready, you have invoked document.getElementById("DateOfBirth").value, it gave you blank, as input type="date" has a value in incorrect format and when that typecasted to date it got blank. See the attached example.

Definitely both way ( if you put document.ready first or last )it will work. You need to use following html markup for this.

<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="1984-10-24" />

Why it worked when you put document.ready last - because, kendodatepicker made proper initialization and set correct date, and when doc.ready fired , it is able to get value and set.

Note:- document.ready() and (jQuery(){}) are same as document.ready and they execute serially, that is why it worked when you put document.ready at last code block. - jQuery - multiple $(document).ready ...?

To make sure you understand , why it does not work, i am giving following example.

function getincdate() {
  alert($("#incorrect_dt").val());
}

function getcdate() {
  alert($("#correct_dt").val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Incorrect date -
<input type="date" id="incorrect_dt" value="24/10/1984" /> 
<input type="button" value="Get inccorect date" onclick="getincdate()" />
<br />
you can see above, value is not set here, but with .kendodatepicker, it worked, but after you do .kendo... 
<br/>
Correct date-
<input type="date" id="correct_dt" value="1984-10-24" />
<input type="button" value="Get correct date" onclick="getcdate()" />

Why document ready does not work for kendo controls

1 Answers1