Add hours and minutes from button in datatimepicker time picker

Question

I'm using the bootstrap ready date time picker from http://eonasdan.github.io/bootstrap-datetimepicker/ .

$(function () {
  $('#datetimepicker3').datetimepicker({
    format: 'HH:mm'
  });
});

And this:

<div class="row">
  <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:10m</button>
      </div>
      <div class='col-sm-1'>
        <button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
      </div>
      <div class='col-sm-1'>
        <button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
      </div>
    <div class='col-sm-1'>
      <button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
    </div>
    <div class='col-sm-1'>
      <button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
    </div>
    <div class='col-sm-1'>
      <button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
    </div>
  </div>
<div class="row">
    <div class='col-sm'>
        <div class="form-group">
              <div class='input-group date' id='datetimepicker3' style="width: 40%">
                  <input id="timepicker" name="timepicker" type='text' class="form-control"/>
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-time"></span>
                  </span>

            </div>
        </div>
    </div>
</div>

I've 6 buttons that when I click on its time it automatically changes the time in the datapicker.

I can't do the function that updates the time, what an idea?

Answer 1

For setting as text value use $("#datetimepicker3").find("input").val(text); and for setting as time value use $('#datetimepicker3').data("DateTimePicker").date(text);

1. Bind the click event on each button by class.I used .btn as example.

2. Get button text by $(this).text() and replace/remove h and m to set the value as text on datetimepicker.

3. set the value using $("#datetimepicker3").find("input").val(text);

    $(".btn").on('click', function(e) {
       var text =   $(this).text().replace("h","").replace("m",""); 
    $("#datetimepicker3").find("input").val(text);
   //$('#datetimepicker3').data("DateTimePicker").date(text);//select based on requirement
    });

Working snippet for your code:

$(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'hh:mm'
                });
           });
          $(".btn").on('click', function(e) {
           var text =   $(this).text().replace("h","").replace("m",""); 
           //$('#datetimepicker3').data("DateTimePicker").date(text);
   $("#datetimepicker3").find("input").val(text);
});

<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href="./css/prettify-1.0.css" rel="stylesheet">
        <link href="./css/base.css" rel="stylesheet">
        <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
      
		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        
        <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
        
        
        <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
        <div class="row">
              <div class='col-sm-1'>
                <button type="button" id="button1" class="btn btn-secondary btn-sm">00h:10m</button>
          </div>
          <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:15m</button>
          </div>
          <div class='col-sm-1'>
            <button type="button" class="btn btn-secondary btn-sm">00h:20m</button>
          </div>
        <div class='col-sm-1'>
          <button type="button" class="btn btn-secondary btn-sm">00h:30m</button>
        </div>
        <div class='col-sm-1'>
          <button type="button" class="btn btn-secondary btn-sm">00h:45m</button>
        </div>
        <div class='col-sm-1'>
          <button type="button" class="btn btn-secondary btn-sm">01h:00m</button>
        </div>
      </div>
    <div class="row">
        <div class='col-sm'>
            <div class="form-group">
                  <div class='input-group date' id='datetimepicker3' style="width: 40%">
                      <input id="timepicker" name="timepicker" type='text' class="form-control"/>
                      <span class="input-group-addon">
                          <span class="glyphicon glyphicon-time"></span>
                      </span>

                </div>
            </div>
        </div>
    </div>