Enhance your jQuery datepicker by incorporating classes

Question

Enhance your jQuery datepicker by incorporating classes

I have customized the layout of tables on my webpage using CSS.

TABLE:not(.base) {
    border-spacing: 0;
    border-style: none;
    border-collapse: collapse;
}

TABLE:not(.base) > * > TR > * {
    border: 0.2rem solid #88F;
    padding: 0 0.375rem 0 0;
    vertical-align: top;
}

...

Now, I am trying to implement the JQuery datepicker, but it generates tables with default styles which clash with mine, resulting in a messy appearance. I attempted to add ".base" class to these generated tables, but I haven't been successful in finding the right approach.

Here is what I have attempted so far.

$(document).ready(function () {
    var formatCal = function (elt) {
        alert(elt);
        elt.find('TABLE').addClass('base');
    }

    $('#divCal').datepicker({
        beforeShow: formatCal
        , onSelect: function (val) {
            alert(val);
        }
    });

    formatCal($('#divCal'));
});

However, every time I select a date, the datepicker refreshes without applying the .base class.

Any suggestions on how to address this issue?

css jquery-ui

Answer 1

Answer №1

I will implement the use of MutationObserver for this task.

$(document).ready(function () {
    var customizeCalendar = function (element) {
        element.find('TABLE').addClass('styled-calendar');
    }

    $('#calendarDiv').datepicker({
        beforeShow: customizeCalendar
        , onSelect: function (value) {
            alert(value);
        }
    });

    customizeCalendar($('#calendarDiv'));

    var observer = new MutationObserver(function (mutations) {
        var mutationRecord = mutations[0];
        customizeCalendar($(mutationRecord.target));
    });

    // Configuration settings for the observer:
    var config = {
        attributes: false,
        childList: true,
        characterData: false
    };

    // Observe changes in the target node based on the provided configuration
    observer.observe($('#calendarDiv > *').get(0), config);
});

Answer 2

I will implement the use of MutationObserver for this task.

$(document).ready(function () {
    var customizeCalendar = function (element) {
        element.find('TABLE').addClass('styled-calendar');
    }

    $('#calendarDiv').datepicker({
        beforeShow: customizeCalendar
        , onSelect: function (value) {
            alert(value);
        }
    });

    customizeCalendar($('#calendarDiv'));

    var observer = new MutationObserver(function (mutations) {
        var mutationRecord = mutations[0];
        customizeCalendar($(mutationRecord.target));
    });

    // Configuration settings for the observer:
    var config = {
        attributes: false,
        childList: true,
        characterData: false
    };

    // Observe changes in the target node based on the provided configuration
    observer.observe($('#calendarDiv > *').get(0), config);
});

Enhance your jQuery datepicker by incorporating classes

Answer №1

Similar questions

`How to perfectly place multiple text blocks and images using CSS`

Next.js production mode prevents CSS from loading properly

optimal application of css with jquery

I believe I may be experiencing an issue with the use of 'style.display' in JavaScript

The Zoom CSS property seems to be experiencing some issues on the Firefox browser

Crafting a Cubic Masterpiece with Pure CSS Gradient Magic

Table with a set height containing four cells (without scroll bars) and text allocated to each cell

Utilize jQuery to find elements based on a specific attribute containing a certain value

What is the best way to include a dropdown menu in a navigation bar?

Blend the background color seamlessly with the image without affecting the content

What is the best way to display text outside of the current div container?

Align content distributed evenly will not display a division

When I implemented snap.js on my main content wrapper, I noticed that it was causing a disruption in a few of my jQuery functions

How to eliminate vertical spacing between rows in Bootstrap?

Prevent tab key focus in jQuery UI autocomplete

The button on my page refuses to align in the center, and I'm at a loss as

Singularize button/solo in the center

Introducing a novel class designed to leverage the attributes of another class

Exploring Vue 3: Choosing between using import statements in main.js and configuring additionalData in vue.config.js to load a global scss file

What is the correct way to properly insert a display none attribute