JavaScript交换两个input日期选择器值时出现值一致问题的原因

从你给出的代码片段来看，问题大概率出在你未写完的var date_end = ...这一行上。如果这里你错误地将date_end赋值为date_start（比如写成var date_end = date_start;），那么两个变量会指向同一个Moment对象实例——因为Moment对象是引用类型，修改其中一个会影响另一个，最终赋值回输入框时，两个框自然会显示同一个值。

另外，即使你正确创建了两个独立的Moment对象，也需要注意必须将Moment对象转换回你需要的字符串格式再赋值给输入框，否则Moment默认的toString格式可能不符合你的日期选择器要求。

正确的交换代码示例 #

function swap() {
  const startInput = document.getElementById("datetimepicker");
  const endInput = document.getElementById("datetimepicker2");
  
  const startValue = startInput.value.trim();
  const endValue = endInput.value.trim();

  if (startValue && endValue) {
    // 用原始值创建独立的Moment对象（确保格式匹配）
    const dateStart = moment(startValue, 'DD-MM-YY HH:mm');
    const dateEnd = moment(endValue, 'DD-MM-YY HH:mm');

    // 将Moment对象转换为指定格式的字符串，再赋值回输入框
    startInput.value = dateEnd.format('DD-MM-YY HH:mm');
    endInput.value = dateStart.format('DD-MM-YY HH:mm');
  }
}

关键注意点 #

• 先保存原始值：确保你在修改输入框之前，已经把两个输入框的初始值都存在变量里，避免后续修改影响取值。
• 创建独立的Moment实例：必须分别用两个输入框的原始值调用moment()，不能直接复制Moment对象（否则会导致引用共享）。
• 格式统一：赋值回输入框时，一定要用.format()方法生成和初始格式一致的字符串，否则日期选择器可能无法正确识别或显示。

如果你的日期选择器是基于jQuery等框架的组件（比如jQuery UI DateTimePicker），建议使用组件提供的API来设置值，而不是直接操作element.value，例如：

// 假设是jQuery UI DateTimePicker的情况
$("#datetimepicker").datetimepicker("setDate", dateEnd.toDate());
$("#datetimepicker2").datetimepicker("setDate", dateStart.toDate());

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