jQuery Timepicker external trigger -
i having trouble getting external element trigger jquery timepicker showing...
timepicker: http://timepicker.co/
although found 1 well? (if better or recommended) http://jonthornton.github.io/jquery-timepicker/
mark-up:
<label for="starttime1">* proposed start time:</label> <div class="input-group"> <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="starttime1" name="starttime1" placeholder="start time 1"> <span class="input-group-addon"> <i class="fa fa-arrow-down fa-fw" id="starttime1trigger" aria-hidden="true"></i> </span> </div> - if comment out line.. , leave in alert().. there no error thrown?
their example:
$('#spanexample').timepicker(); $('#openspanexample').on('click', function(){ $('#spanexample').timepicker('show'); }); my attempt: (alert works.. timepicker doesnt change)
$('#starttime1trigger').on('click', function(){ $('.timepicker').timepicker('show'); //$('#starttime1').timepicker('show'); //didnt work either //alert('triggered'); }); in developer tools..
i keep error: typeerror: n[t] undefined
but have no clue means.. or how troubleshoot it.
fiddle works.. not real-world example: https://jsfiddle.net/k0r0rd4a/
proposed start time 1 timepicker set-up work currently.. (so focus on 1 field)
** seems going wrong once added over-all project/form.. jsfiddle seems work properly.. when added form. (throws odd error: typeerror: n[t] undefined)
it have multiple instances of .timepicker: need rely on context of element receives click event, i.e.:
$('#starttime1trigger').on('click', function(){ // timepicker instance parent's sibling $(this).parent().siblings('.timepicker').first().timepicker('show'); }); also, ensure timepicker has been initialized element before attempting access method:
$('#starttime1trigger').on('click', function(){ // timepicker instance parent's sibling var $tp= $(this).parent().siblings('.timepicker').first(); // check if method defined before firing if ($tp.timepicker()) $tp.timepicker('show'); }); here proof-of-concept example:
$(function() { $('#starttime1trigger').on('click', function(){ var $t = $(this), $tp = $(this).parent().siblings('.timepicker').first(); if ($tp.timepicker()) $('#starttime1').timepicker('show'); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.10.0/jquery.timepicker.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <label for="starttime1">* proposed start time:</label> <div class="input-group"> <input class="timeinput form-control timepicker timepicker-with-dropdown text-center" id="starttime1" name="starttime1" placeholder="start time 1"> <span class="input-group-addon"> <i class="fa fa-arrow-down fa-fw" id="starttime1trigger" aria-hidden="true"></i> </span> </div>
Comments
Post a Comment