【JS】JavaScript での 日付 / 日時 の扱い

JavaScript

■ はじめに

ライブラリとかに関しては、以下の関連記事に記載。

TypeScript での 日付 / 日時 の扱い
https://dk521123.hatenablog.com/entry/2021/01/29/231952

 ■ 使用上の注意

１） ゼロ埋めしないと、表示されない 

  * 例えば、「2018-1-1」ではなく、ゼロ埋めして、「2018-01-01」にする必要がある

２）「yyyy/MM/dd」では表示されない 

 * 「yyyy-MM-dd」にするひつようがある

https://qiita.com/terrym/items/6257f6507ca19f00cdf3

 * (new Date()).getYear() ではなく、getFullYear()
 * (new Date()).getMonth() は、ゼロ発進なので、 「+ 1」する

３）IE11では未対応 

 * IE11では、type="date"、type="time"は対応していない

 ■ サンプル

現在日時で日付 / 日時を初期化する

sample.html 

<!DOCTYPE html>
<html lang="ja">
<head>
<title>Demo</title>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
  console.log("Enter");
  
  document.getElementById("date1").value = getCurrentDate();
  document.getElementById("time1").value = getCurrentTime();
  document.getElementById("time2").value = getDefaulTime();
  document.getElementById("dateFormatWithSlash1").textContent = toDateToSetForBrowser("2018/08/08");
  document.getElementById("dateFormatWithSlash2").textContent = toDateToSetForBrowserPart2("2018/8/18");
}

function getCurrentDate() {
  var now = new Date();

  var year = ('0000' + now.getFullYear()).slice(-4);
  var month = ('00' + (now.getMonth() + 1)).slice(-2);
  var day = ('00' + now.getDate()).slice(-2);
  
  return year + "-" + month + "-" + day;
}
function getCurrentTime() {
  var now = new Date();

  var hours = ('00' + now.getHours()).slice(-2);
  var minutes = ('00' + now.getMinutes()).slice(-2);
  
  return hours + ":" + minutes;
}

function getDefaulTime() {
  var now = new Date();

  var hours = ('00' + now.getHours()).slice(-2);
  var minutes = now.getMinutes() >= 30 ? "30" : "00";

  return hours + ":" + minutes;
}

function toDateToSetForBrowser(targetDate) {
  if (!targetDate) {
    return "";
  }

  return targetDate.replace(/\//g, '-');
}

function toDateToSetForBrowserPart2(targetDate) {
  if (!targetDate) {
    return "";
  }
  var dateParts = targetDate.split("/");
  
  var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
  var year = ('0000' + date.getFullYear()).slice(-4);
  var month = ('00' + (date.getMonth() + 1)).slice(-2);
  var day = ('00' + date.getDate()).slice(-2);
  
  return year + "-" + month + "-" + day;
}
</script>
</head>
<body>
<form id="sampleForm" action="">
<div><input type="date" id="date1"> Date</div>
<div><input type="time" id="time1"> Time1</div>
<div><input type="time" id="time2"> Time2</div>
<div><input type="datetime"> datetime(廃止 https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/datetime)</div>
<div><input type="datetime-local"> datetime-local(現時点で対応は不安定 https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/datetime-local)</div>
<div><input type="submit"></div>
</form>
<div id="dateFormatWithSlash1">convert result1</div>
<div id="dateFormatWithSlash2">convert result2</div>
</body>
</html>

 ■ 自分用メモ

 * JavaScript の replace には、 replaceAllがない
  => replace(【正規表現】, 【変換後の文字列】)で対応

関連記事

TypeScript での 日付 / 日時 の扱い
https://dk521123.hatenablog.com/entry/2021/01/29/231952
JavaScriptでゼロ埋め
https://dk521123.hatenablog.com/entry/2022/11/01/000000