We Keep Coding

DatePicker onchange event not firing in jQuery

I have a button and a textbox. Onclick of the button datepicker pop up appears and user selects a date from the calender pop up and the selected date is populated in the text field.
Now I want to fire an event when the result is populated on the textfield. Onchange event does not work for this as textfield onchange event is fired only if it loses focus. In my case it is changed from an external source.
Hence I thought to fire an onSelect event for the button click. But again event is not triggered.
here is my code
<input type="text" class="textbox_small" name=""
value="" id="txt_node" disabled="disabled"
onchange="fnChangeTime();" />
<input type="button" name="" value=""
class="timePicker_button" id="lnk_hpd"
; style="background-image: url('images/Date_time_picker.gif'); width: 29px; height: 20px;"
onclick="" onselect="" "disabled"/></td>
$('#'+fnParseIDForJ('lnk_hpd')).click(function () {
NewCssCal('txt_node','ddmmyyyy','arrow',false, null, null, null, fnInterimSave, 'txt_node');
});
$('#lnk_hpd').datepicker({
onSelect:function(datesel){
alert("hello");
// alert("Selected date: " + dateText + "; input's current value: " + this.value);
// $(this).change();
}
});
Here no event is triggered. Any help would be appreciated

1.Open datepicker on text box on clicking button , so you have to use id of text box , not button and a method $('#txt_node').datepicker('show'); to show the datepicker.
2.If change event triggered , the datepicker will be kept open, it is not closed so the line $('#txt_node').datepicker('hide');
Check this.
$('#txt_node').datepicker({
onSelect: function(datesel) {
$('#txt_node').trigger('change')
}
});
$('#lnk_hpd').click(function() {
$('#txt_node').datepicker('show');
})
$('#txt_node').change(
function(event) {
$('#SelectedDate').text("Selected date: " + this.value);
$('#txt_node').datepicker('hide'); // if youdon't hide datepicker will be kept open
})
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" class="textbox_small" name="" value="" id="txt_node" disabled="disabled" onchange="fnChangeTime();" />
<input type="button" name="" class="timePicker_button" id="lnk_hpd" ; onclick="" onselect="" "disabled" value='Open' />
<br/>
<br/>
<span id='SelectedDate'></span>

I've done something similar using:
HTML
<input type="text" id="NewDate" style="display:none" />
JavaScript
jQuery(function($){
$('#NewDate').datepicker(
{
showOn: 'button',
buttonImageOnly: true,
buttonText:"",
buttonImage: 'img/calendar.png',
onClose: function(date) {
if(date !="") {
alert(date);
}
}
})
})

Simple uncomment $(this).change(); this and It'll automatically work. This will tell the datepicker function to trigger Change() after selecting or Choosing a Date.

JS Script called by 1 element, not called by 3 others

I have a JS function which I want to call when a date or time input is changed.
With the following element, the function is called. I determine this on the basis of the fact that when I run the page in chrome with the devtools debugger open, I stop at a breakpoint at the beginning of the function. These elements are defined on a asp.net webform page.
<script type="text/javascript">
$(function () {
$('#airPickupdateInput').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});
});
</script>
<input id="airPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
<input type="text" id="airPickuptimeInput" class="timepicker" placeholder="Pickup Time" runat="server" onchange="GetTZ($('airPickupdateInput').val(), this.val())" />
When I choose a date from the datepicker element named airPickupdateInput the function is called as expected. However, when I change the value in the input text box airPickupTimeInput the function is not called.
Furthermore, in a separate area of the same form, I have another pair of date/time inputs, defined as follows:
<tbody>
<tr>
<td>
<script type="text/javascript">
$(function () {
$("#gndPickupdateInput").datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#gndPickupdateInput').val());
});
});
</script>
<input id="gndPickupdateInput" class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
</td>
<td>
<input id="gndPickupTimeInput" class="timepicker" type="text" placeholder="Pickup Time" runat="server" onchange="GetTZ($('gndPickupdateInput').val(), this.val())" />
</td>
</tr>
</tbody>
In this case, neither the date input nor the time input call the function on change. Furthermore, the datepicker widget is not activated. The only difference I can see is that second group of input elements is held in a table. Is there any reason that should make a difference?
Clarification
I attached the datepicker to two different elements, one with id =gndPickupdateInput, and one with id=airPickupdateInput. I expect the timepicker elements to trigger the function because of the "onchange" value.
In short, I have 3 questions:
Why is the function not called by either of the timepicker elements?
Why is the function called in the first datepicker case, but not the second?
Why is the datepicker widget not activated in the second case?

