Question

我为日期和日期创建了两个datepicker输入。

例如：

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

和datepicker：

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

用户点击#toDate并点击#ui-datepicker-div后，我想调用此功能：

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

我的jQuery代码是：

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

但是这段代码对我不起作用。

Answer 1

正如@KevinB在评论中讨论的那样，如果您希望在选择两个日期时图标消失，您可以使用输入上的更改事件更轻松地完成此操作：

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

无论订单如何，即使用户键入日期而不是选择日期，这都可以正常工作。

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

您也可以使用datepicker onChange事件执行此操作，但不会捕获用户在输入字段中键入的情况：

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

Answer 2

如果您的目标是HTML5支持的浏览器，可以使用Promises完成此操作。或者，您可以为不支持的浏览器添加Promises Polyfill。

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

两次点击后如何调用功能？

2 个答案: