Disable time in bootstrap date time picker
I am using bootstrap date time picker in my web application, made in PHP/HTML5 and JavaScript. I am currently using one from here: http://tarruda.github.io/bootstrap-datetimepicker/
When I am using the control without time, it doesn't work. It just shows a blank text box.
I just want to remove time from date time picker. Is there any solution for this?
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({ pickTime: false });
});
</script>
Check the below snippet
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
// Bootstrap DateTimePicker v4
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
</div>
You can refer http://eonasdan.github.io/bootstrap-datetimepicker/ for documentation and other functions in detail. This should work.
Update to support i18n
Use localized formats of moment.js:
-
L
for date only -
LT
for time only -
L LT
for date and time
See other localized formats in the moment.js documentation (https://momentjs.com/docs/#/displaying/format/)
I tried all of the solutions posted here but none of them worked for me. I managed to disable the time by using this line of code in my jQuery:
$('#datetimepicker4').datetimepicker({
format: 'YYYY-MM-DD'
});
This set the format to date only and disabled the time completely. Hope this helps.
This is for: Eonasdan's Bootstrap Datetimepicker
First of all I would provide an id
attribute for the <input>
and then initialize the datetimepicker directly for that <input>
(and not for the parent container):
<div class="container">
<input data-format="yyyy-MM-dd" type="text" id="datetimepicker"/>
</div>
<script type="text/javascript">
$(function() {
// Bootstrap DateTimePicker v3
$('#datetimepicker').datetimepicker({
pickTime: false
});
// Bootstrap DateTimePicker v4
$('#datetimepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
});
</script>
For v3: Contrary to Ck Maurya's answer:
-
pickDate: false
will disable the date and only allow to pick a time -
pickTime: false
will disable the time and only allow to pick a date (which is what you want).
For v4: Bootstrap Datetimepicker now uses the format to determine if a time-component is present. If no time component is present, it won't let you choose a time (and hide the clock icon).
$('#datetimepicker').datetimepicker({
minView: 2,
pickTime: false,
language: 'pt-BR'
});
Please try if it works for you as well