DatePicker onchange event not firing in jQuery

Question

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

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
– user3714134, Commented Sep 23, 2015 at 8:12
Try putting your jQuery code inside the document ready event. $( document ).ready(function() { // HERE }); — Mike Bovenlander
– Mike Bovenlander, Commented Sep 23, 2015 at 8:17
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 datepicker thing jsfiddle.net/ou8pryu3/2. — Quentin Roy
– Quentin Roy, Commented Sep 23, 2015 at 8:19
I found your datepicker thing (jqueryui, right?) and your code seems to work jsfiddle.net/ou8pryu3/3. Are you sure you did not forgot to remove the disabled="disabled" attribute of the input? Obviously if it is disabled you won't get anything. — Quentin Roy
– Quentin Roy, Commented Sep 23, 2015 at 8:27

J Santosh · Accepted Answer · 2015-09-23 08:35:36Z

7

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>

answered Sep 23, 2015 at 8:35

J Santosh

3,8223 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Quentin Roy Over a year ago

change event looks a bit useless though and the fact that using it prevents the date picker to automatically close upsets me a bit. I would prefer to do the logic inside the onSelect handler (or to call a function) which looks simpler and more appropriate.

J Santosh Over a year ago

@QuentinRoy. Of course it is. But OP want to use it , so i added it. we can acheive the same with onSelect without change event.

user123 Over a year ago

Thanks for the efforts. It works fine here. But its not triggering on my code. I am using this datetimepicker rainforestnet.com/datetimepicker/datetimepicker-tutorial.htm I am not able to add an external source on fiddle. Hence I have posted the link.

J Santosh Over a year ago

there are many other date time picker plugins like this which are active an now and being updated regularly. The plugin you are using , I didn't find an option something like onselect. so i suggest , change the plugin

J Santosh Over a year ago

if this helped you , then can you accept it answer @user123

ElPedro · Accepted Answer · 2015-09-23 08:24:21Z

1

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

answered Sep 23, 2015 at 8:24

ElPedro

58612 silver badges19 bronze badges

Comments

Silambarasan R · Accepted Answer · 2018-05-11 12:56:13Z

0

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.

answered May 11, 2018 at 12:56

Silambarasan R

1,60420 silver badges24 bronze badges

Comments

Abdelghani AIT TAMGHART · Accepted Answer · 2024-03-27 23:27:04Z

for this I use onSelectedDateChanged={handleChange} handleChange is my function for handle form data changes // handle date case from (Datepicker flowbite component)

const handleChange = (target) => {
    // handle date case from deadline input (Datepicker component) 
    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 .

Collectives™ on Stack Overflow

DatePicker onchange event not firing in jQuery

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related