嗨,我有一个剑道模板,该模板包含一个带有日期时间选择器的文本框,如下所示。
<script id="popup_editor" type="text/x-kendo-template">
<input data-role="datepicker" data-bind="value: datePickerValue" />
</script>
现在我想为此设置最小值。即我不想允许选择比今天更早的日子。
有什么例子吗?
嗨,我有一个剑道模板,该模板包含一个带有日期时间选择器的文本框,如下所示。
<script id="popup_editor" type="text/x-kendo-template">
<input data-role="datepicker" data-bind="value: datePickerValue" />
</script>
现在我想为此设置最小值。即我不想允许选择比今天更早的日子。
有什么例子吗?
尝试这个
var myDatePicker = $("#myDatePicker").kendoDatePicker().data("kendoDatePicker");
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
myDatePicker.min(new Date(year,month,day));
通常,你可以在这里做一些 javascript:
var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker");
myDatePicker.min(new Date());
但我不确定它是否会以这种方式在您的模板中工作。也许这是一个开始。
好的,我最近不得不实现类似的东西,并找到了一种简单的方法来做到这一点。我意识到这为时已晚,但我在研究时发现了这个问题。
说下面是你的模板:(为简洁起见)
<div class="k-block k-shadow">
<p>Contract Start Date: </p>
<input type="text" tabindex="7"
class="k-input k-textbox"
name="Contract_Start_Date"
id="Contract_Start_Date"
data-bind="value:Contract_Start_Date"
data-format="MMMM yyyy"
data-start="year"
data-depth="year"
data-change="setContractMinEnd"
data-role="datepicker" />
</div>
<div class="k-block k-shadow">
<p>Contract End Date: </p>
<input type="text" tabindex="8"
class="k-input k-textbox"
name="Contract_End_Date"
id="Contract_End_Date"
data-bind="value:Contract_End_Date"
data-format="MMMM yyyy"
data-start="year"
data-depth="year"
data-role="datepicker" />
</div>
Contract_Start_Date 字段的以下代码将 JS 函数分配给该字段的“更改”事件:
data-change: setContractMinEnd
我在脚本块中添加了上述函数以与页面一起输出。现在每次更改开始日期时,结束日期都会得到一个最小值,即开始日期:
function setContractMinEnd() {
var edval = $('#Contract_Start_Date').data("kendoDatePicker");
var sdval = $('#Contract_End_Date').data("kendoDatePicker");
if (sdval && edval) {
edval.min(sdval.value());
}
}
您显然可以看中该逻辑并设置以下内容或其他内容:
edval.min(new Date())
希望它可以帮助某人...
您可以在 html 输入中传递 data-min="your Date in proper format" 。
<script id="popup_editor" type="text/x-kendo-template">
<input data-role="datepicker" data-bind="value: datePickerValue" data-min="min_date_value" />
</script>
这甚至不会显示超出最小值的日期。