jQuery UI Datepicker Themes: jQuery, JavaScript, My Work

jQuery UI Datepicker Themes

Tags: jQuery, JavaScript, My Work | Written on 8/8/08

Note on December 21, 2008: The datepicker is undergoing layout changes. I will update this page when the datepicker style migration is complete.

Comments

#1. royalol on 8/8/08
Wow! These themes round out the UI Datepicker very nicely.
#2. Robert on 11/8/08
Great themes! I wish the guys at UI would take a look at these.
#3. Marc Grabanski on 11/8/08
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.
#4. Varun on 20/8/08
WOW -- Wonderfull -- Awsome .. I think that describes your efforts .. THANKS
#5. Varun on 20/8/08
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?
#6. Hung on 3/9/08
These themes are so beautiful. Thanks!
#7. John Shu on 6/9/08
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">
#8. Darren on 10/9/08
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.
#9. Mo on 18/9/08
Is it me or are these theme arrows not working when you have a mindate and you're in the first month?
#10. nabs on 29/9/08
nice works...
#11. Hub on 8/10/08
Many many thanks for these very useful themes !
#12. Rick Stephenson on 29/10/08
I'm trying to use your themes. When I add maxDate: new Date() the right arrow gif (next to the year) does not display properly. The word "Next" is displayed instead. Do you know why I would have the problem? It works great otherwise.

The code looks like this:

<input id="debug" type="text" value="click to open">
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#debug").datepicker({
maxDate: new Date()
});
});
</script>

Thanks,

Rick Stephenson
#13. Kevin on 5/11/08
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)?
#14. Justin on 18/11/08
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!
#15. neryo 3 weeks, 4 days ago
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
#16. Chen 3 weeks, 4 days ago
Any chance you can have a UI Event, which is an event calendar.
#17. Iz 3 weeks ago
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.
#18. Marc Grabanski 3 weeks ago
@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.
#19. Max 2 weeks, 2 days ago
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
#20. Marc Grabanski 2 weeks, 2 days ago
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.
#21. xgmz 2 weeks ago
Thanx John Shu, your tip about the DOCTYPE allowed correct position on IE7!!!
#22. Julian 3 days, 13 hours ago
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.

Leave a Comment