jQuery UI Datepicker Themes
Note on December 21, 2008: The datepicker is undergoing layout changes. I will update this page when the datepicker style migration is complete. Use themeroller to see the theme builder.
Like this article? You'll like my NEW training website for front-end web developers!
Video workshops on jQuery, JavaScript, HTML5, web performance and more.
Upgrade your front-end developer skills!
31 comments
Wow! These themes round out the UI Datepicker very nicely.
Great themes! I wish the guys at UI would take a look at these.
Robert: When you say, “guys at UI” – are you talking about the jQuery UI team? I got these themes from the jQuery UI ThemeRoller. The fact is that many people do not know this exists, so they tell me that the datepicker looks, “ugly”. When in fact there are many themes for it.
WOW — Wonderfull — Awsome .. I think that describes your efforts .. THANKS
Sorry didn’t had any idea about from where to get Help on your Skinned Datepicker and where to post this Issue of MINE.
I’ve faced this ISSUE RIGHT here in this Page while viewing in IE 7 also as well as where I implemented in my site. :(
The Date Pickers DO NOT Open as they do in Firefox UNDER Text Input Control. The datepickers Open Up way over the Input Control overlapping whole text Input Control. is this behaviour noticeable by you too? What can I do to have it Open Up fine in IE 7 too?
These themes are so beautiful. Thanks!
Varun you have to put in a doctype on the very beginning of your page, I used the following doctype declaration and it positions correctly in ie7 now.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
John, thank you for that help with the doctype. It was driving me crazy! I didn’t have the http portion and couldn’t figure out why in IE it was positioning weird. Working great now.
Is it me or are these theme arrows not working when you have a mindate and you’re in the first month?
nice works…
Many many thanks for these very useful themes !
Question, is it possible to create a Google or Yahoo like calendar with this? Where the calendar displays actual appointments/items on a day(s)?
Rick, I had the same problem and I changed the “hideIfNoPrevNext” variable on line 92 of the js file from “false” to “true” to eliminate the links altogether when they didn’t apply.
Would be nice if the link just became inactive though and the same image showed up instead.
Great plugin and themes guys!
Hi there!
i have a question.. this calendar date starts on year 1998… can i change the start date in the ui.datepicker? I have tried to put the option startDate:“01-01-1950”, but it seems does’t work.. can you help me? thank you! nice work.. neryo
Any chance you can have a UI Event, which is an event calendar.
Neryo, as far as i know startDate is not available. U can use minDate to change the start date. For the details please check http://docs.jquery.com/UI/Datepicker/datepicker#toptions.
@neryo: just set the date inside the field to what you want the start date to be. You can also do this on the focus event of the input field.
For me this page is not working. With firebug I read this error :
$(“#inline”).datepicker is not a function
[Break on this error] $(“#inline”).datepicker({ changeFirstDay: false });
So I can’t see any themes
Sorry about that, I took the datepicker themes down because the jQuery UI team is undergoing changing the layout and markup of datepicker. I’ll update this page when the migration is complete.
Thanx John Shu, your tip about the DOCTYPE allowed correct position on IE7!!!
Hi, I need to place the datepicker popup just besides the calendar icon, but I did not realize how to fix the calendar position and avoid that behavior to be displayed at the top or below the date calendar/textbox. Is there anyway (or parameter) to fix the popup position just besides the calendar? Thanks a lot.
Hi,
when activating the calendar it always pops up at position (top 397px / left 520px). what do i need to do in order to fix the calendar position so that it pops up directly under the input box / calendar icon?
Thanks a lot.
Marc, hello.
When datepicker style migration would be complete? some days, weeks or months? Thanks
I’m having trouble with the size of the datepicker: if I just plug it in, it pops up far too large, due to interference with my other stylesheets.
After some experimenting I found I have to load the theme stylesheet before any other and control the size by adding a stylerule like
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {font-size:0.8em}
in my main stylesheet.
Anybody else having this trouble?
how can i fix date picker position in IE7 as it not display beside my image icon as it display at one fix place of page…
I’m having the same trouble as Jan Vandorpe, but his fix works… :-)
While using the datepicker in IE there is an equal amount of white background space displayed below the datepicker with a text displayed as “false” .. How can i rectify this error?? .. Also is there a way to position the datepicker in the browser window ..
Thanks
Where are you the Plugins Theme?
same issue as Jan and Ivar, great solution by Jan, worked perfectly!
Nice themes, good job, this will be very helpful for my projects
I have applied theme on datepicker from the themeGallery of jquery, i am facing problem in layout when i selected language Arabic.It shows next and prev buttons not rightly centered aligned So please look at the following and suggest me something work.
http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS%2C+Helvetica%2C+Arial%2C+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=9999cc&bgTextureHeader=02_glass.png&bgImgOpacityHeader=35&borderColorHeader=9999cc&fcHeader=ffffff&iconColorHeader=000000&bgColorContent=9999cc&bgTextureContent=05_inset_soft.png&bgImgOpacityContent=50&borderColorContent=aaaaaa&fcContent=ffffff&iconColorContent=999999&bgColorDefault=eeeeee&bgTextureDefault=02_glass.png&bgImgOpacityDefault=60&borderColorDefault=cccccc&fcDefault=000000&iconColorDefault=70b2e1&bgColorHover=9999cc&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=bbbbbb&fcHover=599fcf&iconColorHover=3383bb&bgColorActive=999999&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=55&borderColorActive=999999&fcActive=ffffff&iconColorActive=454545&bgColorHighlight=eeeeee&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=ffffff&fcHighlight=444444&iconColorHighlight=3383bb&bgColorError=c0402a&bgTextureError=01_flat.png&bgImgOpacityError=55&borderColorError=c0402a&fcError=ffffff&iconColorError=fbc856&bgColorOverlay=eeeeee&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=80&opacityOverlay=80&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=4px&offsetLeftShadow=4px&cornerRadiusShadow=0pxdow%3D0px