jQuery datepicker not working in jQuery Dialog box - javascript

jQuery datepicker works fine on a static page, but I can't get it to work on a jQuery Dialog page. This is a wordpress site.
I know everything necessary is included because it works on a static page. The dialog page is triggered with a button click.
This is the code on the static page (working):
<input type="text" class="datepicker" name="datepicker" value="" />
Here is the input box on the dialog page, which is created dynamically (nothing happens when clicking in the input box):
<input type="text" value="" data_original_for_sale_date="" id="for_sale_date" class="datepicker">
Here is the jQuery code:
jQuery(document).ready(function($) {
$('.datepicker').datepicker({
dateFormat : 'mm/dd/yy'
});
});
Any help would be appreciated. (I'm a newbie...)

Update your jquery code by this
$(document).ready(function($) {
$('body').on('focus',".datepicker", function(){
$(this).datepicker({
dateFormat : 'mm/dd/yy'
});
});
});

Related

Bootstrap datepicker not showing even with function

I have my code on js fiddle https://jsfiddle.net/9n3c8726/. The datepicker needs to show up as soon as I click on the field. As you can see I already encased it in a function. Any help would be appreciated
Javascript
<script>
$(function(){
$('.datepicker').datepicker();
});
</script>
HTML
<input class="datepicker" placeholder="Birthday" type="text" name="date">
<input class="datepicker" placeholder="Birthday" type="date" >
You need to include a datepicker library. Bootstrap does not come prebundled with one. Have a look at something like https://eonasdan.github.io/bootstrap-datetimepicker/

Show date picker on "activated" input field only

I am trying to create two date input fields by using jquery-ui's datepicker() function, bot fields have the id of "datepicker": <input type="text id="datepicker" name="publishUp"> and <input type="text id="datepicker" name="publishDown">
I tried to attach a function to the event focus as following, hoping to show the calendar only on the "activated" field, but it doesn't work. I am wondering where might be wrong?
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$("#datepicker").focus(function() {
$(this).datepicker();
});
</script>
Only showing when the input field is activated is the default behavior of the datepicker. Take the datepicker out of the event handler.
You shouldn't have multiple inputs with the same ID; the $("#datepicker") selector will only find the first one. If you want multiple datepicker inputs, use a class instead. So the HTML should be:
<input type="text" class="datepicker" name="publishUp">
<input type="text" class="datepicker" name="publishDown">
and the jQuery should then be:
$(function() {
$(".datepicker").datepicker({
// options
});
});

Daterange Picker open end when closing start

I am trying to use bootstrap datepicker, got it working, now there are some usability issue left.
Is it possible the open the second datepicker in a daterange when closing the first one? I am not really good in js. would be great if anyone could help here..Link to Demo
Below is my code:
HTML:
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="form-control" name="start" />
<input type="text" class="form-control" name="end" />
</div>
JavaScript:
$('.input-daterange').datepicker({
format: "dd.mm.yyyy",
language: "de",
todayHighlight: true
});
On further investigation, I found myself that I messed it with jQuery datepicker.
Here in Bootstrap datepicker, there is no method like onClose() but using changeDate you can simply accomplish the issue.
$('#start').datepicker({
autoclose: true // This enable you to close the picker
}).on('changeDate', function (ev) {
$("#end").focus();
});
$('#end').datepicker();
FYI: To close your picker, you make use of autoclose property in bootstrap datepicker.
Here is a simple JSFiddle for you.

Datepicker some problems with opening

I use in my web app datepicker jquery but it I have some problem:
I have two tabs in one of them I have two menu, were I use datepicker in each other of menu.
And second tab has one menu and there I also use datepicker.
When I load my web page, and try to set some date with datepicker it is work (datepicker was opened). But after that I go to the second menu in this tab or another tab and try to set some date in my input date, but datepicker not opens. I also use ajax in this page.
Whats wrong? thx!
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text" name="dateTime" id="dateTime" placeholder="yyyy-mm-dd" required />
<script>
$(function() {
$("#dateTime").datepicker({ dateFormat: "yy-mm-dd" , changeMonth: true });
});
</script>
The problem is the selector
$("#dateTime")
ID in a page is supposed to be unique
Use classes instead.
Because you are using a ID selector it tried to find the first instance of the element. Once it finds it, stops searching again. So it will never be applied to the element in the other tab..
Change
<input type="text" name="dateTime" id="dateTime"
to
<input type="text" name="dateTime" class="dateTime"
And then change the selector to
$(".dateTime")

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";

Categories

Resources