WordPress

[健忘録]Ruby on Rails 8.0.2.1 | Flatpickr(カレンダーピッカー)

<Head>

<!-- Flatpickr用 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<body>内　app/views/layouts/application.html.erb

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      flatpickr(".flatpickr", {
        altInput: true,
        altFormat: "Y年m月d日",
        dateFormat: "Y-m-d",
        locale: "ja",

        // カレンダー描画時の処理
        onReady: function(selectedDates, dateStr, instance) {
          // カレンダー全体の背景と文字色
          instance.calendarContainer.style.backgroundColor = "#1f2937"; // 背景
          instance.calendarContainer.style.color = "#f9fafb";           // 文字色

          // Todayボタン追加
          const todayBtn = document.createElement("button");
          todayBtn.textContent = "Today";
          todayBtn.className = "mt-2 px-3 py-1 bg-indigo-600 text-white rounded shadow hover:bg-indigo-500";
          todayBtn.addEventListener("click", function() {
            instance.setDate(new Date());
          });
          instance.calendarContainer.appendChild(todayBtn);
        },

        // 日ごとの描画処理（色分けなど）
        onDayCreate: function(dObj, dStr, fp, dayElem) {
          const day = dayElem.dateObj.getDay();
          
          // 土曜日は青、日曜日は赤
          if (day === 0) {
            dayElem.style.color = "#ef4444"; // 日曜赤
          } else if (day === 6) {
            dayElem.style.color = "#3b82f6"; // 土曜青
          }

          // 今日の日付は丸背景＋文字白
          const today = new Date();
          if (
            dayElem.dateObj.getFullYear() === today.getFullYear() &&
            dayElem.dateObj.getMonth() === today.getMonth() &&
            dayElem.dateObj.getDate() === today.getDate()
          ) {
            dayElem.style.background = "linear-gradient(135deg, #6366f1, #8b5cf6)";
            dayElem.style.color = "#ffffff";
            dayElem.style.borderRadius = "0.5rem";
          }
        }
      });
    });
  </script>

<style>

<style>

/* Flatpickrのカスタムテーマ */
.flatpickr-calendar {
  background: #1e293b; /* ダークブルー寄りの背景 */
  border: none;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  color: #f8fafc; /* 白系文字 */
  font-weight: 500;
}

.flatpickr-day {
  color: #f8fafc;
}

.flatpickr-day:hover,
.flatpickr-day.today {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); /* 視認性高いグラデ */
  color: white;
  border-radius: 0.5rem;
}

.flatpickr-weekday {
  color: #cbd5e1;
}

.flatpickr-month {
  color: #f8fafc;
}

.flatpickr-weekdays {
  border-bottom: 1px solid #334155;
}

.flatpickr-day.selected {
  background: #10b981; /* エメラルドグリーンで選択 */
  color: white;
}
</style>

text_field TailWind_CSS

<div class="relative">
    <label class="block text-sm font-medium text-gray-300 mb-2">ツアー開始日</label>

    <div class="relative group">
      <!-- date input -->
      <div class="relative w-full">
        <%= f.text_field :start_date, class: "flatpickr w-full rounded-md bg-gray-900 border border-gray-700 pl-4 pr-14 py-2 text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:outline-none" %>

        <button type="button"
                onclick="document.querySelector('.flatpickr')._flatpickr.open()"
                class="absolute right-4 top-1/2 -translate-y-1/2 bg-gradient-to-r from-indigo-500 to-purple-600 
                      hover:from-indigo-400 hover:to-purple-500 text-white p-2 rounded-md shadow-lg 
                      transition transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-400">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M8 7V3m8 4V3m-9 8h10m-11 8h12a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

-WordPress