Develop Reference

jQuery datepicker issue, it pops twice

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.

How to prevent showing Jquery UI datepicker/timepicker on mobile

I am in trouble getting inputs types date and time to work on mobiles. I am getting double picking tools on mobiles (the native one and the JQuery UI) one and it won't let me complete the form, because datepicker won't hide. How can I prevent the JQuery UI picker to be displayed on mobiles that has native picking tool?
This is the sample code I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css\jquery-ui.min.css">
<script src="js\jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script>
<form class="form-horizontal" method="post" action="seleccionar_detalles.php">
<div>
<input type="date" id="lala" classs="fecha1" name="lala">
<input type="time" placeholder="Salida" id="salida" name="Fecha_de_salida[]" />
</div>
<div class="form-group col-xs-24">
<div class="col-xs-6 pull-right">
<button type="submit" class="btn btn-siguiente">Submit</button>
</div>
</div>
</form>
<script>
$('#salida').timepicker();
$( ".fecha1" ).datepicker();
</script>

You are using a input type="date", The jQuery-UI Datepicker uses a input type="text":
From the jQuery-UI Datepicker Documentation:
<p>Date: <input type="text" id="datepicker"></p>
This way you can avoid the double picking tools.
If you need to suppress the jQuery-UI Datepicker on mobile devices, you may use one of the mobile-device detection techniques described here: What is the best way to detect a mobile device in jQuery? and toggle the input type, like this:
$(document).ready(function() {
var isMobile = ....
// HTML 5 input types: date, datetime, datetime-local, month, time, week
if(!isMobile) {
$('input[type="date"]').each(function() {
$(this).attr("type", "text");
});
$('input[type="time"]').each(function() {
$(this).attr("type", "text");
});
$("#salida").timepicker();
$("#lala").datepicker();
}
});

Token, tags, badges in input field

Please see my last post for the answer.
On my website I have an input field. I want to use it that users on my page can "tag" other users to an image (similar to the "person xy is on this picture feature on facebook).
As soon as the person starts typing, I want to display possible values via jQuery autocomplete and as soon as the person selects one possible value, I'd like to have the selected value displayed in a tag. (I speak of the optical representation, for example that the value is underlined with a grey, rounded rectangle, like here on SO).
This is my input field:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="example1, example2" />

Something like this will change the placeholder as you type:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.placeholderValue').on("keyup", function () {
$('.targetPlaceholder').attr('placeholder', $('.placeholderValue').val());
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="placeholderValue form-control" />
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control targetPlaceholder" placeholder="Username" aria-describedby="basic-addon1" />
</div>
</div>
</div>
</div>
</body>
</html>

I asked the question above a few weeks ago, but now realized, that it wasn't so well asked. And after a few days looking around, I found a solution for it.
I now wanted to let you know about my solution, just as a reference or hint for everyone else who finds this question or has the same problem.
So I am now using this library GitHub Tokenfield.
And use it like this:
<label for="tokenfield">Wer ist auf diesem Bild zu sehen?</label>
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
the basic JavaScript for initializing the input field is:
$(document).ready(function () {
$('#tokenfield').tokenfield();
})
However, if you want to use jQuery Autocomplete you can do so like this:
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white']
},
showAutocompleteOnFocus: true,
limit: 1
});
The input field gets initialized as tokenfield, so when entering data and pressing enter, it results in those token-badge-tag things.
After intitialization, it shows 3 tags, "red", "green" and "blue", which the library takes from the "value"-field of the input field.
I like this solution and library very much, because it also offers mechanisms to bind to jQuery Autocomplete via ajax, which is exactly what I wanted and needed.
I hope I was able to help somebody or save some time.

Bootstrap datepicker pop-up not shown the highlighted current date

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
})

bootstrap-datepicker.js auto close and not greater than this month

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.