We Keep Coding

Why date is not displaying for jquery date picker?

Iam using date picker jquery and it is not displaying inside input field. My link is https://jsfiddle.net/sbk2hd4c/10/ .
My code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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 glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
My link is: https://jsfiddle.net/sbk2hd4c/10/
Thankyou in advance!!!

Check this
https://jsfiddle.net/sbk2hd4c/11/
You used your Id in div which should be in your input tag
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' >
<input type='text' class="form-control" id='datetimepicker1' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

<input type='text' class="form-control" id='datetimepicker1' />
Change the id for input as above. Div should have different id.

You can bind the changeDate to the datepicker and can set the date in textBox
$('#datetimepicker1').datetimepicker().on('changeDate', dateChangeListener);
function dateChangeListener(event) {
var formattedDate = event.format('dd.mm.yy');
$('text_box_id').val(formattedDate);
}

datetimepicker bootstrap eonasdan

I need to get the changed value in the datetimepicker.
I tried
$('#startDate').datetimepicker().on('dp.change', function (event) {
console.log(event.date);
});
And :
$('#startDate').datetimepicker().on('dp.hide', function (event) {
console.log(event.date);
});
But the result is the value before the change.
Help me to understand please.

i think this is what you want (just edit the $('input') with your element ID or class name:
https://jsfiddle.net/yqgxd472/
<div class="container">
<div class="row">
<div class='col-sm-6'>
<br>
<br>
<br>
<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 glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
js:
$(function() {
$('input').datetimepicker({
format: 'YYYY-MM-DD H:m:s'
});
});
$('input').datetimepicker().on('dp.change', function(event) {
console.log(moment(event.date).format('YYYY-MM-DD')); // using moment.js
});

Bootstrap Datetimepicker span breaks

I use Bootstrap 3 Datepicker v4 but something breaks and I cannot fix it. I think it's the input which break the css.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<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 glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
RESULT
What should I overwrite, in order to remove the margin between the span and the input?

I tried to recreate the issue using Bootply, but was unable to.
So try changing the width of the div, like so:
<div class='input-group date' id='datetimepicker1' style="width: 90%" <!-- Or something like that depending on what your preference is -->>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Let me know if this helps!

Setting mindate in datepicker on the bases of another datetimepicker selected date

I want to set mindate from another datetimepicker selected date in bootstrap datepicker. Is it possible to do this??
<div class="form-group hide" id="divStartsOn">
<div class="col-md-3">
<label>Start On</label>
</div>
<div class="input-group col-md-9" style="padding-left: 14px;">
<input id="datetimepicker8" type="text" class="date-picker form-control" />
<label for="datetimepicker8" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
<div class="clearfix"></div>
</div>
<div class="input-group col-md-6" style="padding-left: 14px;">
<input id="datetimepicker9" type="text" class="date-picker form-control" />
<label for="datetimepicker9" class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
jQuery Code:
$("#datetimepicker6").on("dp.change", function (e) {
var sdate = $('#txtdatetimepicker1').val().split('/');
sdate[2] = sdate[2].substring(0, 4);
var stdate = sdate[0] + "/" + sdate[1] + "/" + sdate[2];
$("#datepicker8").datepicker("option", { minDate: stdate })
});

I solved this is by removing datpicker.js and add jquery.ui.js after jquery.js

Preventing bootstrap from breaking between two form elements

I am using bootstrap with the bootstrap datetimepicker and have a bit of a problem.
My problem is best explained by this JSfiddle.
What I want to do is to have three separate form divs in a row and for them to stay in one row no matter the screen size. I would usually acchieve this by simply having a form-group div (as seen in the "situation I want" of the JSfiddle), however in this case, that is not possible because if I do that, then the second input messes with the javascript of the bootstrap datetimepicker, so I cannot touch the form group div.
Is there any way of acchieving what I want to do?
The HTML in which my problem is isolated is:
<div class="container">
<div class="row">
The situation right now:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-inline">
<div class="form-group">
<div class="input-group date date-filter" id="start-date">
<input type="text" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<input type="text" class="form-control" id="end-time" />
</div>
</div>
</div>
<div class="row">
The situation I want:
<div class="col-sm-2 col-sm-offset-5">
<div class="form-group">
<div class="input-group date date-filter" id="end-date">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="end-time"/>
</div>
</div>
</div>
</div>
</div>