【JavaScript】現在の日付をYYYY/MM/DD形式で取得・表示する方法｜DOM表示・自動更新・実践パターンまで解説

const now = new Date();

console.log(now);
// → Mon Apr 06 2026 09:30:00 GMT+0900 (日本標準時)

// 各要素の取り出し
console.log(now.getFullYear());     // 2026（4桁年）
console.log(now.getMonth() + 1);    // 4（月 ※0始まりなので +1 が必要）
console.log(now.getDate());         // 6（日）
console.log(now.getDay());          // 1（曜日：0=日〜6=土）
console.log(now.getHours());        // 9（時）
console.log(now.getMinutes());      // 30（分）
console.log(now.getSeconds());      // 0（秒）

const now = new Date();

const year  = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');  // '04'
const day   = String(now.getDate()).padStart(2, '0');        // '06'

const dateStr = `${year}/${month}/${day}`;  // "2026/04/06"
console.log(dateStr);

// HTML: <p id="today"></p>

const now = new Date();
const year  = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day   = String(now.getDate()).padStart(2, '0');

document.getElementById('today').textContent = `${year}/${month}/${day}`;

<p>今日の日付: <span id="today"></span></p>

<script>
const now   = new Date();
const year  = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day   = String(now.getDate()).padStart(2, '0');

document.getElementById('today').textContent = `${year}/${month}/${day}`;
</script>

const now = new Date();

// YYYY/MM/DD 形式（ゼロ埋めあり）
const ymd = now.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
});
console.log(ymd);  // "2026/04/06"

// 日本語表記（YYYY年MM月DD日）
const jpStr = now.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(jpStr);  // "2026年4月6日"

// 曜日付き
const withDay = now.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  weekday: 'short',
});
console.log(withDay);  // "2026/04/06(月)"

const now = new Date();
const WEEK = ['日', '月', '火', '水', '木', '金', '土'];

const year    = now.getFullYear();
const month   = String(now.getMonth() + 1).padStart(2, '0');
const day     = String(now.getDate()).padStart(2, '0');
const weekday = WEEK[now.getDay()];  // getDay() 0=日〜6=土

console.log(`${year}年${month}月${day}日（${weekday}）`);
// → "2026年04月06日（月）"

const now = new Date();

const year  = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day   = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const mins  = String(now.getMinutes()).padStart(2, '0');
const secs  = String(now.getSeconds()).padStart(2, '0');

console.log(`${year}/${month}/${day} ${hours}:${mins}:${secs}`);
// → "2026/04/06 09:30:00"

<div id="clock">--/--/-- --:--:--</div>

<script>
function updateClock() {
  const now   = new Date();
  const year  = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day   = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const mins  = String(now.getMinutes()).padStart(2, '0');
  const secs  = String(now.getSeconds()).padStart(2, '0');

  document.getElementById('clock').textContent =
    `${year}/${month}/${day} ${hours}:${mins}:${secs}`;
}

// 即座に1回実行してから、1秒ごとに更新
updateClock();
const timerId = setInterval(updateClock, 1000);

// ページを離れるときタイマーを停止（メモリリーク防止）
window.addEventListener('beforeunload', () => clearInterval(timerId));
</script>

#clock {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;  /* 数字幅を均等にして桁ずれを防ぐ */
  letter-spacing: 0.05em;
  color: #1e293b;
}

<!-- 固定年 + 現在年で「2020 - 2026」と表示する -->
<footer>
  <p>&copy; 2020 - <span id="copy-year"></span> My Website</p>
</footer>

<script>
document.getElementById('copy-year').textContent = new Date().getFullYear();
</script>

<!-- input[type="date"] のデフォルト値には YYYY-MM-DD 形式が必要 -->
<input type="date" id="dateInput">

<script>
const now   = new Date();
const year  = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day   = String(now.getDate()).padStart(2, '0');

// input[type="date"] は YYYY-MM-DD 形式（スラッシュではなくハイフン）
document.getElementById('dateInput').value = `${year}-${month}-${day}`;
</script>

<div class="today-banner">
  <span id="today-date"></span>
  <span>現在のキャンペーン実施中</span>
</div>

<script>
const now  = new Date();
const WEEK = ['日', '月', '火', '水', '木', '金', '土'];

const year    = now.getFullYear();
const month   = String(now.getMonth() + 1).padStart(2, '0');
const day     = String(now.getDate()).padStart(2, '0');
const weekday = WEEK[now.getDay()];

document.getElementById('today-date').textContent =
  `${year}年${month}月${day}日（${weekday}）`;
</script>

// head タグ内や body 冒頭に書いてもエラーにならない
document.addEventListener('DOMContentLoaded', () => {
  const now   = new Date();
  const year  = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day   = String(now.getDate()).padStart(2, '0');

  const el = document.getElementById('today');
  if (el) {
    el.textContent = `${year}/${month}/${day}`;
  }
});