Datetimepicker (EONASDAN) sends selection as epoch timestamp nearest minute rounded

Question

I would like to go with Eonasdan datetime picker library. (v. 4.17.47)

I need to include into bootstrap template a simple form (GET method) that will allow user to pickup a date and time.

The time selection must have 1 minute granularity.

When submit button is clicked I would like the user selection to be sent out as an epoch format.

In my example below, epoch format is indeed being sent but extra seconds are added to the timestamp and I would like to avoid that, this must be due to onchange function.

How could I get the epoch timestamp value being the real mirror of user selection rounded at the nearest minute?

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()));

VincenzoC VincenzoC · Accepted Answer · 2017-06-22T07:56:29

You can use momentjs startOf passing 'minute' as granularity parameter

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

Here a working sample:

$('#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>

Datetimepicker (EONASDAN) sends selection as epoch timestamp nearest minute rounded

1 Answers