CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-datepicker
mySun
mySun

Reputation: 1696

How to call function after two click?

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.

Upvotes: 1

Views: 119

Answers (2)

Jeff B
Jeff B

Reputation: 30099

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

Upvotes: 3

serdar.sanri
serdar.sanri

Reputation: 2228

If you are targeting HTML5 supported browsers, this can be done with Promises. Or you can add Promises Polyfill for browsers not supported.

  var p1 = new Promise(function(resolve, reject){
      $('#toDate').on('click', function () {   
           resolve(true)
      })
  }).then(function(result){
    new Promise(function(resolve, reject){
       if(result) {
          $('#ui-datepicker-div').onSelect(function(){
            resolve(true)
          })
       }else {
         reject();
       }
    })
  }).then(function(result){
     if(result){
        $('.icon-disable-date').hide();
     }
  });

Upvotes: 1

Related Questions