Develop Reference

How to disable Bootstrap datetimepicker

I am using the Bootstrap datatimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/). I'd like to disable the datetimepicker on page load.
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
});
<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>
I have tried $('#datetimepicker1').prop('disabled', true) and $('#datetimepicker1').disable() from (http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#disable). Neither work. So what is the best way to do it?

try the following code $('#datetimepicker1 > .form-control').prop('disabled', true);
please check the link https://jsfiddle.net/komal10041992/DTcHh/32829/

You were close to solution, you have to use disable(), but you have to remember that, as docs says:
Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()
So you have to add .data("DateTimePicker") to your $('#datetimepicker1').disable().
Here a working sample:
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
});
//To Disable use disable() function
$('#datetimepicker1').data("DateTimePicker").disable();
//To Enable use enable() function
//$('#datetimepicker1').data("DateTimePicker").enable();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<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>

$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
defaultDate: new Date(),
format: 'DD/MM/YYYY hh:mm:ss A'
}).find("input:first").prop("disabled", true);
});

Bootstrap 3 Datepicker capture date using inline calendar

I'm trying to capture the date selected on my bootstrap 3 datepicker, but I can't seem to understand the documentation, so I tried this:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data"></div>
</div>
with my jquery being:
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});
How do I get the date I selected on the datepicker?

Your html was incorrect. Here is the corrected html. I believe your intention was to use inline datetimepicker such as in this example. If you see the example quoted in the page:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<!-- Start of datetimepicker html-->
<div id="datetimepicker12"></div>
<!-- End of datetimepicker html-->
</div>
</div>
</div></code>
So your corrected HTML should be as belows:
<div id="datetimepicker">
<input type="hidden" class="form-control" id="datepicker-data">
</div>
javascript
$('#datetimepicker').datetimepicker({
inline:true,
format: 'DD/MM/YYYY',
daysOfWeekDisabled: [0, 6]
});
$("#datetimepicker").click(function(){
var dateData = $('#datepicker-data').val();
alert(dateData);
});

How to preselect date in bootstrap 3 datetimepicker

I am using Bootstrap 3 Datepicker for that I am trying following
<div class='input-group date datetimepicker1'>
<input type='text' name="actEndDate" placeholder="End Date" class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
and calling it by following
$(".datetimepicker1").datetimepicker();
Its working fine
now i am changing date using JavaScript on clicking of other field i have date formate like 11/4/2015 and for that i am trying following
$('.datetimepicker1').datetimepicker({
defaultDate: "11/1/2013"
});
now how to preselect date ?
Note : its different from jquery datepicker

I see this way for your question:
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("10/2/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
you can see this page for other doubt.
Setting defaultDate parameter is the right method to resolve it.

Formatting bootstrap timepicker

I am using bootstrap timepicker (http://jdewit.github.io/bootstrap-timepicker/) and want to format the default value this way: 00:00 but there is only one leading zero in my solution:
Here is the code:
<div class="input-append bootstrap-timepicker">
<input type="text" id="timepicker1" class="input-small bookingTextBox" />
</div>
Javascript:
$('#timepicker1').timepicker(
{
minuteStep: 1,
showMeridian: false,
defaultTime: '00:00'
});
Is there a way to show 00:00 as default value?

check on this link for help for you click here
try this
defaultTime : '00:00 AM'

How to disable time in Bootstrap DateTimePicker?

I wanna use bootstrap datetimepicker without select time but it is not working. I gave false value to the pickTime parameter but it is still not working. But Format and language parameters is working.
Here is the code!
How can i fix this?
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy",
pickTime: false,
autoclose: true,
todayBtn: true,
language: 'tr',
pickerPosition: "bottom-right"
});
});
</script>
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">Birtdate</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>

There are many datetimepicker plugin, so you need to details what plugin you used.
If you use the plugin from http://eonasdan.github.io/bootstrap-datetimepicker/.
I think, you may use wrong its option : read more at http://eonasdan.github.io/bootstrap-datetimepicker/Options/. Here I removed almost, and just keep one:
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy"
});

try this remove pickTime Option and use minview : 2
$(function() {
$('#datetimepicker4').datetimepicker({
minView : 2
});
});

Try the below code, which will show only the date view, when the calendar is pulled down.
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'yyyy-mm-dd',
startView: 'month',
minView: 'month',
autoclose: true
});
});

I found this website online it disables the time picker
http://tarruda.github.io/bootstrap-datetimepicker/
<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>