-1

jqueryui日付ピッカーを使用して3つの日付を比較したいと思います。

私は次の日付フィールドを持っています：

  • お問い合わせ日
  • 日付からの旅行
  • これまでの旅行

次のルールが適用されます。

  • は最もDate of Enquiry最初のデートでなければなりません
  • 後Travel from dateでなければなりませんDate of Enquiry
  • 後Travel to dateでなければなりませんTravel from date

私は次のスクリプトを持っています：

$(function() {
    $("#inputField").datepicker({
        //defaultDate: "-1w-4d",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });

    $("#inputField1").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90"

    });

    $("#inputField2").datepicker({
        //defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-mm-yy',
        yearRange: "-90:+90",
        onSelect: function(selectedDate) {
            $("#inputField1").datepicker("option", "minDate", selectedDate);
        }
    });
});
4

3 に答える 3

1

カスタムの日付比較関数を作成し、日付ピッカーのonSelectイベントで使用できます。これは正確な答えではありませんが、可能な解決策への道です。

....
onSelect: function( selectedDate , inst ) {
   var isValid =  validateTime( selectedDate, inst, this);
   if( isValid ) {
       $( "#inputField1" ).datepicker( "option", "minDate", selectedDate );
   }
   else {
       //show some appropriate error
   }
}
//where validateTime is custom function returning true or false

そしてカスタム日付比較機能：

function validateTime( dateText, pickerInstance, picker) {
   //dateText         - selected date as text
   //pickerInstance   - a reference to the datepicker instance
   //picker           - the datepicker to be validated

   //get the date to check using getDate, like
   var field2DateVal = $("#inputField2").datepicker("getDate");
   //and compare it with other datepicker values
   //return true or false accordingly
}

この方法がうまくいくことを願っています

于 2012-09-13T07:48:34.520 に答える
0
  • お問い合わせ日は最初のデートである必要があります
  • 旅行開始日は、お問い合わせ日より後でなければなりません
  • 日付までの旅行は、日付からの旅行の後でなければなりません

正しい方向に進むために、必要なビジネスロジックを検討し、それに基づいてソリューションを設計します。

各日付ピッカー内から他の日付値を自動的に設定する前onSelectに、まず以下のような検証を適切に分離し、そこから進みます。

var $enquiryDate = $("#inputField"); // Must be before travel from and before travel to date
var $TravelFromDate = $("#inputField2"); // Must be after enquiry date but before travel to date
var $TravelToDate = $("#inputField2"); // Must be after travel from and after enquiry datedate

function isEnquiryDateValid(dateValue){
     // Must be before travel from and before travel to date

     // Compare date values and return true or false...
}

function isTravelFromDateValid(dateValue){
    // Must be after enquiry date but before travel to date

    // Compare date values and return true or false...
}

function isTravelToDateValid(dateValue){
    // Must be after travel from and after enquiry datedate

    // Compare date values and return true or false...
}

値に基づいて変更を次のようなものに適用する場合は、これを変更できます。

function processSelectedEnquiryDate(dateValue){
     // Must be before travel from and before travel to date

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....
}

function processSelectedTravelFromDate(dateValue){
    // Must be after enquiry date but before travel to date

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....
}

function processSelectedTravelToDate(dateValue){
    // Must be after travel from and after enquiry datedate

    // Compare dates and set individual dates to specific defaults
    // or
    // show a validation error below the control....

    // or simply show a validation error below the control....
}

選択した値に基づいて各コントロールにデフォルト値を設定することは、選択した各値を検証してコントロールの下に検証エラーを表示するよりも複雑です。The tavel to date cannot be less than the travel from date

于 2012-09-13T08:04:00.637 に答える
0

あなたはのように使うことができます

<label for="enquiry">Enquiry</label>
<input type="text" id="enquiry" name="enquiry"/>
<label for="from">From</label>
<input type="text" id="from" name="from" disabled/>
<label for="to">to</label>
<input type="text" id="to" name="to" disabled/>

JavaScriptコード：

$(function() {
    $("#enquiry").datepicker({
        defaultDate: "+0d",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
            $("#from").removeAttr("disabled");
        }
    });
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
            $("#to").removeAttr("disabled");
        }
    });
    $("#to").datepicker({
        defaultDate: "+2w",
        changeMonth: true,
        numberOfMonths: 2,
        onSelect: function(selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});​

作業デモ

于 2012-09-13T08:01:09.020 に答える