How to Disable Past Dates in Elementor Date Field (3 Easy Methods)

When building forms in Elementor, you may want to restrict users from selecting past dates—especially for bookings, appointments, or event registrations.

In this guide, I’ll show you three simple methods to block past dates in an Elementor date field.

Method 1: Using Custom JavaScript (Recommended)

This is the most flexible and dynamic approach, as it automatically sets today’s date as the minimum selectable date.

Add the following JavaScript:

jQuery(document).ready(function($) {
    var today = new Date().toISOString().split('T')[0];
    $('input[type="date"]').attr('min', today);
});

Where to add this code:

  • Elementor → Custom Code (Pro) → Add New → Place before </body>
  • Or use plugins like WPCode or Code Snippets

This method ensures the date restriction updates automatically every day.

Method 2: Using Custom Attributes (Static)

If you prefer a no-code UI-based approach, you can set a fixed minimum date.

Steps:

  1. Select your Date field in Elementor
  2. Go to Advanced → Custom Attributes
  3. Add: min|2025-01-01

Note: This method is static and does not update automatically. For dynamic behavior, use Method 1.

Method 3: Using PHP Hook (Advanced)

This method injects JavaScript via your theme’s functions.php file or a custom plugin.

add_action('wp_footer', function() {
    ?>
    &lt;script&gt;
    document.addEventListener('DOMContentLoaded', function() {
        var dateInputs = document.querySelectorAll('.elementor-field-type-date input');
        var today = new Date().toISOString().split('T')[0];
        dateInputs.forEach(function(input) {
            input.setAttribute('min', today);
        });
    });
    &lt;/script&gt;
    <?php
});

When to use this:

  • When you want a developer-level, theme-based solution
  • When managing multiple forms globally

Conclusion

Blocking past dates improves user experience and prevents invalid submissions. Here’s a quick summary:

  • Best option: JavaScript (dynamic and automatic)
  • Quick setup: Custom Attributes (static)
  • Advanced control: PHP Hook

Choose the method that best fits your workflow and project setup.

Tip: Always test your form on both desktop and mobile devices to ensure the date restriction works correctly.

Related Posts