ID of an element must be unique, So if you want to group multiple elements together with a selector use another attribute like the class.
In your case I think all the datepicker inputs has the class datepicker so use that class to select all datepicker input elements.
$(function () {
$('.datepicker').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});
});
then
<input class="timepicker datepicker" placeholder="Pickup Date" type="text" runat="server" />
When you use an id selector, it fetches only the first element with the given id that is why in your case the first element got the datepicker, not the rest.

ID in HTML must be unique.
You can specify a common class then you can use Class Selector (".class").
As you already have added a common class(timepicker) use it. I would recommend you to use:
$('.timepicker').datepicker({
dateFormat: "yy-mm-dd",
onSelect: function (selected, evnt) {
GetTZ(selected, $('#airPickuptimeInput').val());
}
});

Open two jquery datepickers simultaneously

I have two input fields containing a class that triggers a datepicker to open. Both work fine independently, i.e when I click on one or the other but I want for both datepickers to open when either input field is clicked.
Here is the script part of the code
$(document).ready(function() {
$( ".datefields" ).datepicker({ dateFormat: 'dd/mm/yy',numberOfMonths: 1, yearRange: "2012:2014", changeYear: true, changeMonth: true});
and this is the html
<div id="quoteformcollection">
<h1>Collection</h1>
<input type"text" class="startTbl locationfields" id="AutoLocStart" value="Please Type a Collection Location"onclick="clearVal(this);"/>
<input type="hidden" id="DepotStart" value=""/></td>
<input type="text" class="datefields" id="collectiondate" value="21/05/2012"/>
<input type"text" class="timefields" value="12:00" />
</div>
<div id="quoteformreturn">
<h1>Return</h1>
<input type"text" class="locationfields" value="Enter the city or location for return" />
<input type"text" id="returndate" class="datefields" value="21/05/2012" />
<input type"text" class="timefields" value="12:00" />
</div>
I have tried looking for an answer myself but am quite new to jquery and struggling a bit so any help would be much appreciated.
I would also like for whatever value is selected in the first datepicker, for the default date in the second to be incremented by x number of days, which again I am not sure of the best way to go about it.
Any advice would be hugely appreciated!

Try this code for instance to link the two datapickers:
$('#collectiondate').datepicker({
dateFormat: "#",
onSelect: function(dateText, inst) {
var dateText = eval(dateText);
var min = new Date();
min.setTime(dateText);
$('#end').datepicker('option', 'minDate', min);
}
});
$('#returndate').datepicker({
dateFormat: "#",
});

I think you'd have to use the calendar 'inline' and manage how it's popped up yourself through jQuery / Javascript. You need to point the cal to a div tag to use it inline.
http://jqueryui.com/demos/datepicker/#inline

Jquery date picker - want display date in an input field

Hava an jquery calendar:
$(function() {
$("#datepicker").datepicker({
minDate: 'today',
maxDate: "+90D",
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat: "D, dd MM, yy"
});
});
and
<form method="post">
<div id="datepicker">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
I want to display the date inside the input field...Please help me

The problem is that you have duplicated your id value datepicker. It's there twice.
IDs are supposed to be unique (one per page). Even if you were using classes, you'd be calling datepicker() on both the <div> and the <input>, which is surely not what you want.
Just remove the id from the div.
Working demo: http://jsfiddle.net/wesley_murch/PMFwg/

you cannot have two same id in a single page , use class for the same instead of ids
<form method="post">
<div id="datepicker1">
<input type="text" id="datepicker" name="datepicker"/>
</div>
</form>
above will work fine as div id you can change to datepicker1 or custom it

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks

Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>

Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps