오늘 날짜가 오늘 인 과거 시간 시간을 비활성화하는 방법, 오늘 날짜가 아닌 경우 항상 사용 가능하게 설정 하시겠습니까?

Question

나는 eonasdan에 의해 bootstrap-datetimepicker를 사용하고 있습니다. 내 페이지에 두 개의 datetimepicker가 있습니다. 하나는 도착 날짜이고 다른 하나는 도착 시간입니다.

$('#dateOfArrival').datetimepicker({ 
    format : 'L', 
    minDate : new Date(), 
    keepInvalid : true 
}); 

$('#timeOfArrival').datetimepicker({ 
    format : 'LT', 
    minDate : moment() 
}); 

필자는 두 가지 datetimepicker를 사용합니다.

나는이 함수를 dateOfArrival의 onchange라고 부르려고했지만 아무 것도 변경되지 않았습니다. 여기

function setDateOfArrivalTime() { 
    $("#timeOfArrival").datetimepicker("option", "minDate", new Date($("#dateField").val()); 
} 

HTML 코드

<div class='input-group date' id='timeOfArrival' style=""> 
<input type='text' class="form-control requiredField" id="timeField"/> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-time" placeholder="hh:mm"></span> 
</span> 

어떤 도움이 이해된다

<div class='input-group date' id='dateOfArrival'> 
<input type="text" class="form-control requiredField" id="dateField" onchange="setDateOfArrivalTime();" placeholder="mm/dd/yyyy" /> 
<span class="input-group-addon"> 
    <span class="glyphicon glyphicon-calendar"></span> 
</span> 

에게이다.

Answer 1

Eonasdan datetime picker에는 change 이벤트가없고 대신 dp.change을 사용하십시오.

참고 모든 기능이 data 특성 예를 통해 액세스된다 워드 프로세서 말한대로 minDate 같은 또 함수 .data("DateTimePicker")를 사용하여 액세스해야 여기 $('#datetimepicker').data("DateTimePicker").FUNCTION()

작업 샘플 :

$('#dateOfArrival').datetimepicker({ 
 
    format : 'L', 
 
    minDate : new Date(), 
 
    keepInvalid : true 
 
}).on('dp.change', function(e){ 
 
    // Set timepicker value to let the timepicker work 
 
    $("#timeOfArrival").data("DateTimePicker").date(e.date); 
 
    $("#timeOfArrival").data("DateTimePicker").minDate(e.date); 
 
}); 
 

 
$('#timeOfArrival').datetimepicker({ 
 
    format : 'LT', 
 
    minDate : moment(), 
 
    useCurrent: false 
 
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class='input-group date' id='dateOfArrival'> 
 
    <input type="text" class="form-control requiredField" id="dateField" placeholder="mm/dd/yyyy" /> 
 
    <span class="input-group-addon"> 
 
     <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div> 
 

 
<div class='input-group date' id='timeOfArrival' style=""> 
 
    <input type='text' class="form-control requiredField" id="timeField" placeholder="hh:mm"/> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-time"></span> 
 
    </span> 
 
</div>

PS. datepicker의 값에 따라 시간 선택기에 minDate을 설정하는 이유를 이해할 수 없습니다.