We Keep Coding

How to force Bootstrap calendar to focus and open under the <i> tag when click on input?

I have a Bootstrap calendar. It opens when I click on the calendar icon but it does not open when I click on the input. I want to make the calendar open under the calendar icon not under the input element when click on input.
<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$(document).ready(function() {
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
$('#dp2').click(function(event){
event.preventDefault();
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
});
</script>

I think simple questions are not answered here. Instead of clicking to the vote down button it would be useful to provide a working example link. Anyway took more then half an hour but made it to work it was very simple. didn't think to use $('#dp3').datepicker('show');
$(document).ready(function() {
$("#dp3").datepicker();
$('#dp2').click(function () {
$('#dp3').datepicker('show');
});
});

Linking two bootstrap timepicker input elements

I am trying to implement two dropdown menus: one for a time value, and one for a duration starting from that time onwards. i.e something like this.
I am using a bootstrap timepicker for the dropdown menu.
I wrote this method for the first field:
$('#timeWithDuration')
.timepicker({ 'scrollDefaultNow': true })
.on('change', function() {
var from_time = $("input[name='from_time']").val();
$('#duration').timepicker({
'minTime': from_time,
'maxTime': '11:30pm',
'showDuration': true
});
});
where #timeWithDuration is my first input field and #duration is my second. This works fine the first time I do it (after selecting a value in the first field, I can only see times past that value in the second field) but it then doesn't let me update the values anymore. i.e I can't select a new value for neither the first, nor the second field. The dropdown displays properly, but then doesn't update the value on select.
This is the HTML code for the input fields:
<div class='col-sm-5'>
<input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
</div>
<div class='col-sm-5'>
<input id='duration' type='text' class='form-control ui-timepicker-input' placeholder='Duration' autocomplete='off'>
</div>
Unexperienced frontend dev here so please be gentle <3 Cheers!

Use the proper event changeTime and reset the duration input every time:
DEMO: JSnippet
HTML:
<div class='row'>
<div class='col-sm-5'>
<input id='timeWithDuration' type='text' class='form-control ui-timepicker-input' name='from_time' placeholder='What time?' autocomplete='off'>
</div>
<div class='col-sm-5'>
<input id='duration' type='text' class='form-control' placeholder='Duration' autocomplete='off'>
</div>
</div>
JS:
$(function() {
var $duration = $('#duration');
var $timeWithDuration = $('#timeWithDuration');
$timeWithDuration
.timepicker({ 'scrollDefaultNow': true })
.on('changeTime', function() {
var from_time = $("input[name='from_time']").val();
if ($duration.hasClass('ui-timepicker-input')) {
$duration.timepicker('remove');
$duration.val('');
}
$duration.timepicker({
'minTime': from_time,
'maxTime': '11:30pm',
'showDuration': true
});
});
});

Looks like you are using this timepicker.
You will want to create an onchange event on the #timeWithDuration input that updates the minTime option on your timepicker.
Also, I would initialize your second timepicker outside of your onchange event for the first.
$('#timeWithDuration')
.timepicker({ 'scrollDefaultNow': true })
.on('changeTime', function() {
var from_time = $("input[name='from_time']").val();
$('#duration').timepicker('option', 'minTime', from_time);
if ($('#duration').val() && $('#duration').val() < from_time) {
$('#duration').timepicker('setTime', from_time);
}
});
$('#duration').timepicker({'maxTime': '11:30pm', 'showDuration': true});
<link href="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jonthornton/jquery-timepicker/master/jquery.timepicker.min.js"></script>
<div class="col-sm-5">
<input id="timeWithDuration" type="text" class="form-control ui-timepicker-input" name="from_time" placeholder="What time?" autocomplete="off">
</div>
<div class="col-sm-5">
<input id="duration" type="text" class="form-control ui-timepicker-input" placeholder="Duration" autocomplete="off">
</div>
As #Shlomi Hassid pointed out in his answer, you would also want to use the timepicker's changeTime event, rather than the native change event, so that the function will only execute when the input in your #timeWithDuration timepicker is a valid time.

Preventing jQuery's Datepicker from changing value of button

I have a simple button:
<input type=button class=datepicker value='Select Date for payroll' />
<input type=button class=datepicker value='Select Date for ?' />
<input type=button class=datepicker value='Select Date for >' />
and I have a jQuery's Datepicker attached to it:
$('.datepicker').datepicker();
But the default action is to change the text/value of the button when a date is picked. I want to leave the default value. Is this possible?
I have multiple buttons which need to open a datepicker. When the date is selected on the Datepicker, it will fire a function and deal with the value. But I do not want the value choosen to be updated anywhere.
It must be fired on a button click.

You can use the shownOn-option of the datepicker-widget:
jQuery
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
onSelect: function(dateText){
alert(dateText + ' selected');
}
});
Note: the parameter of the function of onSelect is always of type string
HTML
<input type="hidden" id="datepicker" />
Demo
Reference
buttonText
datepicker - icon trigger
onSelect

