2017-01-05 29 views
1

開始日と終了日の合計が144時間(合計6日)を超えないようにする必要があります。日時ピッカーの開始日と終了日

開始日は日付の時刻フィールドで、ユーザーは日付と時刻を選択します。 終了日の日付は、選択した日付と時刻に基づいて計算されます。時間は144時間までです。

誰でもこれを実装しましたか?事前に多くの感謝。

よろしく、 Mayank

+0

を使用して、開始と終了の日付ピッカーのための一例である、あなたの問題を解決すると思いますたくさんの質問がありますあなたが検索した場合、これについての質問は、[this](http://stackoverflow.com/questions/29122275/set-end-date-after-select-start-date)です。実装は使用しているdatepickerライブラリに依存しますが、ロジックはほぼ同じです。 –

答えて

0

私は以下のコードはここ

$(function() { 
 
    $("#datepicker1").datepicker(); 
 
    $("#datepicker2").datepicker(); 
 
}); 
 

 

 
function validateDiff() { 
 
    var fromdate = new Date($("#datepicker1").val()); 
 
    var todate = new Date($("#datepicker2").val()); 
 
    var validdiff = 1000 * 60 * 60 * 24; 
 

 
    console.log(fromdate); 
 
    console.log(todate); 
 

 
    var date_diff = todate - fromdate; 
 
    console.log(date_diff); 
 

 
    if (date_diff == validdiff * 6) 
 
    alert("Date Difference is 6 Days exact"); 
 
    else if (date_diff <= validdiff * 6) 
 
    alert("Date Difference is less than 6 Days"); 
 
    else 
 
    alert("Date Difference is grater than 6 Days"); 
 
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<link rel="stylesheet" href="/resources/demos/style.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 

 

 
<p>Date From : 
 
    <input type="text" id="datepicker1"> 
 
</p> 
 
<p>Date To : 
 
    <input type="text" id="datepicker2"> 
 
</p> 
 
<button type="button" onclick="validateDiff()">Check</button>

0

はjqueryの

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function() { 
      var dt2 = $('#dt2'); 
      var startDate = $(this).datepicker('getDate'); 
      //add 30 days to selected date 
      startDate.setDate(startDate.getDate() + 30); 
      var minDate = $(this).datepicker('getDate'); 
      //minDate of dt2 datepicker = dt1 selected day 
      dt2.datepicker('setDate', minDate); 
      //sets dt2 maxDate to the last day of 30 days window 
      dt2.datepicker('option', 'maxDate', startDate); 
      //first day which can be selected in dt2 is selected date in dt1 
      dt2.datepicker('option', 'minDate', minDate); 
      //same for dt1 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 
}); 
    </script> 
</head> 
<body> 
<form> 
    <input type="text" id="dt1"> 
    <input type="text" id="dt2"> 
</form> 
</body> 
</html> 
関連する問題