userTN-IN userTN-IN - 3 months ago 15
Javascript Question

bootstrap timepicker using id in javascript

I had time picker of 24 hrs format in my form. I used the picker twice in my form, but the thing is the first field time picker was working. unfortunately the second is not working. If i use the second field as first, its working. Can you help me for this problem….

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>


Thanks

Answer

use class in java-script instead of ids, because id name should be only one in the form.

Java-script:

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="OrdTime" 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="DelTime" placeholder="HH:MM" value="<?php if($FmData['DelTime']){echo $FmData['DelTime'];}?>" type="text" style="width: 100%;">
        </div>
     </div>
</div>