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

时间:2017-06-22 05:53:30

标签: javascript jquery datetime eonasdan-datetimepicker

我想和Eonasdan日期时间选择器库一起使用。 (v。4.17.47

我需要在bootstrap模板中包含一个简单的表单(GET方法),允许用户提取日期和时间。

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

当点击提交按钮时,我希望用户选择作为纪元格式发送。

在下面的示例中,确实正在发送epoch格式,但是时间戳添加了额外的秒数,我想避免这种情况,这必须归功于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()));

1 个答案:

答案 0 :(得分:1)

您可以使用'minute'作为粒度参数传递startOf的时刻StoryTeller

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>