I have a serious problem with bootstrap datetimepicker
, Here is the jsfiddle :
<br/> <!-- padding for jsfiddle --> <div class="row"> <div class="col-md-12"> <h6>datetimepicker1</h6> <div class="form-group"> <div class="input-group date" id="datetimepicker1"> <input type="text" class="form-control" > <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span> </div> </div> </div> </div>
The problem is that when i open my website in mobile, mobile keyboard triggered when i focus the input field so what i need is that only the datepicker
show without keyboard. So for that i use readonly
or disabled
, but the problem is that when i use one of them the bootstrap datetimepicker
doesn't work. http://jsfiddle.net/faissal_aboullait/kx0e5wmq/1/
1 Answer. Show activity on this post. $('#start_date'). datetimepicker({timeFormat: "HH:mm:ss", dateFormat:"dd-mm-yy", constrainInput: false, maxDate: maxdate});
$("#datepicker"). attr('readonly', 'readonly');
ready(function() { $('#dateRangePicker') . datepicker({ format: 'dd/mm/yyyy', startDate: '01/01/2010', endDate: '12/30/2020', autoclose: true, language: 'da', enableOnReadonly: false }); });
Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This documentation may contain syntax introduced in the MDB 4.17. 0 and can be incompatible with previous versions.
If your are still looking for a solution take a look at the snippet. This is exactly what i suggested in the comment, you just have to call datetimepicker with
ignoreReadonly: true
That's it.
$(function () { $('#datetimepicker').datetimepicker({ ignoreReadonly: true }); });
.container { margin-top: 80px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> <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.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class='col-sm-6 col-sm-offset-3'> <div class="form-group"> <div class='input-group date' id='datetimepicker'> <input type='text' class="form-control" readonly /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> </div> </div>
Use the icon to pick your date not the text field. The text field is read only.
The clause readonly="yes" in put statement is workable, actually required libraries are not included, that are as following ones
<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-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With