2013-10-25 157 views
1

我正在使用kendo UI在MVC4剃鬚刀應用程序中工作。在我的項目中,我們使用了兩個kendo datepicker控件在頁面中進行顯示。當用戶從「ApplicationDateFrom」選擇器中選擇日期時,則我們將「ApplicationDateTo」的最小值設置爲「ApplicationDateFrom」選擇器的日期。如果用戶從「ApplicationDateTo」選擇器中選擇一個值,我們將「ApplicationDateFrom」選擇器的最大值設置爲「ApplicationDateTo」選擇器的值。Kendo UI日期選擇器不清除以前的最小和最大日期

我的問題是,當從「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> 

請提供解決方案。任何幫助表示讚賞。

+0

你的第二段很混亂。 [This](http://demos.kendoui.c​​om/web/datepicker/rangeselection.html)演示很簡單。你到底想要什麼? –

+0

當用戶清除連接到壓光機的兩個文本框時,我想重置兩個壓光機。 – Jayaraj

回答

2

如果用戶清除文本框並將其聚焦,則會觸發更改事件來解析日期字符串。你可以這樣管理:

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

它有點難看。我寧願使用外部元素(即按鈕)來重置最小值/最大值。

相關問題