날짜 범위 선택기 - 24 시간 범위 선택

Question

부트 스트랩에 Date Range Picker 플러그인을 사용하고 있으며 날짜 시간 범위를 최대 24 시간으로 설정해야합니다.

다음 예는 저 기간 선택할 수있다 : 시작 날짜 및 시간, 선택된

<input type="text" name="daterange" value="" /> 

<script type="text/javascript"> 
$(function() { 
    $('input[name="daterange"]').daterangepicker({ 
     timePicker: true, 
     timePickerIncrement: 30, 
     locale: { 
      format: 'MM/DD/YYYY h:mm A' 
     } 
    }); 
}); 
</script> 

을 종료일은 시작 날짜 및 시간 내지 24 시간으로한다. (종료일과 시간을 시작일로부터 24 시간 이내로 제한하십시오.)

플러그인을 사용하여 어떻게하면됩니까?

Answer 1

startdate 유닉스 타임 스탬프에 대해 enddate를 테스트 한 oninput 이벤트 리스너를 만든 다음 큰 시간이면 입력 한 시간보다 24 시간 뒤로 되돌릴 수 있습니다. ... 곧 니펫

$('#demo').daterangepicker({ 
 
    "linkedCalendars": false, 
 
    timePicker: true, 
 
    dateLimit: { hours: 24 }, 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css" rel="stylesheet"/> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script> 
 

 

 
<input type="text" id="demo">

편집 : daterangepicker 부트 스트랩 이미이 기능을 기능을 내장하고있다.