ansaurus

Question

Styling jQuery UI Datepicker differently per page

Answer 1

+1 A:

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 + "' />"

Bryan Downing 2010-02-20 19:00:00

Answer 2

+1 A:

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.

David Thomas 2010-02-20 21:41:47

His question says he's trying to avoid adding an id to the body. Not sure if there's any other way to do it besides adding a class with jquery or wrapping #datepicker with a specific div.

Bryan Downing 2010-02-20 21:49:26

@Bryan, +1...I can't *believe* that I missed that...d'oh! *Loooong* day... =/

David Thomas 2010-02-21 00:11:56

Thanks! I like your way better anyway. Wrapping another DOM element around #datepicker certainly seems unnecessary. Your way of adding the class is cleaner than mine. I don't know why I didn't think of getting the class from #wrapper to add to #datepicker. I guess you weren't the only one having a long day...:P

Bryan Downing 2010-02-22 06:23:10

ansaurus

tags:

views:

answers:

Styling jQuery UI Datepicker differently per page

related questions