jQuery UI Datepicker - why's it naked?

Question

I'm using jQuery UI Datepicker and hooked it with a text field in the simplest way possible.

$('#date').datepicker();

But when I click the text field, the Datepicker looks like this:

enter image description here

Why's that? Do I need to install skin or something?

Thanks.

You have to add a reference to the jquery ui stylesheet. – Joseph Yaduvanshi Feb 18 '11 at 01:30 — Joseph Yaduvanshi, Feb 18 '11 at 01:30
Oh you've got a cute little datepicker – vol7ron Feb 18 '11 at 02:26 — vol7ron, Feb 18 '11 at 02:26

score 6 · Accepted Answer · answered Feb 18 '11 at 01:30

6

You should add the css file to the page. it should come in the same package js + css

answered Feb 18 '11 at 01:30

JAiro

score 4 · Answer 2 · answered Feb 18 '11 at 01:32

Ensure you add the appropriate .css reference to your page. Perhaps it came in your downloaded bundle, perhaps not.

For a quick and dirty reference during development/testing, use:

<link href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" 
      rel="stylesheet" type="text/css" media="all" />

Take a local copy for production use.

score 4 · Answer 3 · edited May 23 '17 at 12:24

4

Google also hosts the css files for jquery. As referenced here

Just modify the version number to what version of jquery ui you are using

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css

edited May 23 '17 at 12:24

Community

answered Feb 18 '11 at 01:49

FarFigNewton

score 1 · Answer 4 · answered Feb 18 '11 at 01:28

1

More than likely there's a CSS file that was supposed to come with it.

answered Feb 18 '11 at 01:28

Mike Cole

4 Answers4