1

私は開始時刻と終了時刻を入力するためのフォームに2つのdatetimepickerを持っています。
開始時刻のIDは「開始時刻」、終了時刻のIDは「終了時刻」です。datepickerで日付時刻を検証する方法は?

var startTime = document.getElementById("startTime"); 
var endTime = document.getElementById("endTime"); 

if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) { 
    alert("End Time should be greater than Start Time"); 
    return false; 
} 


私は開始時刻と終了時刻を比較し、開始時刻が終了時刻よりも大きくてはならないことを検証してみました。
ここでは、終了時刻が開始時刻より1時間以上大きくなるように検証を書きたいと思います。
sampleLink:DateTimePicker Example

$('#startTime').datetimepicker({ 
    onClose: function(dateText, inst) { 
     var endDateTextBox = $('#endTime'); 
     if (endDateTextBox.val() != '') { 
      var testStartDate = new Date(dateText); 
      var testEndDate = new Date(endDateTextBox.val()); 
      if (testStartDate > testEndDate) 
       endDateTextBox.val(dateText); 
     } 
     else { 
      endDateTextBox.val(dateText); 
     } 
    }, 
    onSelect: function (selectedDateTime){ 
     var start = $(this).datetimepicker('getDate'); 
     $('#endTime').datetimepicker('option', 'minDate', new Date(start.getTime())); 
    } 
}); 
$('#endTime').datetimepicker({ 
    onClose: function(dateText, inst) { 
     var startDateTextBox = $('#startTime'); 
     if (startDateTextBox.val() != '') { 
      var testStartDate = new Date(startDateTextBox.val()); 
      var testEndDate = new Date(dateText); 
      if (testStartDate > testEndDate) 
       startDateTextBox.val(dateText); 
     } 
     else { 
      startDateTextBox.val(dateText); 
     } 
    }, 
    onSelect: function (selectedDateTime){ 
     var end = $(this).datetimepicker('getDate'); 
     $('#startTime').datetimepicker('option', 'maxDate', new Date(end.getTime())); 
    } 
}); 

私はこれを試してみました同じになるように、開始時間と終了時間を得ました。しかし、どのように終了時間を1時間増やすのか分かりません。

たとえば、開始時刻の値が03-23-2012 10:00 AMの場合、エンドタイムを03-23-2012 11:00 AMとしたい場合は これで助けてもらえますか?

おかげ

+0

時間を許可する日付ピッカーを使用していますか?どのウィジェットを使用していますか? –

+0

私はそれがdatetimepickerだと言及することを忘れてしまいます。 – saran

+0

そのプラグインへのリンクを提供できますか? –

答えて

1

Alrightyここでは第一1であるあなたは、デバッグに使用できるすべてをしたいと休息バージョンです。あなたは、私がコメントしているコードをアンコメントしている場合

**最終的な解決策は、+ 1 ** http://jsfiddle.net/j82JJ/31/

簡単な日付の検証デモhttp://jsfiddle.net/j82JJ/5/

時間検証http://jsfiddle.net/j82JJ/18/

を追加します検証を生成するには、検証が必要な状況になることはありません。 :)

手順 - 1行をコメントアウトしたので、開始日を選択してから2番目のテキストボックスで終了日を選択できますが、開始日が短くなり、警告が表示されます。

'また、' jsfiddleでコメントアウトした行のコメントを外すと、datetimepickerではこの設定で日付を選択してから日付を小さくすることはできません。

HTML

<div style="margin: 15px;"> 
    <input id="example16_start" type="text" value="" name="test"> 
    <input id="example16_end" type="text" value="" name="test"> 
</div> 
​ 

のjQueryコードの詳細http://trentrichardson.com/examples/timepicker/(全3つのJSフィドルはそれでjQueryのコードを持っている)第一1があなたにrevelandする必要があります。

必要なのは「ということですONSELECT '開始日のイベント:

onSelect:function(selectedDateTime){

var startDate = $('#example16_start').datetimepicker('getDate'); 
    var endDate = new Date(parseFloat(startDate.setHours(startDate.getHours()+1))); 

    //Get the ending date datepart 
    var endDateDatePart = endDate.getFullYear() + '/' + endDate.getMonth() + '/' + endDate.getDate(); 

    //calculate the ending date time part including AM/PM 
    var endDateTimePart; 
    if (endDate.getHours() > 12) { endDateTimePart = endDate.getHours()-12 + ':' + endDate.getMinutes() + ' PM';} else {endDateTimePart = endDate.getHours() + ':' + endDate.getMinutes() + ' AM';} 
    $('#example16_end').datetimepicker('setDate', endDateDatePart + ' ' + endDateTimePart); 


} 

この新しいDateTimePickerのご理解のうえふぅ、これにもあなたを助けるかもしれない発見方法:Jquery datetimepicker - Advance time by 1 hour

**(私はあなたの名前のsrryとしてjsfiddleでいくつかのVARSに名前を付ける)

を、これが役立ちますあなたが望むなら、私はいくつかのコードを削減することができますが、あなたもそれを行うことができます、良いリンクが、歓声!

+0

こんにちはTats_innit、ありがとうございます。 – saran

+0

@サラン問題は一切ありません!乾杯! –