jQuery UI Datepicker Themes: jQuery, JavaScript, My Work

Email Linked In RSS Feed

jQuery UI Datepicker Themes

Category: JavaScript & jQuery Tags: jQuery, JavaScript, My Work | Written on Aug 08, 2008

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 http://royalol.com on Aug 08, 2008
Wow! These themes round out the UI Datepicker very nicely.
#2. Robert http://jqueryplugins.weebly.com on Aug 11, 2008
Great themes! I wish the guys at UI would take a look at these.
#3. Marc Grabanski http://marcgrabanski.com on Aug 11, 2008
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 Aug 20, 2008
WOW -- Wonderfull -- Awsome .. I think that describes your efforts .. THANKS
#5. Varun on Aug 20, 2008
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 Sep 03, 2008
These themes are so beautiful. Thanks!
#7. John Shu on Sep 06, 2008
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 Sep 10, 2008
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 Sep 18, 2008
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 Sep 29, 2008
nice works...
#11. Hub on Oct 08, 2008
Many many thanks for these very useful themes !
#12. Rick Stephenson on Oct 29, 2008
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 Nov 05, 2008
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 Nov 18, 2008
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 http://www.neryo.com on Dec 12, 2008
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 on Dec 12, 2008
Any chance you can have a UI Event, which is an event calendar.
#17. Iz on Dec 16, 2008
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 http://marcgrabanski.com on Dec 16, 2008
@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 on Dec 21, 2008
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 http://marcgrabanski.com on Dec 21, 2008
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 on Dec 23, 2008
Thanx John Shu, your tip about the DOCTYPE allowed correct position on IE7!!!
#22. Julian http://jmagnone.com on Jan 03, 2009
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.
#23. Daya Shankar Kumar http://www.isense.nl on Jan 12, 2009
I Have a requirment to disable and enable datepicker when drop down value will be specific. My code is as below
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"

CodeBehind="Index.aspx.cs" Inherits="justcheckDatePicker.Views.Home.Index" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<script src="../../Content/date.js" type="text/javascript"></script>
<script src="../../Content/jquery-1[1].2.6.min.js" type="text/javascript"></script>
<script src="../../Content/ui.datepicker.js" type="text/javascript"></script>


<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.theme.css" rel="stylesheet" type="text/css" />

<input type="text" size="10" id="basics" />

<script language="javascript" type="text/javascript">

$(document).ready(function() {

$("#basics").datepicker({ showOn: "button", dateFormat: 'dd-mm-yy', buttonImage: "/Content/calendar.gif",
buttonImageOnly: true
});

$("#basics").dpSetDisabled(true);

});

</script>

</asp:Content>


$("#basics").dpSetDisabled(true); is not working for some reason... any help would be appreciated....

#24. Markus on Jan 12, 2009
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.

#25. Gorbachev Victor on Jan 18, 2009
Marc, hello.
When datepicker style migration would be complete? some days, weeks or months? Thanks
#26. Jan Vandorpe on Jan 23, 2009
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?
#27. Bhargav Patel on Mar 03, 2009
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...

Leave a Comment

Other Reading - Categories