JavaScript에서 날짜 형식 지정

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date format playground</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  label { display: block; font-size: 12px; font-weight: 600; color: #4b5563; }
  input, select { width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px; font: inherit; font-size: 14px;
                  border: 1px solid #cfd4dc; border-radius: 8px; background: #fff; }
  .out { margin-top: 14px; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
  .big { font-size: 20px; font-weight: 600; margin: 4px 0 10px; overflow-wrap: anywhere; }
  .row { font-size: 13px; margin: 6px 0; overflow-wrap: anywhere; }
  .row b { display: inline-block; min-width: 118px; color: #6b7280; font-weight: 600; }
  pre { margin: 10px 0 0; background: #1d2330; color: #e5e7eb; padding: 10px 12px; border-radius: 8px;
        font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<div class="grid">
  <label>Date and time <input type="datetime-local" id="when" value="2026-09-26T14:30"></label>
  <label>Locale
    <select id="locale">
      <option value="">Your browser's default</option>
      <option>en-US</option><option>en-GB</option><option>de-DE</option>
      <option>fr-FR</option><option>ja-JP</option><option>ko-KR</option>
    </select>
  </label>
  <label>Style
    <select id="style">
      <option value="full">dateStyle: full</option>
      <option value="long" selected>dateStyle: long</option>
      <option value="medium">dateStyle: medium</option>
      <option value="short">dateStyle: short</option>
      <option value="both">dateStyle + timeStyle</option>
      <option value="parts">weekday, day, month name</option>
    </select>
  </label>
  <label>Time zone
    <select id="zone">
      <option value="">Your time zone</option>
      <option>UTC</option><option>America/New_York</option>
      <option>Europe/London</option><option>Asia/Tokyo</option>
    </select>
  </label>
</div>

<div class="out">
  <div class="big" id="result"></div>
  <div class="row"><b>toISOString()</b> <span id="iso"></span></div>
  <div class="row"><b>Your time zone</b> <span id="tz"></span></div>
  <pre id="code"></pre>
</div>

<script>
  const $ = (id) => document.getElementById(id);

  // each preset is an options object for Intl.DateTimeFormat
  const presets = {
    full: { dateStyle: 'full' },
    long: { dateStyle: 'long' },
    medium: { dateStyle: 'medium' },
    short: { dateStyle: 'short' },
    both: { dateStyle: 'medium', timeStyle: 'short' },
    parts: { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' },
  };

  function render() {
    const d = new Date($('when').value);  // "YYYY-MM-DDTHH:mm" is read as local time
    if (isNaN(d)) { $('result').textContent = 'Pick a date and time'; return; }

    const locale = $('locale').value || undefined;  // undefined = browser default
    const options = { ...presets[$('style').value] };
    if ($('zone').value) options.timeZone = $('zone').value;

    $('result').textContent = new Intl.DateTimeFormat(locale, options).format(d);
    $('iso').textContent = d.toISOString();
    $('tz').textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;
    $('code').textContent =
      'const d = new Date("' + $('when').value + '");\n' +
      'new Intl.DateTimeFormat(' + (locale ? '"' + locale + '"' : 'undefined') + ', ' +
      JSON.stringify(options).replace(/"(\w+)":/g, '$1: ') + ').format(d);';
  }

  ['when', 'locale', 'style', 'zone'].forEach((id) => $(id).addEventListener('input', render));
  render();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date pitfalls lab</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; font-size: 14px; }
  .tz { margin-bottom: 10px; color: #4b5563; }
  .box { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
  h3 { margin: 0 0 8px; font-size: 14px; }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  td { padding: 5px 4px; border-top: 1px solid #eef0f3; vertical-align: top; overflow-wrap: anywhere; }
  td:first-child { font-family: ui-monospace, Consolas, monospace; font-size: 12px; width: 48%; }
  .bad { color: #b45309; font-weight: 600; }
  .good { color: #047857; font-weight: 600; }
  .try { display: flex; gap: 8px; flex-wrap: wrap; }
  input { flex: 1 1 160px; padding: 7px; font: inherit; border: 1px solid #cfd4dc; border-radius: 8px; }
  button { padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid #cfd4dc; border-radius: 8px; background: #fff; cursor: pointer; }
  #parsed { margin-top: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
</style>
</head>
<body>
<div class="tz">Your time zone: <b id="zone"></b></div>

<div class="box">
  <h3>1. The same text, read two ways</h3>
  <table id="parse"></table>
</div>

<div class="box">
  <h3>2. The date-only string, shown in other time zones</h3>
  <table id="zones"></table>
</div>

<div class="box">
  <h3>3. getMonth() starts at 0</h3>
  <table id="month"></table>
</div>

<div class="box">
  <h3>4. Try your own string</h3>
  <div class="try">
    <input id="text" value="26/09/2026">
    <button data-v="2026-09-26">2026-09-26</button>
    <button data-v="2026-09-26T09:00">…T09:00</button>
    <button data-v="2026-09-26T09:00Z">…T09:00Z</button>
  </div>
  <div id="parsed"></div>
</div>

<script>
  const $ = (id) => document.getElementById(id);
  const row = (code, value, cls) =>
    '<tr><td>' + code + '</td><td class="' + (cls || '') + '">' + value + '</td></tr>';
  const day = (d, tz) => d.toLocaleDateString('en-US',
    { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZone: tz });

  $('zone').textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;

  // 1. date-only = UTC midnight, date + time = local time
  const utc = new Date('2026-09-26');
  const local = new Date('2026-09-26T00:00');
  const off = utc.getDate() !== 26;
  $('parse').innerHTML =
    row('new Date("2026-09-26")', day(utc) + (off ? ' (a day off here)' : ' (fine in your zone, see 2)'), off ? 'bad' : '') +
    row('new Date("2026-09-26T00:00")', day(local), 'good') +
    row('new Date(2026, 8, 26)', day(new Date(2026, 8, 26)), 'good') +
    row('utc.toLocaleDateString("en-US", { timeZone: "UTC" })', utc.toLocaleDateString('en-US', { timeZone: 'UTC' }), 'good');

  // 2. the same moment formatted for people in other zones
  $('zones').innerHTML = ['America/Los_Angeles', 'America/New_York', 'UTC', 'Europe/Berlin', 'Asia/Tokyo']
    .map((tz) => {
      const dom = new Intl.DateTimeFormat('en-US', { day: 'numeric', timeZone: tz }).format(utc);
      return row(tz, day(utc, tz), dom === '26' ? 'good' : 'bad');
    }).join('');

  // 3. months are 0-11, days are 1-31
  const d = new Date(2026, 8, 26);
  const pad = (n) => String(n).padStart(2, '0');
  $('month').innerHTML =
    row('d.getMonth()', d.getMonth() + ' (September)', 'bad') +
    row('d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate()',
        d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate(), 'bad') +
    row('`${y}-${pad(m + 1)}-${pad(day)}`',
        d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()), 'good');

  // 4. anything that is not an ISO string is up to the browser
  function parse() {
    const p = new Date($('text').value);
    $('parsed').innerHTML = isNaN(p)
      ? '<span class="bad">Invalid Date</span>'
      : '<span class="good">' + p.toString() + '</span><br>toISOString(): ' + p.toISOString();
  }
  $('text').addEventListener('input', parse);
  document.querySelectorAll('button[data-v]').forEach((b) =>
    b.addEventListener('click', () => { $('text').value = b.dataset.v; parse(); }));
  parse();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Upcoming events</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  h2 { margin: 0; font-size: 18px; }
  select { padding: 6px; font: inherit; font-size: 13px; border: 1px solid #cfd4dc; border-radius: 8px; background: #fff; }
  ul { list-style: none; margin: 0; padding: 0; }
  li { background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
       box-shadow: 0 2px 10px rgba(0,0,0,.06); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
  .name { font-weight: 600; }
  time { display: block; font-size: 13px; color: #4b5563; margin-top: 3px; }
  .rel { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: #e0f2fe; color: #075985; }
  .rel.past { background: #eef0f3; color: #6b7280; }
  pre { margin: 6px 0 0; background: #1d2330; color: #e5e7eb; padding: 10px 12px; border-radius: 8px;
        font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<header>
  <h2>Upcoming events</h2>
  <select id="locale" aria-label="Locale">
    <option value="">Your browser's language</option>
    <option>en-US</option><option>en-GB</option><option>de-DE</option><option>ja-JP</option>
  </select>
</header>
<ul id="list"></ul>
<div style="font-size:12px;color:#6b7280">Markup of the first item:</div>
<pre id="markup"></pre>

<script>
  // Example data: offsets from today so the labels stay meaningful.
  // Real data would be ISO strings from a server, e.g. "2026-09-28T16:00:00Z".
  function at(daysFromToday, hour, minute) {
    const d = new Date();
    d.setDate(d.getDate() + daysFromToday);
    d.setHours(hour, minute, 0, 0);
    return d.toISOString();
  }
  const events = [
    { name: 'Team retro', start: at(-3, 15, 0) },
    { name: 'Product demo', start: at(0, 17, 30) },
    { name: 'Design review', start: at(1, 10, 0) },
    { name: 'Launch party', start: at(2, 18, 0) },
    { name: 'Quarterly planning', start: at(12, 9, 0) },
  ];

  // Whole calendar days between today and the event, in the reader's time zone
  function daysFromToday(date) {
    const a = new Date(); a.setHours(0, 0, 0, 0);
    const b = new Date(date); b.setHours(0, 0, 0, 0);
    return Math.round((b - a) / 86400000);
  }

  function render() {
    const locale = document.getElementById('locale').value || undefined;
    const when = new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' });
    const rel = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });  // "tomorrow", "in 2 days"

    const list = document.getElementById('list');
    list.innerHTML = '';
    for (const ev of events) {
      const d = new Date(ev.start);
      const days = daysFromToday(d);

      const li = document.createElement('li');
      const left = document.createElement('div');
      left.innerHTML = '<div class="name"></div><time></time>';
      left.querySelector('.name').textContent = ev.name;
      const t = left.querySelector('time');
      t.dateTime = d.toISOString();       // for machines: one exact moment
      t.textContent = when.format(d);     // for people: their locale and time zone

      const badge = document.createElement('span');
      badge.className = 'rel' + (days < 0 ? ' past' : '');
      badge.textContent = rel.format(days, 'day');

      li.append(left, badge);
      list.append(li);
    }
    document.getElementById('markup').textContent = list.querySelector('time').outerHTML;
  }

  document.getElementById('locale').addEventListener('input', render);
  render();
</script>
</body>
</html>