在javascript中使用id引导时间选择器 - bootstrap timepicker using id in javascript

bootstrap timepicker using id in javascript

本文关键字：时间选择器 id javascript | 更新日期: 2023-09-27

我的表单中有24小时格式的时间选择器。我在表单中使用了两次选择器，但问题是第一个字段时间选择器是有效的。不幸的是，第二种方法不起作用。如果我使用第二个字段作为第一个，它的工作。你能帮我解决这个问题....

javascript:
function mytime()
{
$('#timepicker2').timepicker({
            minuteStep: 1,                 
            maxHours: 24,
            showMeridian: false              
        });
}
first field:
<div class="form-group">                                    
   <label for="OrdTime" class="col-sm-3 control-label">Order Time</label>  
        <div class="col-sm-9">                                   
              <div class="input-group bootstrap-timepicker timepicker">                                    
                <input class="form-control" onclick="mytime()" name="OrdTime" id="timepicker2" value="<?php if($FmData['OrdTime']){echo $FmData['OrdTime'];}?>" type="text">
              </div>
        </div>
</div>
second field:
    <div class="form-group">    
        <label for="DelTime" class="col-sm-3 control-label">Delivery Time</label>
          <div class="col-sm-9">     
             <div class="input-group bootstrap-timepicker timepicker">  
                 <input class="form-control" onmouseover="mytime()" name="DelTime" id="timepicker2" placeholder="HH:MM" value="<?php if($FmData['DelTime']){echo $FmData['DelTime'];}?>" type="text" style="width: 100%;">
            </div>
         </div>
    </div>

谢谢

您必须有两个具有相同类的输入选择器，并且您应该使用类初始化时间选择器:

function mytime()
{
    $('.timepicker').timepicker({
        minuteStep: 1,                 
        maxHours: 24,
        showMeridian: false              
    });
}
<div class="form-group">                                    
   <label for="OrdTime" class="col-sm-3 control-label">New Time</label>  
        <div class="col-sm-9">                                   
              <div class="input-group bootstrap-timepicker timepicker">                                    
                <input class="timepicker form-control" onclick="mytime()" name="OrdTime" id="timepicker1" value="<?php if($FmData['OrdTime']){echo $FmData['OrdTime'];}?>" type="text">
              </div>
        </div>
        <div class="col-sm-9">                                   
              <div class="input-group bootstrap-timepicker timepicker">                                    
                <input class="timepicker form-control" onclick="mytime()" name="OrdTime" id="timepicker2" value="<?php if($FmData['OrdTime']){echo $FmData['OrdTime'];}?>" type="text">
              </div>
        </div>
</div>

在java-script中使用class而不是id，因为id名称在表单中应该只有一个。

java script:

function mytime()
{
$(".timepicker2").timepicker({
        minuteStep: 1,                 
        maxHours: 24,
        showMeridian: false              
    });
}

第一个字段:

<div class="form-group">                                    
    <label for="OrdTime" class="col-sm-3 control-label">Order Time</label>  
        <div class="col-sm-9">                                   
            <div class="input-group bootstrap-timepicker timepicker">                                    
                <input class="form-control" onclick="mytime()" name="OrdTime" id="OrdTime" value="<?php if($FmData['OrdTime']){echo $FmData['OrdTime'];}?>" type="text">
            </div>
        </div>
</div>

第二个字段:

<div class="form-group">    
    <label for="DelTime" class="col-sm-3 control-label">Delivery Time</label>
      <div class="col-sm-9">     
         <div class="input-group bootstrap-timepicker timepicker">  
             <input class="form-control" onmouseover="mytime()" name="DelTime" id="DelTime" placeholder="HH:MM" value="<?php if($FmData['DelTime']){echo $FmData['DelTime'];}?>" type="text" style="width: 100%;">
        </div>
     </div>
</div>