I'm working with the Bootstrap Datepicker Plugin and I noticed the datepicker calendar' arrow for the dropdown overlaps the date field by at least 3 pixels. See image below. I thought of giving the main calendar container ( the dropdown that contains the calendar and the arrow by css pseudoclass ::after) a margin-top:5px; But no cigar. Basically because the javascript overwrites it. I looked for any fallback options in the documentation and nothing of the like. So I am assuming I am going to need a custom jQuery to manipulate the calendar in the DOM and correct the top:##px by -+5px depending on whether is opening top or bottom.
EDIT
I also tried overwriting the top:##px; and giving it an extra 5px and an !important so that it actually overwrite it, but the problem with that is that the top positioning must be handled at the DOM according to the position of the datepicker field control otherwise, all datepickers will show in the same spot.
This image shows the output
The Bootstrap DatePicker Documentation can be found here
And the code I have in looks like this:
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group date" id="datepicker" data-date-format="dd-mm-yyyy">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
Very simple.
Here is an image of the inspector and you can see the postion top value added by the JS.
Any idea on how to bring that sucka down?
Here is a CODEPEN with my problem
You are initializing datepicker over <div class="input-group date" id="datepicker" element not over input element.
$('.date').datepicker({
todayHighlight: true,
autoclose: true
});
<div class="form-group">
<label class="control-label">Date Of Birth</label>
<div class="input-group" id="datepicker" data-date-format="dd-mm-yyyy">
<!-- _______________^^ Remove class `date` from here -->
<input type="text" class="form-control date">
<!-- ____________________^^ Add class `date`here -->
<span class="input-group-addon">
<i class="fa ion-calendar"></i>
</span>
</div>
</div>
Fiddle here
Related
I need to enable a textbox based on the date change in jQuery Datepicker. So I have written a code like this:
HTML Code:
<div class="col-lg-3">
<div class="form-group">
<label for="support_due_date" class="form-label">Due date if any</label>
<div class="input-group date" data-target-input="support_due_date">
<input type="text" id="support_due_date" name="support_due_date" class="form-control datetimepicker-input" data-target="#support_due_date" value="<?php echo set_value('support_due_date');?>" />
<div class="input-group-append" data-target="#support_due_date" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<?php echo form_error('support_due_date'); ?>
</div>
</div>
$("#support_due_date").datepicker({
onClose: function(){
$("#justify_urgency").removeAttr("readonly");
var todays_date = new Date().toISOString().split('T')[0];
}
});
Once I click on datepicker, it gives calendar popped up and if I click on a date then it gives another datepicker without any CSS, just green color dates.
Why this calendar pops up twice?
I am using AdminLTE theme so daterangepicker and calendar are the js provided from AdminLTE theme only.
Image of error
Initial Page looks like this
Once we click on calendar, it gives this weird calendar again
When I select date again, it enables textbox to the right
Cross verify your code with below points. It may be due to below issues.
Input datepicker must be in type "text".
Make sure you are using only any one datepicker plugin css and js(bootstrap-datepicker/jquery-datepicker) files.
Also make sure the js file order is in correct order.
I have a HTML form with two Bootstrap date time pickers, to allow the user to specify a start date / time and an optional end / date time. The pickers work except for the z-index ordering. The problem is that each picker needs to be in the foreground (foremost) when it is selected. But what happens is that the first picker does not appear in front of everything else when selected. It seems like a catch 22 situation, I need both pickers to be in front of the other.
HTML form part:
<label for="name">Start date / time</label>
<div class="input-group date pckr" id="st-pckr">
<input type="text" class="form-control" id="inp-st">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="hidden" id="st_dt_tm" name="st_dt_tm"">
<label for="name">End date / time</label>
<div class="input-group date pckr" id="end-pckr">
<input type="text" class="form-control" id="inp-end">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<input type="hidden" id="end_dt_tm" name="end_dt_tm">
The CSS:
.pckr {
position: relative;
z-index: 2000;
}
Images:
Why you need z-index?
If you remove it first picker will go over second.
Check here https://jsfiddle.net/fu2ft001/
Btw, you have extra " here at the end <input type="hidden" id="st_dt_tm" name="st_dt_tm"">
Update
If problem is that you don't see picker because of some other elements then try adding this in your css:
.input-group-addon {
position: relative;
z-index: 2;
}
Example of it here https://jsfiddle.net/fu2ft001/2/
You could try adjusting z-index when the datepicker is selected:
$('#inp-st').click(function() {
$(this).toggleClass('active-input');
}
CSS:
.active-input {
z-index: 2000;
}
Note: I adjusted the code because <div> elements cannot receive focus by default, and your input elements are hidden. focus is still technically the better solution (so that the form element can be accessed via keyboard navigation, for example), so bear this in mind in your final code - there may be a way to add focus to the div, for example by giving it a tabindex value.
I have been trying out the eternicode/bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker). I tried out the sandbox (http://eternicode.github.io/bootstrap-datepicker/) and just wanted to use the "Component" version with "Today" highlighted.
I have two problems which I think are the same thing: 1) the date doesn't show up when you click on the glyphicon only when you click in the input space and 2) I cannot get the "Today" highight working.
I am 99% sure it is the jQuery call that is wrong. I have tried all sorts to get it to fire as per Sandbox etc but my JS/jQuery is just not up to the job.
(The timepicker (https://github.com/jdewit/bootstrap-timepicker) works fine without a jQuery launch script for now).
Part of the problem is that when I download a zip from GitHub there are two .less files both of which (I think) are Bootstrap2.
Any help gratefully recieved.
<div class="form-group col-sm-3 colFlushL">
<label class="control-label" for="zaq-timeSimple">Time</label>
<div class="input-group bootstrap-timepicker timepicker colFlush ">
<input id="timepicker1" type="text" name="arse"
class="form-control">
<span class="input-group-addon"><i
class="glyphicon glyphicon-time"></i></span>
</div>
</div>
<div class="form-group col-sm-3 colFlush" id="zaq-startDate">
<label class="control-label" for="zaq-startDate">Start Date</label>
<div class="input-group colFlush">
<input type="text" class="form-control date" name="datepicker"
data-provide="datepicker">
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
Here is the latest version of my jQuery attempt which is I am 95% sure horrendous.
<script>
$('.datepicker.date').datepicker.(
{
todayHighlight: true
}
)
</script>
NB According to phpStorm date is NOT a class defined anywhere which I presume includes the .less file
PS I should have said the two date pickers on the page ARE 100% passing the value of the dates through with the form.
OK this was a typo (or more accurately newb lack of jQuery understanding!!)
$('.datepicker.date').datepicker.(
should have been
$('.datepicker.date').datepicker(
IE I stuck in an extra period. (And that cost me at least two hours! D'oh!)
My html code is:
<div class="input-group">
<input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
<span class="input-group-addon"> <i class="icon-calendar"></i> </span>
</div>
JS:
$('.date-picker').datepicker();
When I click on icon datepicker is not showing. It shows when I click on input field.
How to make datepicker visible when I click on icon.
The best way out here would be to add a class, lets say "date" to the containing div, and add the datepicker functionality on that div, like:
<div class="input-group date">
<input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
<span class="input-group-addon"> <i class="icon-calendar"></i> </span>
</div>
JS:
$('.date').datepicker();
Try this working code example below and tell me if this works
<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly">
<span class="add-on"><i class="icon-calendar"></i></span>
Your input field has the class date-picker whereas your icon does not.
Adding that class might give you the desired behavior, though if you have styling specific to that class, it may affect your icon as well.
I am using Bootstrap datepicker by using Bootstrap-datepicker API. When I click the button the calendar/datepicker pop-up shown but it didn't mark the current date as Blue font as shown in API examples.
I am using the below code:
<body>
<div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="form-control" size="56" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#datepicker').datepicker();
</script>
</body>
The calendar/datepicker pop-up shown but the current date is not highlighted as blue as shown in API Examples and also the mouse cursor is not pointer.
Please help me regarding this issue
If you are using this : https://github.com/eternicode/bootstrap-datepicker you have to give options when you initiate calendar, such as
$('#sandbox-container input').datepicker({
todayHighlight: true
});
$('#datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true
});
Here is the JSFiddle
Bootstrap Datepicker depends on its own CSS for styling the calendar widget.
For quickly importing the dependence, you can pick a version from cdnjs (make sure you pick a .css extension) and import into your HTML like this:
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
Just to add to the list of possible solutions as I was experiencing the same problem. The today class was not getting assigned to the current day using:
$('.datepicker').datepicker({
'format': 'mm/dd/yyyy',
'todayHighlight': true
});
The html in the example has a class of date only.
<div class="input-group date">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
In my case, I was missing the datepicker class. Added that to the element and now everything is working properly.
Needs to be:
<div class="input-group date datepicker">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Another option is to add this attribute to your datepicker input element:
today-highlight="true"
If you are using reactive form then you can also set today's date as a value in your formGroup initiation like this
myform = new FormGroup({
name: new FormControl('', [Validators.required]),
event_date: new FormControl(new Date(), [Validators.required]), //This is the change you need to mention into your form Group
})