jquery - Bootstrap datetimepicker - click on Input -
is there way show calendar click on input well? right have click on calendar icon show calendar.
<div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div>
js
$(function() { $('#datetimepicker1').datetimepicker(); });
example: https://jsfiddle.net/8jpmkcr5/81/
it's little tricky, need move datetime picker input , manually handle click on input group addon. example:
$(function() { $('.datetimepicker').datetimepicker(); $('.datetimepicker-addon').on('click', function() { $(this).prev('input.datetimepicker').data('datetimepicker').toggle(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <div class='input-group date'> <input type='text' class="form-control datetimepicker" /> <span class="input-group-addon datetimepicker-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>
Comments
Post a Comment