Datetimepicker shows on bottom of page, not under input field - javascript

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

Related

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.

bootstrap-datepicker double addon and stopPropagation

I use bootstrap-datepicker and want to have a second addon with a checkbox.
I don't want trigger the show of datepicker when i click in the checkbox addon.
I tested the stopPropagation, return false on the onclick event of the second addon but it doesn't work :(
<div class="container">
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<span class="input-group-addon test"><input type="checkbox"/></span>
</div>
</div>
</div>
with this javascript :
$(document).ready(function() {
$('#ARDT').datepicker();
$('.date .test').click(function(e){
e.stopPropagation();
});
});
you can view live on this jsfiddle : http://jsfiddle.net/5a5xzz10/4/
Can you help me ?
Thanks
Whiletrue
EDIT : Found a solution :
<div class ="form-group">
<label class="control-label" >Received Date OK</label>
<div class="input-group">
<div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<span class="input-group-addon"><input type="checkbox"/></span>
</div>
</div>
embbed the input-group for the datepicker inside another and put the second input-group-addon just after
like here : http://jsfiddle.net/5a5xzz10/6
I have an answer but it doesn't seems very elegant.
I added the checkbox after started the datepicker generation.
$(document).ready(function() {
$('#ARDT').datepicker();
$("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>'));
});

Date Format(YYYY-MM-DD) in DatePicker and Date field

I have a date field in my application. By clicking it, a calendar appears. So after selecting a date, the date field must be shown as 'YYYY-MM-DD' but it shows as 'MM-DD-YYYY'.
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="startdate" name="startdate" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="enddate" name="enddate" type="date">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datepicker({dateFormat: "yyyy-mm-dd"});
});
</script>
Change the yyyy to yy. Here you have the doc http://api.jqueryui.com/datepicker/#utility-formatDate
In my experience format of the date depends on language which set for browser.
In browser js console you can see it with
navigator.languages
Hope it helps.

How do you disabled a bootstrap form field?

What I mean is.
I've implemented a bootstrap datetimepicker here. https://eonasdan.github.io/bootstrap-datetimepicker/
my question is.
if you have an input box how do you disable it and only let the inputs of the datetimepicker be valid? because the user might input an invalid format of the date.
the code below is taken here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
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>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.
<input type='text' id='foo' readonly>
You need to add the disabled attribute to your field, like so:
<input type='text' class="form-control" disabled="true">
And technically, these other options will also work fine:
value of 'disabled'
<input type='text' class="form-control" disabled="disabled">
or
no value at all, just the name of the attribute
<input type='text' class="form-control" disabled>

DateTimePicker not going off after selecting the date from the widget

<br/>
<!-- padding for jsfiddle -->
<div class="row">
<div class="col-md-12">
<h6>datetimepicker1</h6>
<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-calendar glyphicon"></span>
</span>
</div>
</div>
<h6>datetimepicker2</h6>
<input type="text" class="form-control" id="datetimepicker2" />
</div>
</div>
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
The Problem I am facing is that, once I open the widget and select it, it is not closing but if I click on the body it will close.
I work around by subscribe event 'dp.change' to close it:
$('#datetimepicker1').datetimepicker()
.on('dp.change', function(){
$('#datetimepicker1').data("DateTimePicker").hide();
});
$('#datetimepicker2').datetimepicker()
.on('dp.change', function(){
$('#datetimepicker2').data("DateTimePicker").hide();
$('#datetimepicker2').blur(); // blur its focus
});
Refer: https://jsfiddle.net/hungndv/0Ltv25o8/1439/

Categories

Resources