1

私は剣道UIを備えたMVC4カミソリアプリケーションで作業しています。私のプロジェクトでは、2 つの剣道日付ピッカー コントロールを使用して、開始日と終了日をページに表示しました。ユーザーが「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 に答える