DatePicker 1 — 日付・期間選択

/* === DatePicker パターン集 ===
   --dp-accent の値を変えるだけで配色を一括変更できます */
:root {
  --dp-accent:  #2B7FE8; /* メインカラー（選択状態・ボタン等） */
  --dp-danger:  #E53E3E; /* エラー・日曜日の色 */
  --dp-sat:     #2B7FE8; /* 土曜日の色 */
  --dp-text:    #1A2332; /* メインテキスト色 */
  --dp-muted:   #9AA5B4; /* サブテキスト色 */
  --dp-border:  #D0D7E0; /* ボーダー色 */
  --dp-bg:      #F4F6F9; /* カード背景色 */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  color: var(--dp-text);
}

/* パターンカード */
.dp-pattern {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--dp-bg);
  border-radius: 8px;
}
.dp-pattern:last-child { margin-bottom: 0; }
.dp-pattern-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--dp-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== Datepicker 共通 ===== */
.dp-wrap { position: relative; display: inline-block; }
.dp-field { display: inline-flex; flex-direction: column; }
.dp-input-row { display: flex; align-items: center; }

.dp-input {
  width: 140px;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--dp-border);
  border-radius: 4px 0 0 4px;
  outline: none;
  font-family: sans-serif;
  color: var(--dp-text);
  transition: border-color 0.15s;
}
.dp-input:focus { border-color: var(--dp-accent); }
.dp-input.is-error { border-color: var(--dp-danger); }

.dp-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--dp-border);
  border-left: none;
  border-radius: 0 4px 4px 0;
  background: #fff;
  color: #5A6A7A;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dp-icon-btn:hover { background: var(--dp-bg); }

.dp-error {
  min-height: 16px; margin: 4px 0 0;
  font-size: 12px; color: var(--dp-danger); line-height: 1.4;
}

/* カレンダーポップアップ */
.dp-calendar {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--dp-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 12px; width: 270px;
}
.dp-calendar.is-open { display: block; }

.dp-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dp-cal-title { font-size: 14px; font-weight: 700; }

.dp-nav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  font-size: 18px; line-height: 1;
  background: none; border: 1px solid var(--dp-border);
  border-radius: 4px; cursor: pointer; color: #5A6A7A;
  transition: background 0.15s; font-family: sans-serif;
}
.dp-nav-btn:hover { background: var(--dp-bg); }

.dp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dp-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--dp-muted); padding: 3px 0; }
.dp-wd--sun { color: var(--dp-danger); }
.dp-wd--sat { color: var(--dp-sat); }

