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

Jquery datepicker not working inside v-for of Vue.js component in laravel

Jquery date picker showing strange behavior inside the v-for loop in my vue.js component. Outside of the loop, it is working fine and date picker is showing. But, inside my v-for loop, it is not picking date picker as expected.
Here is my working code of date picker. (Working Case)
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
Date picker not working in this case (Non-working case)
<div v-for="(pay_roll, i) in payrolls" class="border border-primary p-3 rounded mb-3" :key="pay_roll.id">
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="date" class="col-form-label pt-0">For Week End</label>
<input type="text" :name="`payrolls[${i}][payrol_date]`" class="form-control datepickere">
</div>
</div>
</div>
Here is my Jquery code of datepicker.
$(".datepickere").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value= " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
Although I have given a class instead of an id, still problem is the same. What is going wrong?

seems to be a typo in your code. Change datepickere to datepicker and it should work. Also, if I was you, I would use a vue compatible datepicker such as https://www.npmjs.com/package/vuejs-datepicker.

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 multiple popover display and placement

I have multiple form input and text fields on which I want a popover to display when the field is in focus. Since the content of some of the popovers can be lengthy I don't want to declare the content inside the input tag. Instead I have the following:
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-tooltip-trigger" id="name" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50" >
<div class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>
I have the following javascript
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function () {
return $(correct tool tip).html();
}
});
});
How can I get the correct popover to display or returned in the above javascript. What if I add a data attribute to the tool-tip content to link it to each input field e.g <div class="js-tooltip" style="display:none;" data-tooltip="name"> and then use some jquery to find and return it. How would you do this with jquery? Does anyone have a more elegant solution?
Also how do I get the popover to remain with the input field and auto position upon window resize. Currently it floats away when I resize the window.
Manage to figure it out myself using the above html:
$(function () {
$('.js-tooltip-trigger').popover({
html: true,
trigger: 'focus',
content: function (e) {
return $(this).parent(".form-group").find(".js-tooltip").html();
}
});
});
Can anyone think of a more elegant solution?

You can do like this way...Here is the DEMO
Jquery Part
$(function(){
// Enabling Popover Example 1 - HTML (content and title from html tags of element)
$("[data-toggle=popover]").popover();
// Enabling Popover Example 2 - JS (hidden content and title capturing)
$(".form-control").popover({
html : true,
content: function() {
return $('.js-tooltip').html();
},
title: function() {
return $('.js-tooltip').html();
}
});
});
HTML Part
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control js-popover-trigger" id="name" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your name" >
<div class="js-tooltip" style="display: none;" id="n1">
<p><strong>Your name.</strong></p>
<p>Enter your full name. This will be used ...</p>
</div>
</div>
<div class="form-group">
<label for="ref">Reference</label>
<input type="text" class="form-control js-popover-trigger" id="ref" maxlength="50" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Your reference is optional">
<div class="js-tooltip" style="display: none;" id="t2">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</div>
</div>

I'm not a fan of how this works, but essentially you have to create an element that stays in the position you want the popover , and append the popover to it. In this case, I have used the container you already have in place for the tooltip html. I'm creating container ID's dynamically so you don't have to worry about doing that in your html.
So for this HTML:
<div class="form-group pos-relative">
<label for="ref">Reference</label>
<input type="text" class="form-control js-tooltip-trigger" id="ref" maxlength="50">
<span class="js-tooltip" style="display: none;">
<p><strong>Your reference is optional.</strong></p>
<p>Enter a code of your choice for reference purposes.</p>
</span>
</div>
This CSS:
.pos-relative{
position:relative;
}
.js-tooltip{
position:absolute;
top:0;
right:0;
}
And this JS--here's where it happens:
$(function () {
$('.js-tooltip-trigger').each(function(ind, ele){
var $ele = $(ele),
$ttSpan = $ele.next('.js-tooltip'),
ttHtml = $ttSpan.html(),
rndID = 'ttid'+ String(Math.random()).substr(2);
// set the ID, strip the style, and empty the html--
// we already have it stored in the var above
$ttSpan.attr('id', rndID).removeAttr('style').html('');
// make the popovers
$ele.popover({
html: true,
trigger: 'focus',
placement: 'right',
container: '#'+rndID,
content: ttHtml
});
});
});
See it in action here

Angular JS: ngShow isn't binding my change

I've got an Angular module here within a larger rails project. I'm new to Angular and wish to avoid jQuery if I can (but do use it throughout the rails project and can use it if necessary). What I'm trying to do is hide a checkbox if the End Time is "", and show a checkbox if there's a value in the End Time. Unfortunately I have been unable to hide it if End Time is "". See:
You can see my HTML code below:
<div class="control-group span8">
<h4 class="pull-left"><strong>Active Hours (UTC):</strong></h4>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputStartTime">Start Time</label>
<div class="controls">
<select ng-model="geoRegion.start_time" id="inputStartTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.start_time}}"></select>
</div>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputEndTime">End Time</label>
<div class="controls">
<select ng-model="geoRegion.end_time" id="inputEndTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.end_time}}"></select>
</div>
</div>
<div class="control-group span8">
<div ng-show="clearGeoSegment(geoRegion.end_time)"><label class="inline checkbox label-unstyled font-size-14"><input type="checkbox" id="clearGeoSegment" ng-model="geoRegion.clear_segment">Clear Geo Segment at end of active time period.</label></div>
</div>
<div class="control-group span8">
<p id="broadcast-notice" class="pull-left font-size-14"><strong>Note:</strong> If active hours is blank, the Geo Segment is always active.</p>
</div>
My controller code (yes, I used jQuery. But please suggest otherwise!):
$scope.clearGeoSegment = (endTime) ->
if endTime is ''
$('#clearGeoSegment').hide()
else
$('#clearGeoSegment').show()
Any help would be greatly appreciated!

So you don't need to do the hide/show with jquery. You need to just bind to an expression that will be truthy when the checkbox should be visible. In this case it should be as simple as:
<div ng-show="geoRegion.end_time">
And you can delete your clearGeoSegment function entirely.