CODEWITHSUNDEEP
javascriptjqueryhtmlcss
papapowp
papapowp

Reputation: 1

Styling jQuery UI Datepicker differently per page

I'm using jQuery UI datepicker on my site and wish to have it styled slightly differently depending on the page it is on. However, I've got a little problem as the div containing the calendar isn't nested to the element which the .datepicker() function is applied to. So I cannot style it differently per page. Eg.

<body>
<div id="wrapper">...</div>
<div id="datepicker">...</div>
</body>

I know one solution is to id the body depending on the page but I don't really want to do that as I'm using a CMS and currently it adds classes to the wrapper div to determine which page. However as the datepicker div appears outside the wrapper I cannot style appropriately.

Is a way of configuring datepicker to create the calendar div inside a specific div, or am I going to have to id the body?

Thanks

Upvotes: 0

Views: 1083

Answers (2)

David Thomas
David Thomas

Reputation: 253308

If I'm reading this right, and it's been a long day, you have a pretty simple option available, but it does require a little extra mark-up. Give the body an id (different id for each page):

body#pageOne #datepicker {/* css for pageOne */}

body#pageTwo #datepicker {/* css for pageTwo */}

If nothing else you get to give a bit additional semantic information; though it might not be quite as easy as you'd like.

Or, as noted in the comments (thanks @Bryan Downing) if you'd rather not add and id to the body, you can use jQuery to achieve something similar, though it depends on how your CMS applies classes to the #wrapper. But something like this:

$(document).ready(
    function() {

        var pageClass = $('#wrapper').attr('class');

        $('#datepicker').addClass(pageClass);
    }
);

Then, hopefully, that should allow you to target the CSS like so:

#datepicker.pageOneClassName {/* css */}

#datepicker.pageTwoClassName {/* css */}

But obviously this relies on a coherent, and predictable/known, naming strategy being applied by the CMS. Though since this is so close to Bryan's answer, I'm upvoting his. Though I'll leave this in situ since it offers a slightly different take on a solution.

Upvotes: 1

Bryan Downing
Bryan Downing

Reputation: 15472

You could add a class to #datepicker using jquery.

$("#wrapper.pageClass").nextAll("#datepicker").addClass("someClass");

Edit:

Or you could wrap #datepicker with a div using jquery. The following may work if #wrapper only has one class defined.

var pageClass = $("#wrapper").attr("class");
$("#datepicker").wrap("<div class='" + pageClass + "' />"

Upvotes: 1

Related Questions