부트 스트랩 Datetimepicker는 시간이 길어집니다.

Question

저는 Timeformat과 함께 BS Datetimepicker를 사용하고 있습니다. 내 목표는 선택한 시간 (예 : 오전 8시 30 분)을 지속 시간 (길게)으로 설정하는 것입니다.

timepicker.data('DateTimePicker').date()은 순간을 반환하지만이 순간에도 날짜 차원 (현재 날짜)이 포함되어 있으므로 Moment.valueOf()을 사용하면 원하는 것을 얻지 못할 수 있습니다.

내가 생각하는 해결책은 (Moment.hours() * 60 + Moment.minutes()) * 60 * 1000이 될 것이지만 나는 그것을 좋아하지 않는다.

더 깨끗한 방법이 있습니까?

Answer 1

다음 두 가지 솔루션 :

• 는 하루 startOf 얻기 후 hour에서 moment duration object 선택된 시간 minute 및 빌드 diff
• 사용 밀리의 차이를 계산 한 다음 asMilliseconds
를 도시

라이브 샘플 :

var timepicker = $("#datetimepicker1").datetimepicker({ 
 
    format: 'HH:mm' 
 
}); 
 

 
$('#btn1').click(function(){ 
 
    // Get selected time 
 
    var dateSelected = timepicker.data('DateTimePicker').date(); 
 
    if(!dateSelected) return; 
 
    // Get start of the day 
 
    var startDay = dateSelected.clone().startOf('day'); 
 
    // Get difference (millseconds) from the start of the day and the selected time 
 
    var duration = dateSelected.diff(startDay); 
 
    console.log(duration); 
 
}); 
 

 
$('#btn2').click(function(){ 
 
    // Get selected time 
 
    var dateSelected = timepicker.data('DateTimePicker').date(); 
 
    if(!dateSelected) return; 
 
    // Create duration from hours and minutes slected 
 
    var duration = moment.duration({ 
 
    h: dateSelected.hours(), 
 
    m: dateSelected.minutes() 
 
    }); 
 
    // Print duration as milliseconds 
 
    console.log(duration.asMilliseconds()); 
 
});

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

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> 
 
<script src="https://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="datetimepicker1"> 
 
    <input type="text" class="form-control" /> 
 
    <span class="input-group-addon"> 
 
    <span class="glyphicon glyphicon-calendar"></span> 
 
    </span> 
 
</div> 
 
<button id="btn1" class="btn btn-default" type="button">Get date as duration V.1</button> 
 
<button id="btn2" class="btn btn-default" type="button">Get date as duration V.2</button>