使用KendoUI日期时间进行验证

Validation with KendoUI datetime

本文关键字：验证 时间 KendoUI 日期 使用      更新时间：2023-09-26

嗨，我有一个应用程序，用户可以选择开始日期时间和结束日期时间，如果他们想创建一个事件。现在这是一个html，我使用KendoUI日期时间插件:

<div class="demo-section" style="width: 535px;">
                <label for="start">Start date:</label>
                <input id="start" value="01/01/2013" />
                <label for="end" style="margin-left:3em">End date:</label>
                <input id="end" value="01/01/2013"/>
            </div>
</li>
<script type="text/javascript">
$(document).ready(function(){
function startChange() {
    var startDate = start.value();
    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        end.min(startDate);
    }
}
function endChange() {
    var endDate = end.value();
    if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        start.max(endDate);
    }
}
var start = $("#start").kendoDateTimePicker({
    change: startChange,
    parseFormats: ["MM/dd/yyyy"]
}).data("kendoDateTimePicker");
var end = $("#end").kendoDateTimePicker({
    change: endChange,
    parseFormats: ["MM/dd/yyyy"]
}).data("kendoDateTimePicker");
start.max(end.value());
end.min(start.value());
});

问题是我不能得到验证，因为我想要的。假设用户选择From日期，To日期显示的日期应该大于当前选择的From日期。我目前的代码似乎不太好用。由于

您是说您希望能够选择一个大于To的From日期，并且当您这样做时，To应该自动更新为大于From吗?

如果是这样，你就快成功了。您只需要更新startChange函数来更新相对于From的To日期。

function startChange() {
    var startDate = start.value();
    if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        end.min(startDate);
        var endDate = end.value();
        if (endDate && endDate <= startDate) {
            endDate.setDate(startDate.getDate() + 1);
            end.value(endDate);
        }
    }
}

查看jsFiddle查看完整的工作示例

相关文章：