.dp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.dp-cell {
  display: flex; align-items: center; justify-content: center;
  height: 32px; font-size: 13px; border-radius: 4px;
  cursor: pointer; color: var(--dp-text);
  transition: background 0.1s; user-select: none;
}
.dp-cell:hover { background: #EFF4FD; }
.dp-cell--other-month { color: #C5CAD4; cursor: default; }
.dp-cell--other-month:hover { background: transparent; }
.dp-cell--sun { color: var(--dp-danger); }
.dp-cell--sat { color: var(--dp-sat); }
.dp-cell--today:not(.dp-cell--selected) {
  font-weight: 700; color: var(--dp-accent);
}
/* 単一選択の選択セル */
.dp-cell--selected {
  background: var(--dp-accent) !important;
  color: #fff !important; border-radius: 50%; font-weight: 600;
}

/* ===== Pattern 2: 横並び ===== */
.dp-range-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dp-range-item { display: flex; flex-direction: column; }
.dp-label { display: block; font-size: 12px; font-weight: 600; color: #5A6A7A; margin-bottom: 4px; }
.dp-range-sep { align-self: flex-end; padding-bottom: 10px; font-size: 18px; color: var(--dp-muted); }

/* ===== 決定ボタン・結果 ===== */
.dp-confirm-btn {
  display: inline-block; margin-top: 14px; padding: 8px 24px;
  background: var(--dp-accent); color: #fff; border: none;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: sans-serif; transition: opacity 0.15s;
}
.dp-confirm-btn:hover { opacity: 0.85; }
.dp-result { margin: 8px 0 0; font-size: 14px; min-height: 20px; }
.dp-result.has-value {
  padding: 10px 14px; background: #F0F7FF;
  border: 1px solid var(--dp-accent); border-radius: 6px;
  color: #1A5EA8; font-weight: 600;
}
.dp-result.is-error { color: var(--dp-danger); }

@media (max-width: 540px) {
  body { padding: 16px; }
  .dp-range-row { flex-direction: column; gap: 12px; }
  .dp-range-sep { display: none; }
}

// ===== 共通ユーティリティ =====

// "YYYY/MM/DD" 文字列を { year, month, day } に分解する
function parseDate(str) {
  var parts = str.split('/');
  if (parts.length !== 3) return null;
  var y = parseInt(parts[0], 10), m = parseInt(parts[1], 10), d = parseInt(parts[2], 10);
  if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
  return { year: y, month: m, day: d };
}

// 年・月・日が実在する日付かチェックする（2/30 などを弾く）
function isValidDate(y, m, d) {
  if (y < 1900 || y > 2100) return false;
  var dt = new Date(y, m - 1, d);
  return dt.getFullYear() === y && dt.getMonth() === m - 1 && dt.getDate() === d;
}

// Date オブジェクトを "YYYY年M月D日" 形式に変換する
function toJapaneseStr(dt) {
  return dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() + '日';
}

function pad2(n) { return String(n).padStart(2, '0'); }


// ===== Datepicker ファクトリー関数（Pattern 1 / 2 で共用） =====
function createDatepicker(ids) {
  var inputEl  = document.getElementById(ids.input);
  var toggleEl = document.getElementById(ids.toggle);
  var calEl    = document.getElementById(ids.calendar);
  var titleEl  = document.getElementById(ids.title);
  var gridEl   = document.getElementById(ids.grid);
  var errorEl  = document.getElementById(ids.error);
  var prevEl   = document.getElementById(ids.prev);
  var nextEl   = document.getElementById(ids.next);

  var today = new Date();
  var viewYear = today.getFullYear(), viewMonth = today.getMonth() + 1;
  var selectedDate = null, onChangeCb = null;

  function renderGrid() {
    titleEl.textContent = viewYear + '年' + viewMonth + '月';
    var firstDay  = new Date(viewYear, viewMonth - 1, 1).getDay();
    var lastDate  = new Date(viewYear, viewMonth, 0).getDate();
    var prevLast  = new Date(viewYear, viewMonth - 1, 0).getDate();
    var total     = Math.ceil((firstDay + lastDate) / 7) * 7;
    var html = '';

    for (var i = 0; i < total; i++) {
      var day, yr, mo, isOther = false;
      if (i < firstDay) {
        mo = viewMonth === 1 ? 12 : viewMonth - 1;
        yr = viewMonth === 1 ? viewYear - 1 : viewYear;
        day = prevLast - firstDay + i + 1; isOther = true;
      } else if (i >= firstDay + lastDate) {
        mo = viewMonth === 12 ? 1 : viewMonth + 1;
        yr = viewMonth === 12 ? viewYear + 1 : viewYear;
        day = i - firstDay - lastDate + 1; isOther = true;
      } else { day = i - firstDay + 1; yr = viewYear; mo = viewMonth; }

      var dateStr = yr + '/' + pad2(mo) + '/' + pad2(day);
      var dow = i % 7;
      var cls = ['dp-cell'];
      if (isOther) {
        cls.push('dp-cell--other-month');
      } else {
        if (dow === 0) cls.push('dp-cell--sun');
        if (dow === 6) cls.push('dp-cell--sat');
        if (yr === today.getFullYear() && mo === today.getMonth() + 1 && day === today.getDate()) cls.push('dp-cell--today');
        if (selectedDate && yr === selectedDate.getFullYear() &&
            mo === selectedDate.getMonth() + 1 && day === selectedDate.getDate()) cls.push('dp-cell--selected');
      }
      html += '<span class="' + cls.join(' ') + '" data-date="' + dateStr + '"' + (isOther ? ' data-other="true"' : '') + '>' + day + '</span>';
    }
    gridEl.innerHTML = html;
  }

  function open() {
    // 他のカレンダーを閉じてから開く
    document.querySelectorAll('.dp-calendar.is-open').forEach(function (c) { if (c !== calEl) c.classList.remove('is-open'); });
    calEl.classList.add('is-open'); renderGrid();
  }
  function close() { calEl.classList.remove('is-open'); }

  function selectDate(dateStr) {
    var p = dateStr.split('/');
    selectedDate = new Date(parseInt(p[0]), parseInt(p[1]) - 1, parseInt(p[2]));
    inputEl.value = dateStr;
    inputEl.classList.remove('is-error'); errorEl.textContent = '';
    viewYear = selectedDate.getFullYear(); viewMonth = selectedDate.getMonth() + 1;
    if (calEl.classList.contains('is-open')) renderGrid();
    if (onChangeCb) onChangeCb(selectedDate);
  }

  function confirmInput() {
    var str = inputEl.value.trim();
    if (!str) { selectedDate = null; inputEl.classList.remove('is-error'); errorEl.textContent = ''; if (onChangeCb) onChangeCb(null); return; }
    var parsed = parseDate(str);
    if (!parsed || !isValidDate(parsed.year, parsed.month, parsed.day)) {
      inputEl.classList.add('is-error'); errorEl.textContent = '有効な日付を入力してください（例: 2026/5/20）'; return;
    }
    selectDate(parsed.year + '/' + pad2(parsed.month) + '/' + pad2(parsed.day));
  }

  toggleEl.addEventListener('click', function (e) { e.stopPropagation(); calEl.classList.contains('is-open') ? close() : open(); });
  inputEl.addEventListener('click',  function (e) { e.stopPropagation(); open(); });
  inputEl.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); confirmInput(); close(); } });
  gridEl.addEventListener('click', function (e) {
    var cell = e.target.closest('.dp-cell');
    if (!cell || cell.dataset.other) return;
    selectDate(cell.dataset.date); close();
  });
  prevEl.addEventListener('click', function () { viewMonth--; if (viewMonth < 1) { viewMonth = 12; viewYear--; } renderGrid(); });
  nextEl.addEventListener('click', function () { viewMonth++; if (viewMonth > 12) { viewMonth = 1; viewYear++; } renderGrid(); });

  renderGrid();
  return {
    open: open, close: close,
    getValue: function () { return selectedDate; },
    clear: function () {
      selectedDate = null; inputEl.value = ''; inputEl.classList.remove('is-error'); errorEl.textContent = '';
      viewYear = today.getFullYear(); viewMonth = today.getMonth() + 1;
      if (calEl.classList.contains('is-open')) renderGrid();
    },
    setOnChange: function (cb) { onChangeCb = cb; }
  };
}


