Question

My main page is controlled by a tab-type widget and I have a stylesheet that is specifically designed for this. However, I just recently realized that I need a datepicker in my application as well. I’ve added the jquery-ui-style.cs stylesheet to my project. The problem is that I only want this stylesheet to affect my datepicker and not my tabs.

Is there a way to apply this stylesheet only to my datepicker either when the page initially loads or whenever the textbox is focused on?

It’s probably not needed but here is my jquery for the datepicker:

$(function () {
    $("#txtViewWeeksData").datepicker({
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true
    });
});

Answer 1

Sadly there is no “easy” way.

But i made an example here: http://jsfiddle.net/ggwGs/9/

On the download page (http://jqueryui.com/download) you can under “Theme” select “Advanced”. Where you can create an custom “CSS Scope”, enter and special theme name, example “.customTheme” and press donnload.

If you have created a custom theme, you do exactly the same under “Download Theme“.

Now we need to add the CSS scope class to the Datepicker when active, and remove when not.

So we do it like this:

$("#txtViewWeeksData").datepicker({
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    beforeShow: function(input, inst) {$(inst.dpDiv).addClass('customTheme');},
    onClose: function(dateText, inst) {$(inst.dpDiv).removeClass('customTheme');}
});

Basicly we tell it that right before showing add the scope, and right after it’s closed remove it again.