从datatimepicker时间选择器中的按钮添加小时和分钟

Question

我正在使用http://eonasdan.github.io/bootstrap-datetimepicker/中的引导程序准备日期时间选择器。

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

这：

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

我有6个按钮，当我单击其时间时，它会自动更改数据选择器中的时间。

我无法执行更新时间的功能，有什么想法？

Answer 1

使用$("#datetimepicker3").find("input").val(text);设置为文本值，使用$('#datetimepicker3').data("DateTimePicker").date(text);设置时间值

1。。按类绑定每个按钮上的click事件。我以.btn为例。

2。。通过$(this).text()获取按钮文本，并替换/删除h和m，以在datetimepicker上将值设置为text。< / p>

3。。使用$("#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
    });

您的代码的有效代码段：

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

Answer 2

您可以使用日期功能设置时间：

$('#datetimepicker3').data("DateTimePicker").date("00:25");