Question

请尝试以下代码：

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

如果文件就绪功能定义在剑道控制之上，它对页面加载不起作用......但如果它在下面，它可以正常工作......为什么会这样？

Answer 1

根据<input type=date..，我可以看到您将"24/10/1984"的值设置为HTML5 input date type，格式错误。请参阅 - http://www.w3schools.com/html/html5_form_input_types.asp，http://www.w3.org/TR/html5/single-page.html#dates-and-times

在document.ready中，您调用document.getElementById("DateOfBirth").value时，它会给您空白，因为input type="date"的格式值不正确，而且到目前为止，它被转换为空白。参见附带的例子。

绝对两种方式（如果你把document.ready放在第一位或最后一位）它会起作用。您需要使用以下html标记。

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

为什么当你把文档放在最后时它才起作用 - 因为kendodatepicker进行了正确的初始化并设置了正确的日期，并且当doc.ready被激活时，它能够获得价值和集。

注意： - document.ready()和(jQuery(){})与document.ready相同，并且会按顺序执行，因此当您放置document.ready时，它就会起作用在最后一个代码块。 - jQuery - multiple $(document).ready ...?

为了确保你明白，为什么它不起作用，我给出了以下例子。

＆＃13;

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

＆＃13;

<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()" />

＆＃13;

为什么文档就绪不适用于kendo控件

1 个答案: