Search code examples
javascriptjquerydatetimeeonasdan-datetimepicker

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


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

Solution

  • 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>