Bootstrap Datetimepicker 获取时间部分一样长

Question

我正在使用带时间格式的 BS Datetimepicker。我的目标是获取选定的时间，例如 8:30am，作为持续时间（长）。

timepicker.data('DateTimePicker').date() returns 一个 Moment，但是这个 Moment 还包括日期维度（当前日期），所以如果我然后使用 Moment.valueOf() 我没有得到我想要的。

我想到的解决方案是 (Moment.hours() * 60 + Moment.minutes()) * 60 * 1000，但我不喜欢它。

有更简洁的方法吗？

Answer 1

这里有两种可能的解决方案：

获取startOf the day and then calculate the difference in millisecond using diff
建立一个moment duration object from hour and minute of the selected time and then showing it 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>

Bootstrap Datetimepicker 获取时间部分一样长

Bootstrap Datetimepicker get time part as long

javascript

time

timestamp

momentjs

bootstrap-datetimepicker