Menu
Is there a way to show calendar when a user clicks on input as well? Right now I have to click on the calendar icon which will then show calendar.
HTML:
<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>
JavaScript:
$(function() {
$('#datetimepicker1').datetimepicker();
});
Example: https://jsfiddle.net/8jpmkcr5/81/
498
Bootstrap 4 Date and TimePicker Code Snippet Here you get the Datetime picker, Date picker, and Timepicker section. In the Datetime picker field, you are presented with a nice calendar to choose the date along with the time. In the date picker you can only choose the date from the calendar and in the timepicker field, you can only choose the time.
A datetimepicker will be added to the “#form_datetime” input field. Also, all earlier dates will be disabled for preventing user select a previous date. Once the form is submitted, the event name and event date & time will be inserted into the database with PHP and MySQL.
Once the user selects a date & time, the datetimepicker will be closed automatically. The Today link will appear under the datetimepicker to select today’s date and the current time. Bootstrap DateTime Picker has various options for datetimepicker method, you can get the details from here.
Add data-mdb-toggle="datetimepicker" to the input element to enable toggling on input click. It is also possible to set toggleButton option to false to remove the toggle button. Use datepicker or timepicker option to set custom options from our Datepicker and Timepicker components.
You can simply use allowInputToggle option setting it to true (Default: false). As docs says:
If
true, the picker will show on textbox focus and icon click when used in a button group
Here a working live sample:
$('#datetimepicker1').datetimepicker({
allowInputToggle: true
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/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' id="datetimepicker1">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>It's a little tricky, but you need to move the datetime picker to the input and manually handle the click on the input group addon. For 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>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
