Flatpickr　＋　スマート日付入力

必要なコード

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

<style>
.input-wrapper { margin-bottom: 45px; display: flex; align-items: center; gap: 10px; }
.date-container { display: flex; align-items: center; }
</style>

<div class="input-wrapper">
    <div class="date-container">
        <input type="text" placeholder="YYYY-MM-DD" maxlength="10" autocomplete="off" data-input>
        <span class="calendar-icon" data-toggle>📅</span>
    </div>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

containers.forEach((container) => {
    const fp = flatpickr(container, {
        wrap: true,
        clickOpens: false, 
        dateFormat: "Y-m-d",
        allowInput: true,
        locale: "ja",
        disableMobile: true // ← これを追加
    });

const inputEl = container.querySelector('input[data-input]');

// --- 共通の補完ロジック ---
    const applySmartDate = (value, isFinal = false) => {
        // ドットで終わるか、またはフォーカスが外れた（isFinal）時の処理
        if (value.endsWith('.') || isFinal) {
            // ドットを除去した数字部分を取得
            const num = value.replace(/\./g, '');
            if (!num || isNaN(num)) return;

const now = new Date();
            const y = now.getFullYear();
            const m = String(now.getMonth() + 1).padStart(2, '0');
            let targetDate = "";

if (num.length === 1 || num.length === 2) {
                // DD -> YYYY-MM-DD
                targetDate = `${y}-${m}-${num.padStart(2, '0')}`;
            } else if (num.length === 4) {
                // MMDD -> YYYY-MM-DD
                targetDate = `${y}-${num.substring(0, 2)}-${num.substring(2, 4)}`;
            } else if (num.length === 8) {
                // YYYYMMDD -> YYYY-MM-DD
                targetDate = `${num.substring(0, 4)}-${num.substring(4, 6)}-${num.substring(6, 8)}`;
            }

if (targetDate) {
                fp.setDate(targetDate, true);
                if (value.endsWith('.')) inputEl.blur(); // ドット入力時は入力を確定させる
            }
        }
    };

// ① 入力中のリアルタイム制御
    inputEl.addEventListener('input', (e) => {
        let value = e.target.value;
        // 半角数字、ドット(.)、ハイフン(-) 以外を削除
        const newValue = value.replace(/[^0-9.-]/g, '');
        
        if (value !== newValue) {
            e.target.value = newValue;
            value = newValue;
        }

// ドットが入力されたら即座に補完
        if (value.endsWith('.')) {
            applySmartDate(value);
        }
    });

// ② カーソル移動（フォーカスが外れた）時の制御
    inputEl.addEventListener('change', (e) => {
        // ハイフンが含まれていない場合（＝まだ日付形式になっていない場合）に補完を試みる
        if (!e.target.value.includes('-')) {
            applySmartDate(e.target.value, true);
        }
    });
});
</script>

Flatpickr ＋ スマート日付入力

Flatpickr ＋スマート日付入力