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!
Related
I've read the documents for the Bootstrap DateTimePicker but I can't seem to work out how to read a value or pass a value to the html attribute tag "value".
For example I want the value to display in the TimeDatePicker but it does not show up. And if I was to add a TimeDate in the TimeDatePicker I want to also make that appear in a value tag.
The values are being read from the backend in Python.
<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" value="2017-03-08 08:00:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
$(function () {
$('#datetimepicker1').datetimepicker();
});
https://jsfiddle.net/8g2g8n3o/5/
You have to set the format of date time. Here's a demo.
$('#datetimepicker1').datetimepicker({
// set date time format
format: 'YYYY-MM-DD hh:mm:ss'
});
$('#datetimepicker1').on('dp.change', function() {
// date time change event
console.log($('#datetimepicker1').find('input').val()) // get selected date time
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<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" value="2017-03-08 08:00:00">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
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);
}
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
});
I'm trying to have two buttons. One for time and another for date.
For example
http://jsfiddle.net/RR4hw/1383/
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<input type='text' class="form-control" name="startDate" readonly />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
</div>
jQuery(function () {
jQuery('#startDate').datetimepicker();
jQuery('#endDate').datetimepicker();
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
});
how can i approach it? Is this possible?
I solved this by using option "sideBySide":
jQuery('#startDate').datetimepicker({sideBySide: true});
jQuery('#endDate').datetimepicker({sideBySide: true});
I hope it helps.
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>