class for jquery ui datepicker button

Question

I have the following code for the jQuery UI datepicker:

$(function() {
        $(".date").datepicker({
            showOn: 'button',
            buttonText: "Choose Date",
            dateFormat: 'yy-mm-dd'
        });
    });

It creates a button on the side of the text box so people can click the box and select a date. Is it possible to apply a class to the button that is created so I can apply a CSS style to it?

Nick Craver Nick Craver · Accepted Answer · 2010-10-14T02:23:17

You can't add an additional class through an option, but it does have a class: ui-datepicker-trigger, so if you just style directly or as a descendant of an identifiable container it'll work, for example:

.ui-datepicker-trigger { color: red; }
//or...
.myContainer .ui-datepicker-trigger { color: red; }

Or, add a different class to the button manually after creating the datepicker (which creates the button):

$(function() {
    $(".date").datepicker({
        showOn: 'button',
        buttonText: "Choose Date",
        dateFormat: 'yy-mm-dd'
    }).next(".ui-datepicker-trigger").addClass("someClass");
});

class for jquery ui datepicker button

2 Answers