How to call function after two click?

Question

I created two datepicker inputs for from date and to date.

For example:

<input class="datepicker form-control" id="fromDate">
<input class="datepicker form-control" id="toDate">

And datepicker:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-front">
...
</div>

After the user clicks on #toDate and clicks on #ui-datepicker-div I'd like to call this function:

$('.icon-disable-date').hide();

My jQuery code is:

$('#toDate').on('click', function () {
    $('#ui-datepicker-div').on('click', function () {
        $('.icon-disable-date').hide();
    });
});

But this code does not work for me.

Answer 1

As discussed by @KevinB in the comments, if you want the icon to disappear when both dates are selected, you can do this much easier using a change event on the input:

$('.datepicker').datepicker();
$('.datepicker').change(function() {
    if ($('#fromDate').val() != "" && $('#toDate').val() != "") {
        $('.icon-disable-date').hide();
    }
});

This works regardless of order and even if the user types a date instead of selecting one.

JSFiddle: http://jsfiddle.net/tycugh4t/

You can also do this with a datepicker onChange event, but it will not catch cases where the user types in the input fields:

$('.datepicker').datepicker({
  onSelect: function() {
    if ($('#fromDate').val() != "" && $('#toDate').val() != "") {
      $('.icon-disable-date').hide();
    }
  }
});