Bootstrap 时间选择器 - 如何在我们点击选择器时获取自定义时间？

Question

我使用了 bootstrap "Date-time-picker" 并仅针对时间选择进行了自定义，但我需要将“自定义时间”作为输入，不是 "default time"。 （例如：我需要在点击时获取时间“8.00”。目前显示的是默认系统时间） 提前致谢。看我的代码：

$(function () { 
$('#datetimepicker1').datetimepicker({
format: 'LT',
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">



<div class="container"> 
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" name="from1" placeholder="Morning">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"> </script>

Answer 1

参考这个 link:- https://jdewit.github.io/bootstrap-timepicker/

使用下面的 html 代码..

<div class="container"> 
    <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" name="from1" placeholder="Morning" id="txttime" value="" onclick="timeset();">
    <span class="input-group-addon">
    <span class="glyphicon glyphicon-time"></span>
    </span>
    </div>
    </div>

点击功能写在Js部分

function timeset()
{


     var time = new Date();
time = time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
alert(time);
   $("#txttime").val(time);
}

Answer 2

查看下面的代码。这里当 onclicked onclicked on timepicker 设置值 8:00 AM

$(function () { 
    $('#datetimepicker1').datetimepicker({
       format: 'hh:mm',
    });
   $('.input-group-addon').mouseup(function(){
        $('#dateT').val('8:00 AM');
   });
});

参见JSFiddle。

Answer 3

更新： 已编辑以设置用户单击右侧时钟图标时的时间。注意：我使用 mousedown 事件而不是 click 这样 datetimepicker 控件最初也会显示自定义时间，否则它可能会显示不同的时间（如果输入文本在点击前为空），这可能会让用户感到困惑...

$(function () { 
  
  //$("#txttime").val("8:00 AM"); //*** initial time here
  
  $('#datetimepicker1').datetimepicker({
    //format: 'hh:mm A' //12 hour format
    format: 'HH:mm'     //24 hour format
  });

  $('#datetimepicker1 .input-group-addon').mousedown(function(){
    if (!$.trim($('#txttime').val())) $('#txttime').val('08:00');
  });
  
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">

<p>&nbsp;</p>

<div class="container"> 
  <div class="input-group date" id="datetimepicker1">
    <input type="text" class="form-control" placeholder="Morning" id="txttime" name="txttime" value="">
    <span class="input-group-addon" id="">
      <span class="glyphicon glyphicon-time"></span>
    </span>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

Bootstrap 时间选择器 - 如何在我们点击选择器时获取自定义时间？

Bootstrap time picker - how to get custom time when we click on the picker?

html

css

jquery

timepicker

twitter-bootstrap