如何在input日期选择值未变化时触发事件？

针对你遇到的「预填日期后，用户选择相同日期时change/input事件不触发」的问题，这里提供几个实用的实现思路：

思路1：维护选择状态，结合Blur+Input事件处理 #

核心逻辑是通过状态标记区分用户是否完成选择动作，即使选的是预填日期也能触发处理逻辑：

<input id="my-date" type="date" value="2024-07-20" data-selected="false" data-opened="false" />

<script>
$(function() {
  const $dateInput = $('#my-date');
  const initialValue = $dateInput.val();

  // 标记用户是否打开过日期选择面板
  $dateInput.on('click focus', function() {
    $(this).data('opened', true);
  });

  // 处理用户选择不同日期的情况
  $('#container').on('input', '#my-date', function() {
    const currentVal = $(this).val();
    console.log('selected date: ' + currentVal);
    $(this).data('selected', true);
  });

  // 处理用户选择相同日期的情况：打开过面板但未触发input事件，说明选了预填值
  $('#container').on('blur', '#my-date', function() {
    const hasOpened = $(this).data('opened');
    const hasSelected = $(this).data('selected');
    if (hasOpened && !hasSelected) {
      console.log('selected date: ' + $(this).val());
      $(this).data('selected', true);
    }
    // 重置面板打开状态，支持后续再次交互
    $(this).data('opened', false);
  });
});
</script>

思路2：重置初始值，通过临时变量保存建议日期 #

不直接给输入框设置预填值，而是将建议日期存在自定义属性中，用户第一次打开面板时再设置值，确保任何选择都会触发change事件：

<input id="my-date" type="date" data-suggested-date="2024-07-20" />

<script>
$(function() {
  const $dateInput = $('#my-date');
  const suggestedDate = $dateInput.data('suggested-date');
  let hasInitialized = false;

  // 用户第一次打开面板时，设置建议日期为选中状态
  $dateInput.on('click focus', function() {
    if (!hasInitialized) {
      $(this).val(suggestedDate);
      hasInitialized = true;
    }
  });

  // 此时任何选择（包括建议日期）都会触发change事件，因为初始值为空
  $('#container').on('change', '#my-date', function() {
    console.log('selected date: ' + $(this).val());
  });
});
</script>

思路3：监听原生选择面板的点击事件（兼容性稍弱） #

通过监听鼠标按下事件，结合延迟检查值的方式，处理选择相同日期的场景，缺点是依赖浏览器原生面板的事件触发逻辑：

<input id="my-date" type="date" value="2024-07-20" />

<script>
$(function() {
  const $dateInput = $('#my-date');

  $dateInput.on('mousedown', function(e) {
    // 仅处理选择面板内的日期点击
    if (e.target.tagName !== 'INPUT') {
      setTimeout(() => {
        const currentVal = $(this).val();
        console.log('selected date: ' + currentVal);
      }, 100);
    }
  });

  // 保留change事件处理常规场景
  $('#container').on('change', '#my-date', function() {
    console.log('selected date: ' + $(this).val());
  });
});
</script>

推荐优先使用思路1，它的兼容性最好，逻辑也最严谨，能准确覆盖所有用户选择场景。

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