Question

我使用了以下代码

<link rel="stylesheet" 
      href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script 
      src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js">
</script>

<script>
  var time = "9";

  $(function() {
    $('#itime').timepicker({
      minTime: time,
      maxTime: '7:00pm',
      'timeFormat': 'H:i:s'
    });
  });
</script>

<div class="input-group" style="margin-top: 10px;" onclick="shwtmpkr()">
  <input type="text" id="itime" name="itime" class="form-control" 
         placeholder="Booking Time" style="background-color:white" /> @*
  <input type='text' id="rTime" name="rTime" class="form-control" placeholder="Booking Date" 
         style="background-color:white" readonly="" />*@
  <span class="input-group-addon">
    <span class="fa fa-clock-o"></span>
  </span>
</div>

Answer 1

将宽度设置为输入元素.. width:80px

 var time = "9";

  $(function() {
    $('#itime').timepicker({
      minTime: time,
      maxTime: '7:00pm',
      'timeFormat': 'H:i:s'
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>


<div class="input-group" style="margin-top: 10px;" >
  <input type="text" id="itime" name="itime" class="form-control" placeholder="Booking Time" style="background-color:white;width:80px" /> @*
  <input type='text' id="rTime" name="rTime" class="form-control" placeholder="Booking Date" style="background-color:white" readonly="" />*@
  <span class="input-group-addon">
    <span class="fa fa-clock-o"></span>
  </span>
</div>

如何设置时间选择器的宽度？

1 个答案: