Develop Reference

Bootstrap 3 datetimepicker does not reapper after continuous clicks

I have a datetimepicker that shows up when the field is clicked and hides if clicked again. However, if clicked for the third time, the calendar does not appear. If you unfocus the field and then click it again - it appears.
I'm clueless.
HTML :
<div class="input-group">
<input id="setdate-date" class="form-control" type="text" name="Date" value="#Model.Date.ToString("yyyy-MM-dd HH:mm")" style="cursor:pointer">
<span class="input-group-addon datepickerbutton start-date-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
JS:
<script>
$(function () {
var today = new Date();
var endDate = new Date(#Model.MaxDate.Year, #(Model.MaxDate.Month - 1), #Model.MaxDate.Day, #Model.MaxDate.Hour, #Model.MaxDate.Minute, 0, 0);
$('#setdate-date').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
startDate: today,
endDate: endDate,
autoclose: true
});
$('#setdate-date').datetimepicker('setDate', new Date());
$('#form-setdate .datepickerbutton').click(function () {
$('#setdate-date').datetimepicker('show');
});
})
</script>
Any ideas ? The same occurs on all of my datetimepickers.
Regards
edit: I tried applying .blur() on $('#setdate-date') so it unfocuses after a click but to no avail :/

This is how you use datepicker:
<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>
Here you have different scenarios: https://eonasdan.github.io/bootstrap-datetimepicker/

How to make a clickable datepicker glyphicon-calender icon to work properly?

Here are the code for enabling datepicket to work in firefox
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');
}
</script>
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
Below are the html code
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date.

<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<label class="input-group-addon" for="datefield">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</div>
Change span containing glyphicon-calendar to label, add attribute for with the ID of parent datetimepicker (in this case ID is datefield), your glyphicon-calendar icon is now clickable and will open the date time picker.
Thanks #Washington Guedes for original answer
btw this solution won't work if you nest your date time picker in html table for some reason - thought this info might be useful... you have to use bootstrap.

eonasdan DateTimePicker autoclose doesn't work

If I removed the autoclose it works fine. How to autoclose datetimepicker. I've been searching on this but couldn't find useful information.
$('#start_schedule').datetimepicker({
format: 'HH:mm',
autoclose: true
});

It doesn't work actually according to documentation. If you will use showClose: true, it won't recognize, you will get an error. There is no other way rather than using this code in the docs. Hope this help.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>

Get bootstrap-datetimepicker to appear on field and on icon, without duplicating

I am trying to get bootstrap-datetimepicker to work the way I want it to. Normally the datetime selector only pops up when clicked on the icon. But I want it to pop up when clicked on the field and on the icon.
<div class="input-group datetime datepicker">
<input class="form-control" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
I found out that if I added the same class (datepicker) on the input field the popup will appear when clicked on the field, which is what I want.
The problem however is that if I click on the field first and then the icon the date picker that popped up when clicked on the field does not disappear. Which means there ends up being two date pickers on the screen.
However if I click on the glphyicon first and then the field it works properly. As in, when the field is clicked the date picker on time disappears and the on field appears. How do I make it so that the same thing happens if the field is clicked first and then the icon.
<div class="input-group datetime datepicker">
<input class="form-control datepicked" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
Here is the javascript codes that calls datetimepicker:
$(document).on('ready page:change', function() {
$('.datepicker').datetimepicker({
format: 'MMM Do YYYY',
pickTime: false,
collapse: true
});
});

You can simply focus the input when clicking on the input group addon span.
$('.datepicker').each(function(k, v) {
var $input = $(v).find('.make-datepicker');
$input.datetimepicker({
format: 'MMM Do YYYY',
collapse: true
});
$(v).find('span.input-group-addon').click(function(e) {
$input.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<br/>
<div class="input-group datetime datepicker">
<input class="form-control make-datepicker" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>

Late answer but I've found a better solution for anyone need.
<div class="col-md-6 input-group">
<input type="text" id="testdate" name="testdate" class="form-control" value="">
<label class="input-group-addon btn" for="testdate">
<span class="fa fa-calendar"></span>
</label>
</div>

Datetimepicker shows on bottom of page, not under input field

I've implemented this datetimepicker for Bootstrap: http://www.malot.fr/bootstrap-datetimepicker/
It works fine on my PC, but when I open it from a phone browser, the picker doesn't show up under the field. I have to scroll all the way to the bottom of the page to see it.
Also, the input field is not disabled. Tapping on it brings up the keyboard, and it's possible to enter text manually (I don't want that to be possible). I guess I can disable it in code, but in the examples it looks like it should be disabled by default?
I'll post more code soon, but if anyone already know what may be the problem let me know. Thanks :)
<div class="form-group">
<label for="startpicker" class="col-sm-1 control-label">Start:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="start" class="form-control datepicker" id="startpicker"/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<div class="form-group">
<label for="sluttpicker" class="col-sm-1 control-label">Slutt:</label>
<div class="col-sm-3">
<div class='input-group date'>
<input type='text' name="slutt" class="form-control datepicker" id="sluttpicker" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.datepicker').datetimepicker(
{
format: "dd.mm kl.hh:ii",
autoclose: "true",
todayBtn: "true",
minuteStep: 15,
pickerPosition: "bottom-left"
}
);
$('.selectpicker').selectpicker({
style: "btn-primary"
});
});
</script>

Perhaps, you should try substituting class col-sm-3 with class col-xs-3 on the div inside <div class="form-group">

I know this is quite late but a good option would be to use data-date-container="#datepicker-container" and then create a empty div with an id to match the name of the data-date-container so in this case its id will be datepicker-container