jQuery Datepicker on change event is not getting fired when using button instead of text input

Question

I am trying to make a button only datepicker with jQuery dtaepicker.

When I am attaching the datepicker to an input, the onchange function works and I got the new selected value.

However when I am attaching the datepicker with just a button or something else, the onchange event is not getting fired:

<input type="text" class="test"> // works

<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event

$(function() {
            $(".test").datepicker({
              format: 'yyyy-mm-dd',
              onSelect: function(v) {
                // also not getting fired
              },
            }).on("change", function() {
              // not getting fired when using button instead of text input
              let val = $(this).val();
            });
        });

This event related to form elements (input, select). – A. Meshu Feb 01 '19 at 19:21 — A. Meshu, Feb 01 '19 at 19:21
to me onSelect is working: http://jsfiddle.net/evhnrLaq/2/ – angelos_lex Feb 02 '19 at 18:35 — angelos_lex, Feb 02 '19 at 18:35

dileepkumar jami · Answer 1 · 2019-02-01T20:05:40.010

I think you need to add this line showOn: 'button'

<input type="text" class="test"> // works

<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event

$(function() {
            $(".test").datepicker({
              showOn: 'button', // use showOn: 'both' if you want to open the datepicker on icon and the input as well
              format: 'yyyy-mm-dd',
              onSelect: function(v) {
                // This would get fired on changing date on the calendar icon
              },
            }).on("change", function() {
              // not getting fired when using button instead of text input
              let val = $(this).val();
            });
        });

Also, you can remove the <i class="fa fa-calendar test"></i> tag and place the following two LOC after the showOn attribute to show the calendar icon

  buttonImageOnly: true,
  buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',

Batsheva Hansav · Answer 2 · 2019-02-02T17:48:31.257

Use the hide event - it gets fire after you finish inserting or picking a date:

$(function() {
            $(".test").datepicker({
              format: 'yyyy-mm-dd',
              onSelect: function(v) {
                // also not getting fired
              },
            }).on("hide", function(e) {
              // not getting fired when using button instead of text input
              let val = $(this).val();
            });
        });

score 0 · Answer 3 · answered Feb 01 '19 at 19:18

0

You can try the answer here.

You should be able to call the datepicker change from the button click event

answered Feb 01 '19 at 19:18

tfarmer4

115
12

score 0 · Accepted Answer · answered Feb 11 '19 at 09:27

0

I have found it:

$(".test").datepicker(params).on('hide', v => console.log(v.date));
// will return a date object with the selected date

answered Feb 11 '19 at 09:27

Raz Buchnik

7,753
14
53
96

jQuery Datepicker on change event is not getting fired when using button instead of text input

4 Answers4