WPForms Datepicker: 7 Code Snippets Tùy Biến Ngày Tháng (Disable Quá Khứ, Chặn Cuối Tuần, Date Range)

WPForms Date / Time field sử dụng thư viện Flatpickr để hiển thị datepicker. Bạn có thể tùy biến các tùy chọn ngày tháng thông qua hook wpforms_wp_footer_end với JavaScript. Dưới đây là các snippet hữu ích cho các case thường gặp.

Cấu trúc chung

Thay 15523 bằng form ID và 15 bằng field ID của bạn. Các tùy chọn datepicker dựa trên Flatpickr API.

window.wpforms_{FORM_ID}_{FIELD_ID} = window.wpforms_{FORM_ID}_{FIELD_ID} || {};
window.wpforms_{FORM_ID}_{FIELD_ID}.datepicker = {
    disableMobile: true,
    // ... các tùy chọn Flatpickr
};

1. Chỉ cho phép chọn ngày trong tương lai (disable quá khứ + hôm nay)

/**
 * Disable past dates and the current date for a specific WPForms date field.
 */
function child_theme_wpforms_limit_date_picker() {
    ?>
    <script type="text/javascript">
        window.wpforms_15523_15 = window.wpforms_15523_15 || {};
        window.wpforms_15523_15.datepicker = {
            disableMobile: true,
            minDate: new Date().fp_incr(1),
        };
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'child_theme_wpforms_limit_date_picker', 10 );

Sử dụng fp_incr(1) để tăng thêm 1 ngày từ hôm nay. Nếu muốn cho phép chọn cả hôm nay, dùng minDate: new Date().

2. Chỉ cho phép chọn ngày trong quá khứ

Phù hợp cho form thu thập ngày sinh, ngày sự kiện đã qua:

window.wpforms_15523_15 = window.wpforms_15523_15 || {};
window.wpforms_15523_15.datepicker = {
    disableMobile: true,
    maxDate: new Date().fp_incr(-1),
};

3. Giới hạn khoảng ngày cụ thể

Chỉ cho phép chọn trong một khoảng thời gian nhất định:

window.wpforms_15523_15 = window.wpforms_15523_15 || {};
window.wpforms_15523_15.datepicker = {
    disableMobile: true,
    minDate: '2026-08-01',
    maxDate: '2026-08-31',
};

4. Chặn các ngày cụ thể (VD: ngày lễ)

Dùng mảng disable để chặn từng ngày hoặc chuỗi ngày:

window.wpforms_15523_15 = window.wpforms_15523_15 || {};
window.wpforms_15523_15.datepicker = {
    disableMobile: true,
    disable: [
        '2026-09-02',       // Chặn ngày cụ thể
        '2026-09-10',       // Chặn ngày cụ thể
        function(date) {    // Chặn tất cả ngày chủ nhật
            return date.getDay() === 0;
        },
    ],
};

5. Chặn cuối tuần (Thứ 7 + Chủ nhật)

window.wpforms_15523_15 = window.wpforms_15523_15 || {};
window.wpforms_15523_15.datepicker = {
    disableMobile: true,
    disable: [
        function(date) {
            return date.getDay() === 0 || date.getDay() === 6;
        },
    ],
};

6. Đặt ngày mặc định

Tự động chọn sẵn một ngày khi form load:

window.wpforms_15523_15 = window.wpforms_15523_15 || {};
window.wpforms_15523_15.datepicker = {
    disableMobile: true,
    defaultDate: '2026-12-25',
};

7. Chọn khoảng ngày (Date Range) với 2 field

Khi có 2 date field (ngày bắt đầu + ngày kết thúc), tự động cập nhật minDate của field kết thúc khi người dùng chọn ngày bắt đầu:

/**
 * Sync date range: end date minDate = selected start date
 * 15523 = form ID, 15 = start date field, 16 = end date field
 */
function child_theme_wpforms_date_range() {
    ?>
    <script type="text/javascript">
        document.addEventListener('wpformsDatePickerLoaded', function() {
            var startPicker = window.wpforms_15523_15;
            var endPicker = window.wpforms_15523_16;

            if (startPicker && endPicker) {
                startPicker.datepicker.config.onChange = function(selectedDates) {
                    if (selectedDates[0]) {
                        endPicker.datepicker.set('minDate', selectedDates[0].fp_incr(1));
                    }
                };
            }
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'child_theme_wpforms_date_range', 10 );

Tổng kết

Các snippet trên sử dụng Flatpickr API thông qua object window.wpforms_{FORM_ID}_{FIELD_ID}.datepicker. Bạn có thể tham khảo thêm Flatpickr options documentation để tùy biến thêm chức năng như mode range, inline calendar, định dạng ngày tháng…