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 · Accepted Answer · 2010-10-14 02:23:17Z

25

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");
});

answered Oct 14, 2010 at 2:23

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doug Barrett Over a year ago

Thank you very much! It work as: .ui-datepicker-trigger {color:red;} No need to put the .dateContainer

Nick Craver Over a year ago

@Doug - I wasn't sure if you wanted it more specific or not, just giving you options :) glad either approach was what you were looking for :)

Orson Over a year ago

It's better more specific sometimes because you may have more that one datepicker on the same page.

Mavelo · Accepted Answer · 2011-08-26 20:47:42Z

1

Make it become a jQuery UI button since you already have the framework loaded ;)

http://www.robertmullaney.com/2011/08/26/make-jquery-datepicker-use-ui-button/

Disclaimer: My Blog

edited Aug 26, 2011 at 20:47

answered Aug 26, 2011 at 20:40

Mavelo

1,27013 silver badges17 bronze badges

Collectives™ on Stack Overflow

class for jquery ui datepicker button

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related