1

我正在使用带有 kendo UI 的 MVC4 剃须刀应用程序。在我的项目中，我们使用了两个 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>

请提供解决方案。任何帮助表示赞赏。

4

1 回答 1

3

如果用户清除文本框并将其聚焦，则在解析日期字符串时触发 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>

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

于 2013-10-28T05:04:04.523 回答