重置時如何保留我的日期文本框值

我有一個獲取當前日期和時間的文本框。我曾嘗試呼叫該函式來獲取日期，但它不起作用。

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
  document.getElementById("date").value = datestring;
}
getDate();

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30" onreset="getDate()"><br>
  <input type="reset">
</form>

uj5u.com熱心網友回復：

您必須將getDate功能移動到按鈕不輸入。

解決方案

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
  document.getElementById("date").value = datestring;

  console.log(datestring)
}
getDate();

<form id="myForm">
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30" /><br>
  <input type="button" onClick="getDate()" value="get date">
</form>

uj5u.com熱心網友回復：

重置事件上呼叫的函式在表單被清除之前被呼叫，因此在呼叫函式時設定了日期字串，但隨后表單輸入被清除。你必須做兩件事才能完成這項作業

• 將 onreset 事件移動到表單元素
• 添加設定超時，以便在重置表單后設定輸入元素值

function getDate() {
  var td = new Date();
  var date = td.getDate();
  var month = td.getMonth();
  var mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var m = mon[month];
  var year = td.getFullYear();
  var day = td.getDay();
  var da = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  var d = da[day];
  var hour = td.getHours();
  var min = td.getMinutes();
  var datestring = date   " "   m   " "   year   " "   d   " "   hour   ":"   (min <10?'0':'')   min;
 
  setTimeout(() => document.getElementById("date").value = datestring)
  
}
getDate();

<form id="myForm" onreset="getDate()">
  <label for="date">Current date: </label>
  <input type="text" id="date" readonly size="30" >
  <input type="reset">
</form>

uj5u.com熱心網友回復：

當表單被重置時，元素會采用它們的defaultValue。設定 value屬性不會影響defaultValue，但是設定 value屬性會。

所以要么設定元素的value和defaultValue，要么只設定value屬性，例如

function getDate() {
  let {year, month, day, weekday, hour, minute} = 
    new Intl.DateTimeFormat('en', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long',
      hour: 'numeric',
      minute: '2-digit',
      hour12: false
    }).formatToParts(new Date()).reduce(
      (acc, part) => {
        acc[part.type] = part.value;
        return acc;
      }, Object.create(null)
    );
  let datestring = `${day} ${month} ${year} `  
                   `${weekday} ${hour}:${minute}`;
  // Do this
  document.getElementById("date").setAttribute('value', datestring);

  // Or this
  // document.getElementById("date").value = datestring;
  // document.getElementById("date").defaultValue = datestring;
}

window.onload = getDate;

<form id="myForm">
  <input placeholder="Enter something to show form is reset"><br>
  <label for="date">Current date: </label><br>
  <input type="text" id="date" readonly size="30"><br>
  <input type="reset">
</form>

我也稍微重構了日期格式化功能。:-)

標籤：javascripthtml约会时间文本框重置

上一篇：在postgresql中過濾每個不同年份的兩個日月組合之間的日期？

下一篇：使用PandasDataFrame：我想在時間戳列中添加缺少的年份，其中包括月/日和時間