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

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -