ブートストラップDatetimepickerは時間が長い部分を取得する

Question

私はTimeformatでBS Datetimepickerを使用しています。私の目標は、選択された時間、例えば午前8時30分を時間（長）として取得することです。

timepicker.data('DateTimePicker').date()はモーメントを返しますが、この瞬間には日付ディメンション（当日）も含まれていますので、Moment.valueOf()を使用すると、私は自分が望むものが得られません。

私が念頭に置いている解決策は(Moment.hours() * 60 + Moment.minutes()) * 60 * 1000になりますが、私はそれが気に入らないのです。

もっとクリーンな方法がありますか？

Answer 1

ここでは2つの解決策：

• 日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>