TimePicker 2 — Flatpickr ライブラリ版

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

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

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

/* 入力欄グループ（入力+アイコン+クリア） */
.tp-input-row { display: flex; align-items: center; }

/* 時刻行（Pattern 2：ラベル＋入力欄グループ） */
.tp-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tp-row-label {
  font-size: 13px;
  color: #666;
  width: 56px;
  flex-shrink: 0;
}

.tp-input {
  width: 80px;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--tp-border);
  border-radius: 4px 0 0 4px;
  outline: none;
  color: var(--tp-text);
  background: #fff;
  cursor: pointer;
  font-family: sans-serif;
}

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

.tp-clear-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 34px; padding: 0;
  border: 1px solid var(--tp-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;
}
.tp-clear-btn:hover { color: #5A6A7A; }

/* リアルタイム表示 */
.tp-realtime {
  margin: 10px 0 0;
  font-size: 13px;
  color: #666;
  min-height: 20px;
}
.tp-realtime.has-value { color: var(--tp-accent); font-weight: 600; }

/* 決定ボタン */
.tp-confirm-btn {
  display: inline-block; margin-top: 14px; padding: 8px 24px;
  background: var(--tp-accent); color: #fff; border: none;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: sans-serif; transition: opacity 0.15s;
}
.tp-confirm-btn:hover { opacity: 0.85; }

/* 結果表示 */
.tp-result { margin: 8px 0 0; font-size: 14px; min-height: 20px; }
.tp-result.has-value {
  padding: 10px 14px; background: #F0F7FF;
  border: 1px solid var(--tp-accent); border-radius: 6px;
  color: #1A5EA8; font-weight: 600;
}
.tp-result.is-error { color: var(--tp-danger); }

@media (max-width: 540px) {
  body { padding: 16px; }
  .tp-input { width: 72px; font-size: 13px; }
  .tp-row-label { width: 48px; font-size: 12px; }
}

// ===== Flatpickr 共通設定 =====
var baseConfig = {
  enableTime: true,          // 時刻選択を有効化
  noCalendar: true,          // カレンダーを非表示（時刻のみ）
  time_24hr: true,           // 24時間表記
  locale: 'ja',              // 日本語ロケール（l10n/ja.min.js 読み込み後に有効）
  dateFormat: 'H:i',         // 表示フォーマット: HH:mm
  minuteIncrement: 1         // 分の刻み幅（5分刻みにするには 5 に変更）
};


// ===== Pattern 1: 時刻のみ選択 =====
var fp1 = flatpickr('#tp1-input', Object.assign({}, baseConfig, {
  onChange: function(selectedDates) {
    // 時刻を選択するたびにリアルタイム表示を更新
    var el = document.getElementById('tp1-realtime');
    if (selectedDates.length > 0) {
      el.textContent = '選択中: ' + fp1.input.value;
      el.className = 'tp-realtime has-value';
    }
  }
}));

// アイコンボタンでポップアップを開く
document.getElementById('tp1-toggle').addEventListener('click', function() {
  fp1.open();
});

// ×ボタンで選択をリセット
// clear() は onChange を呼ばないため、リアルタイム表示を手動でリセット
document.getElementById('tp1-clear').addEventListener('click', function() {
  fp1.clear();
  var el = document.getElementById('tp1-realtime');
  el.textContent = '';
  el.className = 'tp-realtime';
  clearResult('tp1-result');
});

// 決定ボタンで結果を表示（selectedDates から値を取得するパターン）
document.getElementById('tp1-confirm').addEventListener('click', function() {
  var result = document.getElementById('tp1-result');
  if (fp1.selectedDates.length === 0) {
    showError(result, '※ 時刻を選択してください');
    return;
  }
  showValue(result, '選択時刻: ' + fp1.input.value);
});


// ===== Pattern 2: 開始〜終了時刻選択 =====
var fpStart = flatpickr('#tp2-start-input', Object.assign({}, baseConfig, {
  onChange: function(selectedDates) {
    if (selectedDates.length > 0) {
      // 終了ピッカーの最小時刻を開始時刻に設定
      fpEnd.set('minTime', fpStart.input.value);
      // 終了が開始以前なら自動クリア（矛盾した状態を防ぐ）
      if (fpEnd.selectedDates.length > 0 && fpEnd.selectedDates[0] <= selectedDates[0]) {
        fpEnd.clear();
      }
    } else {
      fpEnd.set('minTime', null); // 開始が未選択なら制限を解除
    }
    updatePattern2Realtime();
  }
}));

var fpEnd = flatpickr('#tp2-end-input', Object.assign({}, baseConfig, {
  onChange: function() {
    updatePattern2Realtime();
  }
}));

// 開始・終了のリアルタイム表示を更新（— は未選択を示す）
function updatePattern2Realtime() {
  var startVal = fpStart.input.value || '—';
  var endVal   = fpEnd.input.value   || '—';
  document.getElementById('tp2-realtime').textContent = '開始: ' + startVal + ' ／ 終了: ' + endVal;
}

document.getElementById('tp2-start-toggle').addEventListener('click', function() { fpStart.open(); });
document.getElementById('tp2-end-toggle').addEventListener('click', function()   { fpEnd.open(); });

// 開始クリア（clear() は onChange を呼ばないため手動でリセット）
document.getElementById('tp2-start-clear').addEventListener('click', function() {
  fpStart.clear();
  fpEnd.set('minTime', null); // 制限を解除
  updatePattern2Realtime();
  clearResult('tp2-result');
});

// 終了クリア
document.getElementById('tp2-end-clear').addEventListener('click', function() {
  fpEnd.clear();
  updatePattern2Realtime();
  clearResult('tp2-result');
});

// 決定ボタンで結果を表示
document.getElementById('tp2-confirm').addEventListener('click', function() {
  var result = document.getElementById('tp2-result');
  if (fpStart.selectedDates.length === 0 || fpEnd.selectedDates.length === 0) {
    showError(result, '※ 開始時刻と終了時刻の両方を選択してください');
    return;
  }
  showValue(result, '開始: ' + fpStart.input.value + ' ／ 終了: ' + fpEnd.input.value);
});


// ===== ユーティリティ =====
function showValue(el, text) {
  el.textContent = text;
  el.className = 'tp-result has-value';
}
function showError(el, text) {
  el.textContent = text;
  el.className = 'tp-result is-error';
}
function clearResult(id) {
  var el = document.getElementById(id);
  el.textContent = '';
  el.className = 'tp-result';
}

// デモリセットボタン用
function resetDemo() {
  fp1.clear();
  fpStart.clear();
  fpEnd.clear();
  var rt1 = document.getElementById('tp1-realtime');
  rt1.textContent = '';
  rt1.className = 'tp-realtime';
  fpEnd.set('minTime', null);
  updatePattern2Realtime();
  clearResult('tp1-result');
  clearResult('tp2-result');
}