Question

我使用过bootstrap＆＃34;日期时间选择器＆＃34; ＆安培;定制仅用于时间选择，但我需要获得＆＃34; 自定义时间＆＃34;作为输入，而不是＆＃34;默认时间＆＃34;。 （例如：我需要得到时间＆＃34; 8.00＆＃34;点击。目前显示默认系统时间） 提前致谢。看我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

引用此链接： - 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 time time上设置值8:00 AM

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

请参阅JSFiddle。

Answer 3

更新：编辑设置用户点击右侧时钟图标的时间。注意：我使用 mousedown 事件代替点击，以便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时间选择器 - 当我们点击选择器时如何获得自定义时间？

3 个答案: