0

開始日（jQuery datepickerを使用するテキストフィールド）、開始時刻（ドロップダウン選択）、終了日（jQuery datepickerを使用するテキストフィールド）、および終了時刻（ドロップダウン選択）の4つのフィールドがあります。

<form id="my_form">

  <label for="start_date">Start Date</label>
  <input type="text" id="start_date" name="start_date" />

  <label for="start_time">Start Time</label>
  <select name="start_time" id="start_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <label for="finish_date">Finish Date</label>
  <input type="text" id="finish_date" name="finish_date" />

  <label for="finish_time">Finish Time</label>
  <select name="finish_time" id="finish_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <input type="submit" />

</form>

標準のjQueryDatepickerウィジェット関数を使用して、終了日が常に開始日と同じかそれより遅いことを確認しています。

$( "#start_date" ).datepicker({
    dateFormat: 'dd/mm/y',
    minDate: new Date(),
    onClose: function( selectedDate ) {
        $( "#finish_date" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#finish_date" ).datepicker({
    dateFormat: 'dd/mm/y',
    minDate: new Date(),
    onClose: function( selectedDate ) {
        $( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
    }
});

だから私の質問は、jQuery検証プラグインを使用して、開始日と終了日が同じである場合、終了時間が開始時間よりも大きい（ただし等しくない）ことを保証するルールを追加するにはどうすればよいですか？どこから始めればいいのかわからないので、現時点では空白のスクリプトがあるので、助けていただければ幸いです。

$("#my_form").validate({
  rules: {
    start_time: {  }
  }
});
4

1 に答える 1

2

これが重要な作業の始まりです。日付/時刻が等しいか開始が終了よりも小さい場合にエラーを設定する要素、またはエラーをどのように表示するかについて、いくつかの変更が必要になります。プラグインには、エラー用の多くのオプションがあります。

コア機能は次のとおりです。

function compareDates() {
    var startDate = $("#start_date").datepicker('getDate');
    var endDate = $("#finish_date").datepicker('getDate');        
    if( !startDate || !endDate){
        return false;
    }

    if(endDate > startDate) {
        return true;

    } else {
        var endTime = endDate.getTime() + $('#finish_time').parseValToNumber();
        var startTime = startDate.getTime() + $('#start_time').parseValToNumber();
        return endTime > startTime;
    }
}

これはaddMethodtoバリデーターで使用されます：

jQuery.validator.addMethod("checkDates", function(value, element) {
  /* see function above*/
  return  compareDates() ;
}, "End date/time must be after start");

バリデーターは以下を使用して初期化されます。

$('#my_form').validate({ 
    rules:{
        start_date:'required', 
        /* arbitrarily used this element  for "checkDates" rule*/
        finish_date:{required:true,checkDates:true},

        finish_time:'required',
        start_time:'required'
    }
});

selectタグ値を数値に解析するためのヘルパープラグイン（で使用compareDates()）：

/* change the select value to an integer to add to unix time of date from datepicker*/
$.fn.parseValToNumber = function() {
    return parseInt($(this).val().replace(':',''), 10) || 0;
}

デモ：http：//jsfiddle.net/dUe83/1/

これにはまだバグがある可能性があります....急いでまとめられたものであり、完全な既成のソリューションを意図したものではなく、重要な作業の出発点としてのものでした。

于 2012-12-16T04:29:21.093 に答える