Bootstrap Datetimepicker 获取时间部分答案

【问题标题】：Bootstrap Datetimepicker get time part as longBootstrap Datetimepicker 获取时间部分
【发布时间】：2017-03-16 09:52:54
【问题描述】：

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

timepicker.data('DateTimePicker').date() 返回一个 Moment，但这个 Moment 还包括日期维度（当天），所以如果我随后使用 Moment.valueOf()，我将得不到我想要的。

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

有更清洁的方法吗？

【问题讨论】：

你用的是什么日期时间？您可以编辑您的问题，显示您用于初始化 datetimepicker 的代码以及您尝试执行的操作吗？
与stackoverflow.com/questions/23454975/…重复
我已经分开了日期和时间选择器，我需要从这两个中得到一个很长的时间。您的第二个解决方案很好，谢谢。

标签： javascript time timestamp momentjs bootstrap-datetimepicker

【解决方案1】：

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

获取startOf 当天，然后使用diff 计算以毫秒为单位的差异
从hour 和minute 构建一个moment duration object 所选时间然后显示它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>

【讨论】：