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
})
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 was previously using Datepicker.js and I've now changed over to use datetimepicker, otherwise known as tempus dominus.
I switched out my input and div and I also changed the CDN script and the JS script function but I'm having some issues.
My site shows the input field and calendar icon in the modal but when I click the icon it doesn't bring up the calendar to select date and time.
Also, I'm using this to populate with an array value before hand that shows expiration dates so In the instance that there are multiple items with expiration dates, I need the datetimepicker to show for each one so I may have one picker or I may have multiple.
Is there a certain way I should change this to not only get my calendar to load, but also have it working for multiple instances?
<head>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/af.js" type="text/javascript"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js" type="text/javascript" >
</script>
</head>
<h6>Set New Expiration: </h6>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
I have this piece of aspx code:
<div class="col-xs-2">
<label for="txtDateActioned" style="cursor: pointer;">Date Actioned</label>
<div id="sandbox-container">
<div class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
From my understanding (and I'm not a web developer, just struggling with maintenance) this is a bootstrap datetime picker.
My humble wish is to set the 'end date' (or 'max date') to 'Today', or any other date. I tried doing this using JS (in the $(document).ready(function()...) section):
$('#txtDateActioned').daterangepicker(
{
maxDate: "01-09-2016"
}
);
However, I can't find a way to make it work. The user can still select a future date, which is exactly what I want to prevent. I also tried different date format such as '2016-09-01', and also tried '$('#txtDateActioned').datetimepicker()'. However, nothing worked for me.
Any help is most appreciated.
Elad
You can try endDate instead of maxDate
like:- endDate:'+0d'
the example could be
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
startDate: '-30y',
endDate:'+0d',
});
here the y in startDate: '-30y' is indicating the start year of the calender and d in endDate:'+0d' is indicating the last date of the calender which is the current date.
you can try this.good luck :)
My solution:
1) I added an id for the div contains the 'input-group date' class.
<div id="dateActionedDP" class="input-group date">
<input type="text" class="form-control" id="txtDateActioned" /><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
2) In js code (the $(document).ready(function ()...) I added the following:
$("#dateActionedDP").datepicker("setEndDate", '+0d');
This worked for me. Thanks everybody for helping.
Elad
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
I'm using http://www.eyecon.ro/bootstrap-datepicker as the date picker in my form in conjunction with Twitter Bootstrap, and I'm having trouble getting it to auto close, and for any month/year combination greater than current month/year to be selectable. I've gone over and over the documentation, but can't see to get it. Any assistance appreciated.
My form is below
<div class="control-group">
<label class="control-label" for="CC_CARDEXPIRY"><strong>Card Expiry Month/Year</strong></label>
<div class="controls">
<div class="input-append date datepicker" id="CC_CARDEXPIRY" data-date="01/2014" data-date-format="mm/yyyy" data-date-viewmode="years" data-date-minviewmode="months">
<input class="span6" name="CC_CARDEXPIRY" size="20" type="text" value="01/2015" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
and my Javascript currently is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"</script>
<script src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#CC_CARDEXPIRY').datepicker();
</script>
By default, autoclose is false. You have to manually set it in the code as an option.
After playing with the datepicker, I found a way to do it without touching the autoclose:
I put this function above my call to the datepicker:
var popup = function(){
var d = $(this);
d.datepicker('update', new Date.today().toString("MM/dd/yyyy"))
.on('changeDate', function(ev){
// do what you want here
d.datepicker('hide');
});
};
Then my call to the datepicker looks like this:
this.$('i.icon-calendar').datepicker().on('show', popup);
I would highly recommend using the code found here instead of the eycon version. It originally came from eycon, but the github repo maintained by eternicode has a greater following, which means if you find and report a bug, there's a greater chance it will get fixed. I'm not saying it's any easier to use, but there's more support.