jquery - Kendo UI 日期选择器无法清除之前的最小和最大日期

Question

我正在使用 kendo UI 开发 MVC4 Razor 应用程序。在我的项目中，我们使用了两个 kendo 日期选择器控件来在页面中显示起始日期和截止日期。当用户从“ApplicationDateFrom”选择器中选择日期时，我们将“ApplicationDateTo”的最小值设置为“ApplicationDateFrom”选择器的日期。如果用户从“ApplicationDateTo”选择器中选择一个值，我们将“ApplicationDateFrom”选择器的最大值设置为“ApplicationDateTo”选择器的值。

我的问题是，当用户清除与日历附加的“ApplicationDateFrom”和“ApplicationDateTo”日期选择器文本框字段中的值时，从“ApplicationDateFrom”和“ApplicationDateTo”日历中选择值后，“ApplicationDateFrom”和“ApplicationDateTo”日历显示先前设置的最小值和最大值。

这是代码

@(Html.Kendo().DatePickerFor(o => o.ApplicationDateFrom)
.Events(e=>e.Change("onApplicationFromDateChange"))
.HtmlAttributes(new { type = "text", placeholder = "MM/DD/YYYY", @class="span6" }))

@(Html.Kendo().DatePickerFor(o => o.ApplicationDateTo)
.Events(e=>e.Change("onApplicationToDateChange"))
.HtmlAttributes(new { type = "text", placeholder = "MM/DD/YYYY", @class="span6" }))

<script>
function onApplicationFromDateChange() {
var endPicker = $("#ApplicationDateTo").data("kendoDatePicker"), startDate = this.value();
if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        endPicker.min(startDate);
    }
}       

function onApplicationToDateChange() {
var startPicker = $("#ApplicationDateFrom").data("kendoDatePicker"), endDate = this.value();
if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        startPicker.max(endDate);
    }
}</script>

请提供解决方案。如有任何帮助，我们将不胜感激。

Answer 1

如果用户清除文本框并将其聚焦，则会触发 Change 事件来解析日期字符串。您可以管理如下内容:

<script>
function onApplicationFromDateChange() {
var endPicker = $("#ApplicationDateTo").data("kendoDatePicker"), startDate = this.value();
if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        endPicker.min(startDate);
    }
else if(!endPicker.value()){   // You said both
   endPicker.min(new Date(1900, 0, 1)); // Setting defaults
   endPicker.max(new Date(2099, 11, 31));
   this.min(new Date(1900, 0, 1));
   this.max(new Date(2099, 11, 31));
}
}       

function onApplicationToDateChange() {
var startPicker = $("#ApplicationDateFrom").data("kendoDatePicker"), endDate = this.value();
if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        startPicker.max(endDate);
    }
else if(!startPicker.value()){
       startPicker.min(new Date(1900, 0, 1)); // Setting defaults
       startPicker.max(new Date(2099, 11, 31));
       this.min(new Date(1900, 0, 1));
       this.max(new Date(2099, 11, 31));
}
}</script>

有点丑。我宁愿使用外部元素(即按钮)来重置最小/最大值。