We Keep Coding

Bootstrap Datepicker cut off the bottom of screen

When clicking the datepicker input field, the viewport scrolls down to show the the calendar (as expected), however, the calendar view is cut off from the position at which the viewport was before it scrolled down.
I have tried changing the z-index to both large negative and positive values, it seems to have no effect. I have included a video link also for better demonstration.
HTML
<div class="form-group has-feedback col-xs-12 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4 has-feedback-left">
<div id="specificday" class="specificday">
<label for="specificdate" style="font-size: 13px;">What date?</label>
<div class="input-group date specificdate">
<input type="text" id="ebaySpecificDate" name="ebaySpecificDate" class="form-control" onkeydown="return false" onchange="return specificDateChanged()" readonly="true"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
JS
$('.input-group.date.specificdate').datepicker({
format: "dd/mm/yyyy",
maxViewMode: 1,
todayBtn: "linked",
autoclose: true,
startDate: new Date(),
todayHighlight: true
}).on('show', function(e){
$('.datepicker').css("top", $('#ebaySpecificDate').offset().top+35);
$('.datepicker').css("z-index", 1151);
});
Video
https://drive.google.com/file/d/1GzY8msZGy890dc8BHwWUl0zEhIkWGdcI/view?usp=sharing

Why timepicker can not be downgraded when choosing a date other than today?

My html code like this :
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm'). I want the code to work only on this day. Other than today the code does not work
How can I do it?

Your #datepicker and #timepicker are unrelated, they are fully independent,
is up to you to relate them. You can dinamically set minDate of #timepicker using minDate function.
You can add a listner for dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using momentjs isSame).
You have to add minDate option also to #datepicker if you want to disable past dates, as you stated in the comments.
Here a working sample:
$(function () {
$('#datepicker').datetimepicker({
minDate: moment().startOf('day')
}).on('dp.change', function(e){
if( e.date && e.date.isSame(moment(), 'd') ){
var min = moment().startOf('minute').add(300, 'm');
$('#timepicker').data("DateTimePicker").minDate(min);
} else {
$('#timepicker').data("DateTimePicker").minDate(false);
}
});
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datepicker').value;
console.log(value)
valueTime = document.getElementById('timepicker').value;
console.log(valueTime)
});
<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="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Please note that, as stated before, #datepicker and #timepicker are unrelated, so with the #timepicker you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker).

If you want to limit the input to today only, why are you trying to set a limit on the time picker? You should be setting the limit on the date picker

Showing Bootstrap Datetimepicker inside popover

I am using this code to fire the popup:
HTML
<div class="popover-markup">
Track
<div class="head hide">Track #item.FullName [#item.Id]</div>
<div class="content hide">
<div class="form-group">
<label>Date Called:</label>
<input type="text"
class="form-control dtp"
placeholder="Date called…">
</div>
</div>
<span class="btn btn-info rr" id="abcd">Submit</span>
</div>
</div>
And my jQuery:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
});
My intention is to use Bootstrap DateTimePicker widget when the user clicks on the input inside the popover. I have tried using the solution offered in this SO question.
My modified jQuery code now looks:
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
placement: "bottom",
content: function () {
return $(this).parent().find('.content').html();
}
}).on('shown.bs.popover', function () {
$('.dtp').datetimepicker();
});
I still get to see the datetimepicker NOT at the bottom of the input field but at the bottom of the whole popover. what am I missing? Please guide.

You are missing some required div elements,
Depend your needs, possible solutions show the datepicker at bottom of input, the correct HTML....
If with icon
<div class="form-group">
<label>Date Called:</label>
<div class="input-group dtp">
<input type="text" class="form-control" placeholder="Date called…">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Fiddle Example
And Without Icon
<div class="row">
<div class='col-sm-12'>
<label>Date Called:</label>
<input type="text" class="form-control dtp" placeholder="Date called…">
</div>
</div>
Fiddle Example
Rest of the code & approach is all good.

Bootstrap date-picker on change event on text box is not working?

I had a date-picker which was working correctly.And its change event was also working fine. Now i implemented a icon and make text box read-only. Now the change event is not fired neither in read-only textbox case nor in non-read-only textbook case.I have changes only html.
HTML of working case:
<label class="control-label">Date</label>
<input type="text" class="form-control date-picker" id="StateDatePicker" placeholder="MM/DD/YYYY">
Javascript of working case:
$StateDatePicker = $("#StateDatePicker");
$(".date-picker").datetimepicker({
format: "MM/DD/YYYY"
})
This is how i called change event.
$StateDatePicker.on("dp.change", function () {
//Performing functionality
});
This was working fine.It was no icon in working case, now i added icon showing in picture:
Now i have changed the following:
HTML:
<div class='date-picker input-group date'>
<input type='text' class="form-control" id="StateDatePicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Date-picker is working fine, only change event is not called
There is no change in JS. Why its change event is not called is not working?

Finally i got my answer
I tried this and it working now
<div class='date-picker input-group date' id="StateDatePicker"> //Set id to div
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

Try to use like this where you have placed
This may help you (Not Sure)
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>

in your HTML :
on your javascript :
$('.form_date').datetimepicker({
language: 'id',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});

You can use the datepicker's onSelect event.
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
If you like, of course, you can make the change event on the input fire:
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});

Try something like:
$("#StateDatePicker").datetimepicker({
format: "MM/DD/YYYY"
}).on("changeDate", function () {
//Performing functionality
});
or maybe change your HTML to this: (give id for div tag, not input field)
<div class="input-group input-append date" id="StateDatePicker">
<input type="text" class="form-control" placeholder="MM/DD/YYYY">
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>

Its working demo.
Html Section
<div class="form-group input-group">
<label class="input-group-btn" for="date-fld1">
<span class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</label>
<input type="text" class="form-control date-input" id="date-fld1" readonly/>
</div>
And in script-----------
$(".date-input").datepicker().on("changeDate",function(){
alert('hi');
});
CDN files used
- http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js
and http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css

Bootstrap datepicker auto fill end date

I am using the Bootstrap Datepicker here in order to display a simple calendar range picker. All is working well so far, however I would like some additional functionality that I can't seem to figure out.
I would like to select a start date and then automatically fill in the end date (+10 days).
I'm sure this is possible however I can't figure it out.
I have created a Fiddle. Any help is greatly appreciated.
My JS is as follows;
$( document ).ready(function() {
$('#sandbox-container .input-daterange').datepicker({
format: "dd/mm/yy",
startDate: "0d",
endDate: "+10d",
todayBtn: "linked",
clearBtn: true,
multidateSeparator: " ",
forceParse: false,
daysOfWeekDisabled: "0,6",
orientation: "top auto",
todayHighlight: true,
toggleActive: true
});
});
My HTML is as follows;
<div class="col-md-5" id="sandbox-container">
<h2>Select borrow date</h2>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-lg form-control" name="start" placeholder="borrow date" /> <span class="input-group-addon">to</span>
<input type="text" class="input-lg form-control" name="end" placeholder="return date" />
</div>
</div>

You can check this link
Datepicker using jquery
You have to include javascript on change fuction of first datepicker
$('firstdatepicker').change(function() {
var date2 = $('firstdatepicker').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('seconddatepicker').datepicker('setDate', date2);
});