如何仅在待办事项100%完成时打开datepicker？技术咨询

我来帮你搞定这个问题！核心思路就是在Datepicker弹出前先检查对应待办的完成度，只有达到100%才允许打开，下面分两种常见场景给你具体实现方案：

场景1：使用jQuery UI Datepicker（最常用的第三方日期选择器） #

假设你的HTML结构大概是这样的（每一行是一个待办，包含完成度输入框和完成日期选择器）：

<table>
  <tr>
    <td>待办事项1</td>
    <td><input type="number" class="completion-percent" value="50" min="0" max="100">%</td>
    <td><input type="text" class="completion-date"></td> <!-- 这里放datepicker -->
  </tr>
  <tr>
    <td>待办事项2</td>
    <td><input type="number" class="completion-percent" value="100" min="0" max="100">%</td>
    <td><input type="text" class="completion-date"></td>
  </tr>
</table>

解决方案：利用beforeShow钩子拦截弹出 #

初始化Datepicker时，通过beforeShow事件在弹出前做条件判断，不满足就阻止弹出：

// 初始化所有完成日期选择器
$('.completion-date').datepicker({
  beforeShow: function(input, inst) {
    // 找到当前待办所在的行
    const $currentRow = $(input).closest('tr');
    // 获取当前行的完成度数值（根据你的实际结构调整选择器和取值方式）
    const completionRate = parseInt($currentRow.find('.completion-percent').val());
    
    // 判断是否达到100%完成
    if (completionRate !== 100) {
      alert('只有完成度100%的待办才能设置完成日期哦');
      return false; // 返回false直接阻止Datepicker弹出
    }
    // 满足条件则正常弹出
    return true;
  }
});

场景2：使用原生HTML5 input[type="date"] #

如果用的是浏览器自带的日期选择器，我们需要监听focus事件，阻止默认行为来控制：

// 给所有完成日期输入框绑定焦点事件
document.querySelectorAll('.completion-date').forEach(dateInput => {
  dateInput.addEventListener('focus', function(e) {
    // 找到当前行
    const currentRow = this.closest('tr');
    // 获取完成度数值
    const completionRate = parseInt(currentRow.querySelector('.completion-percent').value);
    
    if (completionRate !== 100) {
      e.preventDefault(); // 阻止原生日期选择器弹出
      alert('只有完成度100%的待办才能设置完成日期哦');
    }
  });
});

额外注意：动态生成的待办行 #

如果你的待办列表是动态添加的（比如点击按钮新增行），需要用事件委托来绑定逻辑，避免新行的Datepicker不生效：

// jQuery UI版本的事件委托
$(document).on('focus', '.completion-date', function() {
  // 确保只初始化一次Datepicker
  if (!$(this).data('datepicker')) {
    $(this).datepicker({
      beforeShow: function(input, inst) {
        const $currentRow = $(input).closest('tr');
        const completionRate = parseInt($currentRow.find('.completion-percent').val());
        if (completionRate !== 100) {
          alert('只有完成度100%的待办才能设置完成日期哦');
          return false;
        }
        return true;
      }
    });
  }
  // 触发弹出
  $(this).datepicker('show');
});

关键逻辑说明 #

不管用哪种方式，核心都是在Datepicker触发的前置阶段插入条件判断：

• 先定位到当前待办的完成度元素
• 校验数值是否等于100
• 不满足则阻止Datepicker弹出，同时给用户提示

这样就能完美实现“仅100%完成的待办才能打开完成日期选择器”的需求啦！

内容的提问来源于stack exchange，提问作者Patrick S