DatePicker 2 — Flatpickr ライブラリ版

/* === DatePicker（Flatpickr）パターン集 ===
   --dp-accent の値を変えるだけで配色を一括変更できます */
:root {
  --dp-accent:  #2B7FE8; /* メインカラー（選択状態・ボタン等） */
  --dp-danger:  #E53E3E; /* エラー色 */
  --dp-text:    #1A2332; /* メインテキスト色 */
  --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;
}

/* 入力行 */
.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;
  color: var(--dp-text);
  background: #fff;
  cursor: pointer;
  font-family: sans-serif;
}
/* 期間選択用に幅を広げる */
.dp-input--wide { width: 220px; }

.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;
  background: #fff; color: #5A6A7A; cursor: pointer;
  transition: background 0.15s; flex-shrink: 0;
}
.dp-icon-btn:hover { background: var(--dp-bg); }

/* ×クリアボタン */
.dp-clear-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 34px; padding: 0;
  border: 1px solid var(--dp-border); border-left: none;
  border-radius: 0 4px 4px 0;
  background: #fff; color: #9AA5B4; cursor: pointer;
  font-size: 14px; line-height: 1; transition: color 0.15s; flex-shrink: 0;
}
.dp-clear-btn:hover { color: #5A6A7A; }

/* 決定ボタン */
.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-input { width: 110px; }
  .dp-input--wide { width: 180px; }
}

// Flatpickr 共通設定
var baseConfig = {
  locale: 'ja',                      // 日本語ロケール（l10n/ja.min.js 読み込み後に有効）
  dateFormat: 'Y/m/d',               // 表示フォーマット: YYYY/MM/DD
  monthSelectorType: 'dropdown',     // 月をドロップダウン選択に変更
  allowInput: false                  // テキスト直接入力を無効（カレンダーのみ）
};


// ===== Pattern 1: 単一日付選択 =====
var fp1 = flatpickr('#dp1-input', baseConfig);

// アイコンボタンでカレンダーを開く
document.getElementById('dp1-toggle').addEventListener('click', function() {
  fp1.open();
});

// ×ボタンで選択をリセット
document.getElementById('dp1-clear').addEventListener('click', function() {
  fp1.clear();
  clearResult('dp1-result');
});

// 決定ボタンで結果を表示
document.getElementById('dp1-confirm').addEventListener('click', function() {
  var result = document.getElementById('dp1-result');
  if (fp1.selectedDates.length === 0) {
    showError(result, '※ 日付を選択してください');
    return;
  }
  showValue(result, '選択日: ' + toJP(fp1.selectedDates[0]));
});


// ===== Pattern 2: 期間選択 =====
// baseConfig を Object.assign で拡張して期間選択モードに
var fp2 = flatpickr('#dp2-input', Object.assign({}, baseConfig, {
  mode: 'range',          // 期間選択モード
  rangeSeparator: ' 〜 '  // 開始日・終了日の区切り文字（デフォルトは " to "）
}));

// アイコンボタンでカレンダーを開く
document.getElementById('dp2-toggle').addEventListener('click', function() {
  fp2.open();
});

// ×ボタンで選択をリセット
document.getElementById('dp2-clear').addEventListener('click', function() {
  fp2.clear();
  clearResult('dp2-result');
});

// 決定ボタンで結果を表示
document.getElementById('dp2-confirm').addEventListener('click', function() {
  var result = document.getElementById('dp2-result');
  var dates = fp2.selectedDates;
  if (dates.length < 2) {
    showError(result, '※ 開始日と終了日の両方を選択してください');
    return;
  }
  showValue(result, '期間: ' + toJP(dates[0]) + ' 〜 ' + toJP(dates[1]));
});


// ===== ユーティリティ =====

// Date を「YYYY年M月D日」形式に変換
function toJP(d) {
  return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
}

function showValue(el, text) {
  el.textContent = text;
  el.className = 'dp-result has-value';
}

function showError(el, text) {
  el.textContent = text;
  el.className = 'dp-result is-error';
}

function clearResult(id) {
  var el = document.getElementById(id);
  el.textContent = '';
  el.className = 'dp-result';
}

// リセット（デモリセットボタン用）
function resetDemo() {
  fp1.clear();
  fp2.clear();
  clearResult('dp1-result');
  clearResult('dp2-result');
}