Datetimepicker (EONASDAN) 将选择发送为最接近分钟的纪元时间戳

Question

我想使用 Eonasdan 日期时间选择器库。 （诉4.17.47）

我需要在引导模板中包含一个简单的表单（GET 方法），允许用户获取日期和时间。

时间选择的粒度必须为 1 分钟。

单击提交按钮时，我希望将用户选择作为纪元格式发送出去。

在下面的示例中，确实发送了纪元格式，但时间戳中添加了额外的秒数，我想避免这种情况，这一定是由于onchange 函数。

如何将纪元时间戳值作为用户选择的真实镜像，在最近的分钟处舍入？

http://jsfiddle.net/lcoulon/ze2x8358/

$('#datetimepicker1').datetimepicker({
  locale: 'fr',
});

// Sends epoch (unix time) into epoch-start-time form
$('#datetimepicker1').on(`dp.change`, X => $('#epoch-start-time').val(X.date.unix()));

Answer 1

您可以使用momentjs startOf 传递'minute' 作为粒度 参数

moment().startOf('minute');  // set to now, but with 0 seconds and 0 milliseconds

这是一个工作示例：

$('#datetimepicker1').datetimepicker({
  locale: 'fr'
});
          
// Sends epoch (unix time) into epoch-start-time form
$('#datetimepicker1').on(`dp.change`, X =>
$('#epoch-start-time').val(X.date.startOf('minute').unix()));

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

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="//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.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container" style="margin:50px;">
  <h4>EOSNASDAN Bootstrap Datetime Picker</h4>
  <div class="row">
    <div class='col-sm-6'>
      <form class="form-horizontal" method="GET">	
        <div class="form-group">
          <div class="input-group date col-md-5" data-date="2017-01-01T12:00:00Z" data-date-format="yyyy-mm-dd hh" data-link-field="epoch-start-time" id="datetimepicker1">  
            <input type='text' class="form-control" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
          <input id="epoch-start-time" name="epoch" type="hidden"/>
        </div>
        <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
            <button class="btn btn-info btn-sm" type="submit">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>