You can hide the input and use the showOn attribute
HTML:
<input style="display:none;" type=button id=datepicker value='Select Date' />
JS:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date"
});
DEMO: https://jsfiddle.net/ogavr7gq/2/

You could try something like this:
HTML:
<input type="hidden" id="datepicker" />
JavaScript:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date"
});
$("#datepicker").on("change", function(e) {
e.preventDefault();
e.stopPropagation();
alert("Changed to: " + $(this).val());
});
Fiddle here: https://jsfiddle.net/robbyn/9oq2wp8j/

Jquery select behavior differ on IE

I have simple code:
<input id="thisInput" class="MyInput"
maxlength="3"
value=" 0"
type="text" />
and JS code:
$("#thisInput").on( "click", function() {
$(this).select();
});
In Chrome this code. In first click selects all values in input. The other click end with no selection
In IE11 each click end with selection of all text in input.
my code is somewhat wrong? Or Chrome or IE is bugged?
JSFIDDLe

Like #Jai commented, this is the Chrome behavior. Personally I don't consider this a Chrome bug nor a IE one.
Selecting the text always
If you want to always select the text from input, you can trick it with an async call:
$("#thisInput").on("click", function() {
setTimeout(function() {
$(this).select();
}.bind(this), 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />
Toggle selection
Well, the best working solution I see is using a flag and toggling it:
var select = false;
$("#thisInput").on("click", function() {
if (select = !select) {
$(this).select();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="thisInput" class="MyInput" maxlength="3" value=" 0" type="text" />

It may happened that click event is not triggering properly in IE, so try adding focus event also
$("#thisInput").on( "click focus", function() {
$(this).select();
});
JSFiddle Demo

Bootstrap datepicker return focus after select

If you initialize a bootstrap datepicker from eternicode with autoclose: true, two undesirable behaviors happen:
After the picker closes, when you tab into the next field, you'll start at the beginning of the document again. This can be quite cumbersome on long forms.
Because the picker changes the value programatically, any listeners that you have that care about the blur event on the input won't behave properly. The blur actually occurs when you select the picker value and the input's value hasn't changed. Then the bootstrap-datepicker programmatically updates the field so blur is never fired with the new value.
Here's a demo in stack snippets:
*select any field, select a value from the picker, and then hit Tab
$(".datepicker").datepicker({
autoclose: true
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
According to the answer to Focus the field after selecting the jQuery UI datepicker, you can tap into the onClose or onSelect events, but the bootstrap picker doesn't offer those events.
Simply replacing them with hide doesn't seem to work either, since the refocusing will create an endless loop that always keeps the picker open any time you try to close it.
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
$(this).focus();
});
Stack Snippet Demo:
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
$(this).focus();
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

This is a little bit of a hack job, but you can conditionally hide and show the elements to avoid an infinite loop. On hide, check if this is the first time attempting to hide. If the input does not have focus (meaning they have used the dropdown and we've lost our tab order, then refocusing will cause the picker to show. We'll also catch this show and hide from there, entering back into our original code. We'll pass back and forth a property on the object so we can manage state.
That will look like this:
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
if (!this.firstHide) {
if (!$(this).is(":focus")) {
this.firstHide = true;
// this will inadvertently call show (we're trying to hide!)
this.focus();
}
} else {
this.firstHide = false;
}
})
.on('show', function () {
if (this.firstHide) {
// careful, we have an infinite loop!
$(this).datepicker('hide');
}
})
Stack Snippet Demo:
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
if (!this.firstHide) {
if (!$(this).is(":focus")) {
this.firstHide = true;
// this will inadvertently call show (we're trying to hide!)
this.focus();
}
} else {
this.firstHide = false;
}
})
.on('show', function () {
if (this.firstHide) {
// careful, we have an infinite loop!
$(this).datepicker('hide');
}
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

I am trying to achieve the same thing but somehow the solution is a little buggy. For example, if you click the same date picker again, it is not responding. The browser will stop responding if you click multiple times. I have a better solution which is below.
My solution is to trick the datepicker to focus on the next element within the DIV. I have parsley validation, it adds the <UL> for me automatically.
<div>
<input type="text" class="datepicker" />
<ul class="error-message"></ul>
</div>
$('.datepicker').datepicker({
autoclose: true
}).on('hide', function () {
$(this).next('ul').attr('tabindex',-1).focus();
});

Current date selected features added with #KyleMit solutions
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
if (!this.firstHide) {
if (!$(this).is(":focus")) {
this.firstHide = true;
// this will inadvertently call show (we're trying to hide!)
this.focus();
}
} else {
this.firstHide = false;
}
})
.on('show', function () {
if (this.firstHide) {
// careful, we have an infinite loop!
$(this).datepicker('hide');
}
})
$('.datepicker').datepicker('setDate', today);
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>