# Datepicker Styling Conflict Issues

### **Description**

Some plugins (such as **YITH Booking & Appointments**) load **jQuery UI CSS globally on every page**, even when their functionality is not used.\
Since Super Forms also uses the native jQuery UI Datepicker, this can cause **conflicting styles**, resulting in broken or inconsistent datepicker styling on the front end.

Super Forms already namespaces and scopes its datepicker styles correctly.\
The issue occurs when **another plugin overrides these styles by loading global jQuery UI CSS**.

This guide explains how to identify the conflict and how to safely resolve it.

***

## **How to Fix Datepicker CSS Conflicts**

### **1. Identify the Problem**

If your Super Forms datepicker looks incorrect on the front end, inspect the page and look for a CSS file similar to:

```
/wp-content/plugins/yith-woocommerce-booking-premium/assets/css/jquery-ui/jquery-ui.min.css
```

This stylesheet contains generic jQuery UI styles loaded on *every page*, overriding Super Forms' custom styles.

***

## **Recommended Fix: Remove the Conflicting CSS Only on Affected Pages**

### **Option A — PHP: Unregister the CSS on specific pages (best practice)**

Add the snippet below to your theme’s `functions.php`, a custom plugin, or a Code Snippet:

```php
add_action( 'wp_enqueue_scripts', function () {
    if ( is_admin() ) {
        return;
    }

    // Run only on this specific page (change 'example-page' to your page slug)
    if ( ! is_page( 'example-page' ) ) {
        return;
    }

    global $wp_styles;

    if ( ! $wp_styles ) {
        return;
    }

    foreach ( $wp_styles->registered as $handle => $style ) {
        if ( ! empty( $style->src ) 
             && strpos( $style->src, 'yith-woocommerce-booking-premium/assets/css/jquery-ui/jquery-ui.min.css' ) !== false ) {

            wp_dequeue_style( $handle );
            wp_deregister_style( $handle );
        }
    }
}, 200 );
```

***

### **Option B — PHP: Remove based on URL path**

Useful for dynamic or nested URLs:

```php
add_action( 'wp_enqueue_scripts', function () {
    if ( is_admin() ) {
        return;
    }

    $current_path = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );

    if ( $current_path !== '/example/path/' ) {
        return;
    }

    global $wp_styles;

    foreach ( $wp_styles->registered as $handle => $style ) {
        if ( ! empty( $style->src ) 
             && strpos( $style->src, 'yith-woocommerce-booking-premium/assets/css/jquery-ui/jquery-ui.min.css' ) !== false ) {
                 
            wp_dequeue_style( $handle );
            wp_deregister_style( $handle );
        }
    }
}, 200 );
```

***

## **Alternative Fix: Remove the CSS Using jQuery**

This is simpler if you already use Elementor Custom Code or Code Snippets PRO.

### **Option C — Remove the CSS via jQuery**

```html
<script>
jQuery(document).ready(function($) {
    $('link[href*="yith-woocommerce-booking-premium/assets/css/jquery-ui/jquery-ui.min.css"]').remove();
});
</script>
```

***

### **Apply conditionally to a specific page**

```html
<script>
jQuery(document).ready(function($) {
    if (window.location.pathname.indexOf('/example-page/') !== -1) {
        $('link[href*="yith-woocommerce-booking-premium/assets/css/jquery-ui/jquery-ui.min.css"]').remove();
    }
});
</script>
```

Replace `example-page` with your actual slug.

***

## **How to Add the Script**

#### **Using Elementor → Custom Code**

1. Go to **Elementor → Custom Code**
2. Create new snippet
3. Paste the script
4. Set *Display Conditions* to specific pages
5. Publish
6. Clear cache

#### **Using Code Snippets Plugin**

* **PRO version:** supports page-level conditions
* **Free version:** use URL checking via JavaScript

***

## **Why Super Forms Is Not the Cause**

Super Forms:

* Uses custom datepicker classnames to prevent conflicts
* Loads styles only when a form is present
* Does **not** enqueue global jQuery UI styling
* Follows WordPress best practices for conditional loading

Conflicts happen when another plugin loads **unscoped, global CSS** for jQuery UI.

***

## **Summary**

| Issue                       | Cause                                         | Fix                                         |
| --------------------------- | --------------------------------------------- | ------------------------------------------- |
| Datepicker looks incorrect  | Another plugin loads global jQuery UI CSS     | Remove or block conflicting CSS             |
| Backend OK, frontend broken | Admin does not include conflicting stylesheet | Dequeue/remove stylesheet on specific pages |
| CSS override                | Global jQuery UI theme from booking plugin    | Conditional dequeue recommended             |

***

## **Final Tip**

If possible, contact the conflicting plugin developer and request that they load jQuery UI CSS **only on pages where their booking form is present**. This improves compatibility and site performance for all users.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.super-forms.com/common-problems/index/datepicker-styling-conflict-issues.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.