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.

Input field blur event firing immediately after focus on mobile only

On a site I'm working on, I have a custom search field that the user wants in different places depending on the device. It's a WordPress site and the search is starting off in the header menu. On mobile, it's being moved above the title area/hamburger menu. They also have specifications that the field itself should be hidden until a button is clicked, at which point the field is displayed.
On desktop, before the search form is moved around the DOM, everything is working fine. But on mobile devices, and after the input field itself has been displayed, the blur event is firing about 200ms after the focus event.
After reading this answer: Input field immediately blurs after focus, my guess is that moving the search element around the DOM is causing the issue, but I can't figure out how to fix that without just creating two identical search fields and hiding one depending on screen width. The question/answer I linked doesn't quite fit my scenario the same way, so it didn't really help me get to a solution.
Here's my actual form:
<form role="search" method="get" class="search-form" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="search-form-inner">
<input type="search" value="" name="s" id="s" class="search-form-field" placeholder="Search keolisamericas.com">
<input type="submit" id="searchsubmit" class="search-form-submit search-form-toggle" value="">
<span class="search-form-close search-form-toggle"><span class="dashicons dashicons-no-alt"></span></span>
</div>
</form>
And here's the code that's moving the form:
if (document.documentElement.clientWidth <= 900) {
var $search = $(".genesis-nav-menu .menu-item.search");
$search.detach();
$(".mobile-top-header-nav").prepend($search);
}
Edit: For now, I'm just going with a temporary solution of having two identical forms on the page, and hiding/unhiding them with CSS depending on the screen size. I'd love a more elegant solution than that, and to figure out what's causing my issue to begin with.

getbootstrap 3.0 datetimepicker calendar and time issues

I am new to datetimepicker component. I am using datetimepicker with getbootstrap3 css and js files. I am able to see the datetimepicker on the page, but when I click to select date then select time, I can not click back on date again. please see the screen shot
My code is as shown below :
<div class='input-group date col-sm-7' id='startDate'>
<input type='text' class="form-control" id="start_Date" name="start_Date" />
<label for="end_Date" class="input-group-addon btn">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
The javascript is :
$(document).ready(function () {
$('#startDate').datetimepicker({ format: 'dd/MM/yyyy hh:mm:ss' });
}
Datetimepicker is also not working in smart devices. The issue can be seen on windows and smart devices. I see the above issue on all smart devices as well. On smart devices, once I select the date and time, the datetimepicker never closed, I need to click on some other component on the page to close the datetimepicker.
I would appreciate some one could provide a complete working sample code.
Thanks.

Bootstrap / JQuery, space key not working

I have a form with some inputs text.
All keys works fine in text inputs except the spacebar key.
When I alert the keyCode it alert 32 but nothing append in the field.
I'm using JQuery 1.10.2, JQeryUI 1.9.2 and twitter bootstrap.
As a side note, the whole form is rendered in ajax with xajax library (http://www.xajax-project.org/)
Nothing fancy about the HTML :
<div class="span6">
<div id="dJob_Title" class="control-group">
<label class="control-label">Job title</label>
<div class="controls">
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</div>
</div>
</div>
Thanks in advance for your help.
(sorry for my very bad English).

Problem I think is you havent closed your input tag or check if all html tags are well formatted
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</input>

Ok, i finaly found out the mistake.
It's a js for image slider (fadeSlideShow.js)
As it's instantiate in index.php (and 90% of the site is rendered via ajax in a div in index.php) even if i don't see it, it still capturing the space event (wich is autoplay)
i just commented this in the js :
else if(e.which==32){
if(intval){stopAutoplay();}
else{autoplay();}
return false;
}
and all is fine !
Thank you all for your response/reactivity and the waste of your time for something i have should seen before.

javascript class not working when written to div using getElementById

I have been using a datepicker js class known as tcal. After you link to the class on your server, you can call it with one line of code.
in header
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
html
Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>
It has been working fine.
However, to streamline a page, I am now trying to take it out of the html and display it in a div only when a user clicks on it using getElementById. while I can display the input box ok, when written to the browser this way, the class no longer seems to work.
js
function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}
html
Pick Date<div id="show"></div>
When user clicks, input box appears. However, datepicker calendar does not pop up when you click in tox. Does anyone know why tcal is not working when written to browser this way?
Thanks for any suggestions.

the reason for this happening is that you are adding input box in the dom later your datepicker code is initialized just reinitialize datepicker code
as i see your library may don't have a code to initialize is seperately you can do hide and show instead of adding into the dom later, if the text box will be available in the starting of page ready it will be initialized so use the following code
html -
<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>
js -
document.getElementById('something').style.display="block";