終了時刻は開始時刻よりも大きくする必要があります

私は2つの時間ピッカーを1つは開始時間に、もう1つは終了時間に、終了時間は常に開始時間より長くなければなりません。私はeonasdan datetimepickerを使用しています。開始日が終了日よりも大きい場合は、許可しないか、popを取得する必要があります。ここでは、この終了時刻は開始時刻よりも大きくする必要があります

iはend_timeテキストボックスに開始日より過去の日付を無効にし、これまで

$('#starttime,#endtime').datetimepicker({ 
 
    format: 'HH:mm' 
 
}); 
 

 
var start_time = $('#Start_Time').val(); 
 

 
var end_time = $('#End_Time').val(); 
 

 
if (Date.parse(start_time) > Date.parse(end_time)) { 
 
    alert('start time should be smaller'); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 
    <div class="col-xs-6"> 
 
    <div class="form-group"> 
 
     <label for="start_time" class="col-form-label">Start Time</label> 
 
     <div class='input-group date' id='starttime'> 
 
     <input type='text' class="form-control" id="Start_Time" /> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
    <div class="form-group"> 
 
     <label for="end_time" class="col-form-label">End Time</label> 
 
     <div class='input-group date' id='starttime'> 
 
     <input type='text' class="form-control" id="End_Time" /> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-05-17 parshu123

あなたの問題は何ですか？これを達成しようとするコードがあるようです。どうしたの？ – Carcigenicate

あなたは[mcve]にjQueryとdatepickerプラグインを含めるのを忘れました – Jamiec

あなたは開始日と終了日に同じIDを与えますので、終了日idを変更してください –

を行っているものだと私を助けてください。このようなものは、HTMLコードのようにテキストボックスIDを置き換えてください。

$("#startDate").datepicker({ 
    onSelect: function(dateText, inst) { 
    $('#endDate').datepicker('option', 'minDate', $(this).val()); 
    }, 
    minDate: 0 
}); 
$("#endDate").datepicker({ 
    onSelect: function(dateText, inst) { 
    if($("#startDate").val() == ''){ 
     $("#endDate").val(''); 
    } 
    }, 
})

出典

2017-05-17 12:37:49

var startDate = Date.parse($('#txtdatetimepicker1').val()); 
var endDate = Date.parse($('#txtdatetimepicker2').val()); 
if (startDate >= endDate) { alert("Please enter proper date") }

出典

2017-05-17 12:40:57

あなたは、各startTime.changeイベントにendTime.minDateを更新する必要があるかもしれません。私の例に従うことをお試しください：

function TimePickerCtrl($) { 
 
    var startTime = $('#starttime').datetimepicker({ 
 
    format: 'HH:mm' 
 
    }); 
 
    
 
    var endTime = $('#endtime').datetimepicker({ 
 
    format: 'HH:mm', 
 
    minDate: startTime.data("DateTimePicker").date() 
 
    }); 
 
    
 
    function setMinDate() { 
 
    return endTime 
 
     .data("DateTimePicker").minDate(
 
     startTime.data("DateTimePicker").date() 
 
    ) 
 
    ; 
 
    } 
 
    
 
    var bound = false; 
 
    function bindMinEndTimeToStartTime() { 
 
    
 
    return bound || startTime.on('dp.change', setMinDate); 
 
    } 
 
    
 
    endTime.on('dp.change',() => { 
 
    bindMinEndTimeToStartTime(); 
 
    bound = true; 
 
    setMinDate(); 
 
    }); 
 
} 
 

 
$(document).ready(TimePickerCtrl);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="container" style="padding-top: 50px"> 
 

 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
    <div class="form-group"> 
 
     <label for="start_time" class="col-form-label">Start Time</label> 
 
     <div class='input-group date' id='starttime'> 
 
     <input type='text' class="form-control" id="Start_Time" /> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
    <div class="form-group"> 
 
     <label for="end_time" class="col-form-label">End Time</label> 
 
     <div class='input-group date' id='endtime'> 
 
     <input type='text' class="form-control" id="Start_Time" /> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

出典

2017-05-17 13:00:45 Hitmands

こんにちは、答えに感謝!!! @Hitmandsこれはうまくいきますが、デフォルトで時刻を取得すべきではなく、アドオンをクリックして時刻を表示する必要があります。これは日付プロパティを削除することによって行われますが、アドオンをクリックすると日付が表示されます開始時間と終了時間の両方ではなく、特定の入力ファイル、つまり開始時間と終了時間に対して発生する必要があります。これで私を助けてくれますか？ありがとうございます – parshu123

私の例を編集しました、十分であれば、私の答えを受け入れてください。 – Hitmands

助けてくれてありがとうございますが、唯一の問題は、開始時間を更新するとき、終了時間も更新されているときです。開始時間の更新を開始するとき、終了時間フィールドをクリアして更新時間を私たちがそれのアドオンをクリックすると入力してください、これであなたを助けてくださいありがとう – parshu123

I timepicker

Fiddle Link Over here...!

https://fiddle.jshell.net/kxL0f1gc/ 

<link href="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.css"> 

<script src="https://adminlte.io/themes/AdminLTE/plugins/timepicker/bootstrap-timepicker.min.js"></script>

といくつかのものは、このHTMLコード

    <div class="col-md-12"> 
         <div class="row"> 
          <div class="col-md-6"> 
          <div class="form-group bootstrap-timepicker"> 
           <label class="control-label">Start Time</label> 
           <input id="start" name="start" ng-model="start" type="text" required="required" class="form-control start" /> 
          </div> 
          </div> 
          <div class="col-md-6"> 
          <div class="form-group bootstrap-timepicker"> 
           <label class="control-label">End Time</label> 
           <input id="end" name="end" ng-model="end" type="text" required="required" class="form-control end" /> 
          </div> 
          </div> 
         </div> 
        </div>

を試してみてくださいでした

$('.start, .end').timepicker({ 
    showInputs: false, 
    minuteStep: 1, 
}); 
$("#end, #start").change(function() { 
var time = $("#start").val(); 
var hours = Number(time.match(/^(\d+)/)[1]); 
var minutes = Number(time.match(/:(\d+)/)[1]); 
var AMPM = time.match(/\s(.*)$/)[1]; 
if(AMPM == "PM" && hours<12) hours = hours+12; 
if(AMPM == "AM" && hours==12) hours = hours-12; 
var sHours = hours.toString(); 
var sMinutes = minutes.toString(); 
if(hours<10) sHours = "0" + sHours; 
if(minutes<10) sMinutes = "0" + sMinutes; 
var time2 = $("#end").val(); 
if(time2=="") 
    { 
    var time2 = "00:00 AM"; 
    } 
    var hours2 = Number(time2.match(/^(\d+)/)[1]); 
    var minutes2 = Number(time2.match(/:(\d+)/)[1]); 
    var AMPM2 = time2.match(/\s(.*)$/)[1]; 
    if(AMPM2 == "PM" && hours2<12) hours2 = hours2+12; 
    if(AMPM2 == "AM" && hours2==12) hours2 = hours2-12; 
    var sHours2 = hours2.toString(); 
    var sMinutes2 = minutes2.toString(); 
    if(hours2<10) sHours2 = "0" + sHours2; 
    if(minutes2<10) sMinutes2 = "0" + sMinutes2; 
    var comparehour = sHours2-sHours; 
    var comparemin = sMinutes2-sMinutes; 
    if(comparehour<0) 
    { 
    $("#end").val(time); 
    } 
else if((comparehour==0) && (comparemin<0)) 
    { 
    $("#end").val(time); 
    } 
    });

出典

2018-01-09 09:44:21 Femin

終了時刻は開始時刻よりも大きくする必要があります

答えて

関連する問題