// ===== Pattern 1: 単一日付選択 =====
var dp1 = createDatepicker({ input: 'dp1-input', toggle: 'dp1-toggle', calendar: 'dp1-cal', title: 'dp1-title', grid: 'dp1-grid', error: 'dp1-error', prev: 'dp1-prev', next: 'dp1-next' });

document.getElementById('dp1-confirm').addEventListener('click', function () {
  var result = document.getElementById('dp1-result');
  var val = dp1.getValue();
  if (!val) { result.textContent = '※ 日付を選択してください'; result.className = 'dp-result is-error'; return; }
  result.textContent = '選択日: ' + toJapaneseStr(val);
  result.className = 'dp-result has-value';
});


// ===== Pattern 2: 期間指定（2つのDatepicker） =====
var dp2Start = createDatepicker({ input: 'dp2-start-input', toggle: 'dp2-start-toggle', calendar: 'dp2-start-cal', title: 'dp2-start-title', grid: 'dp2-start-grid', error: 'dp2-start-error', prev: 'dp2-start-prev', next: 'dp2-start-next' });
var dp2End   = createDatepicker({ input: 'dp2-end-input',   toggle: 'dp2-end-toggle',   calendar: 'dp2-end-cal',   title: 'dp2-end-title',   grid: 'dp2-end-grid',   error: 'dp2-end-error',   prev: 'dp2-end-prev',   next: 'dp2-end-next' });

// 整合制御: 開始 > 終了になる場合、もう一方をクリアする
dp2Start.setOnChange(function (s) { var e = dp2End.getValue();   if (s && e && s.getTime() > e.getTime()) dp2End.clear(); });
dp2End.setOnChange(function (e)   { var s = dp2Start.getValue(); if (s && e && e.getTime() < s.getTime()) dp2Start.clear(); });

document.getElementById('dp2-confirm').addEventListener('click', function () {
  var result = document.getElementById('dp2-result');
  var s = dp2Start.getValue(), e = dp2End.getValue();
  if (!s && !e) { result.textContent = '※ 日付を入力してください'; result.className = 'dp-result is-error'; return; }
  if (s && e) { result.textContent = '期間: ' + toJapaneseStr(s) + ' 〜 ' + toJapaneseStr(e); }
  else if (s)  { result.textContent = toJapaneseStr(s) + ' 以降'; }
  else         { result.textContent = toJapaneseStr(e) + ' 以前'; }
  result.className = 'dp-result has-value';
});


// ===== ドキュメントクリックでポップアップを閉じる =====
document.addEventListener('click', function () {
  document.querySelectorAll('.dp-calendar.is-open').forEach(function (c) { c.classList.remove('is-open'); });
});