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
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
Share Improve this question asked Sep 23, 2015 at 8:10 user123user123 1692 gold badges6 silver badges18 bronze badges 10- You're using an input type="button" whereas the JQuery datepicker works best with regular text input fields. Frankly I'm not sure if the "button" input type even exists, and if it does, it's more akin to a submit button than an actual input field. – user3714134 Commented Sep 23, 2015 at 8:12
- But I need to use a button. – user123 Commented Sep 23, 2015 at 8:13
- Try putting your jQuery code inside the document ready event. $( document ).ready(function() { // HERE }); – Mike Bovenlander Commented Sep 23, 2015 at 8:17
-
1
Can you create a jsfiddle or snippet on which we can rely to see what exactly is not working? Without the library you are using it is hard to see what is the problem. Here is a jsfiddle where I do get the click event but obviously I had to remove the
datepickerthing jsfiddle/ou8pryu3/2. – Quentin Roy Commented Sep 23, 2015 at 8:19 -
I found your
datepickerthing (jqueryui, right?) and your code seems to work jsfiddle/ou8pryu3/3. Are you sure you did not forgot to remove thedisabled="disabled"attribute of the input? Obviously if it is disabled you won't get anything. – Quentin Roy Commented Sep 23, 2015 at 8:27
4 Answers
Reset to default 71.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./ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery./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 unment $(this).change(); this and It'll automatically work. This will tell the datepicker function to trigger Change() after selecting or Choosing a Date.
for this I use onSelectedDateChanged={handleChange} handleChange is my function for handle form data changes // handle date case from (Datepicker flowbite ponent)
const handleChange = (target) => {
// handle date case from deadline input (Datepicker ponent)
if (target instanceof Date) {
setValues({
...values,
deadline: format(target, 'MMMM dd, yyyy')
});
testRegExp({ name: 'deadline', value: target });
return null;
}
// handle text input case
const { name, value } = target;
setValues({
...values,
[name]: value
});
testRegExp(target);
}
__ in others inputs I use :
onChange={e => handleChange(e.target)}
hope this help you .