防止悬停时清空日期输入字段

Question

我正在进行 A/B 测试，我需要将输入文本转换为日期。我创建了一个仅在悬停时执行此转换的函数，因此在提交表单时不会引起任何问题。但是，问题是当我再次将鼠标悬停在输入上时，它会重置值并将输入字段留空。这可能会让用户感到沮丧，我正在努力寻找解决方案，但我还没有找到。

window.addEventListener("DOMContentLoaded", function() {
  var inputField = document.getElementById("dateinput");
  
  inputField.addEventListener("mouseover", function() {
    inputField.type = "date";
  });
  
  inputField.addEventListener("mouseout", function() {
    inputField.type = "text";
    if (inputField.value) {
      var date = new Date(inputField.value);
      // Adjust the date with the timezone offset
      date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
      var formattedDate = date.toLocaleDateString("en-US", {
        month: "2-digit",
        day: "2-digit",
        year: "numeric",
      });
      inputField.value = formattedDate;
    } else {
      // Set the input field value to "Date Final Product Needed" if no date is selected
      inputField.value = "Date Final Product Needed";
    }
  });
});

<input type="text" id="dateinput" placeholder="Date Final Product Needed">