Response title
This is preview!
Move this topic
[jQuery] jQuery UI Datepicker v3.0 Released! (Previously named jQuery Calendar)
in Using jQuery
•
14 years ago
jQuery UI Datepicker v3.0 Released! (Previously named jQuery Calendar)
I am happy to announce that UI Datepicker version 3 has been released
today.
http://marcgrabanski.com/code/ui-datepicker/
Highlight New Features:
Included in the official jQuery User Interface library (http://
ui.jquery.com)
Date range selection
Display multiple months at a time
More customization options
License changed to reflect jQuery
Compatibility option to use existing code
UI Datepicker was presented at jQuery Camp in Boston at Harvard. Here
are the slides from the presentation:
http://marcgrabanski.com/presentations/jQuery-Datepicker-Success.html
Mods based on jQuery Calendar:
West Wind created an ASP.NET control out of jQuery Calendar
http://www.west-wind.com/jqueryweb/jquerycalendar.aspx
PHP Framework Symfony Plugin (ddJQueryCalendar)
http://trac.symfony-project.com/wiki/ddJQueryCalendar
Drupal jQuery Calendar Plugin
http://drupal.org/project/jquery_calendar
Featured on Smashing Magazine Date Pickers
http://www.smashingmagazine.com/2007/10/23/online-calendars-and-date-pickers/
Thank you all for your great feedback which has made this Datepicker
so successful!
Marc Grabanski
Interactive Developer
http://marcgrabanski.com
Minnesota, US
Replies(9)
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Fantastic! Very slick.<DIV><BR class="khtml-block-placeholder"></DIV><DIV>Also, I really enjoyed your presentations at jQueryCamp07. Keep up the great work, Marc!<DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Nov 1, 2007, at 12:34 AM, 1Marc wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">jQuery UI Datepicker v3.0 Released! (Previously named jQuery Calendar)</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I am happy to announce that UI Datepicker version 3 has been released</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">today.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://marcgrabanski.com/code/ui-datepicker/">http://marcgrabanski.com/code/ui-datepicker/</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Highlight New Features:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Included in the official jQuery User Interface library (http://</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">ui.jquery.com)</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Date range selection</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Display multiple months at a time</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">More customization options</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">License changed to reflect jQuery</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Compatibility option to use existing code</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">UI Datepicker was presented at jQuery Camp in Boston at Harvard. Here</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">are the slides from the presentation:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://marcgrabanski.com/presentations/jQuery-Datepicker-Success.html">http://marcgrabanski.com/presentations/jQuery-Datepicker-Success.html</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Mods based on jQuery Calendar:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">West Wind created an ASP.NET control out of jQuery Calendar</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://www.west-wind.com/jqueryweb/jquerycalendar.aspx">http://www.west-wind.com/jqueryweb/jquerycalendar.aspx</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">PHP Framework Symfony Plugin (ddJQueryCalendar)</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://trac.symfony-project.com/wiki/ddJQueryCalendar">http://trac.symfony-project.com/wiki/ddJQueryCalendar</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Drupal jQuery Calendar Plugin</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://drupal.org/project/jquery_calendar">http://drupal.org/project/jquery_calendar</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Featured on Smashing Magazine Date Pickers</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://www.smashingmagazine.com/2007/10/23/online-calendars-and-date-pickers/">http://www.smashingmagazine.com/2007/10/23/online-calendars-and-date-pickers/</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Thank you all for your great feedback which has made this Datepicker</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">so successful!</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Marc Grabanski</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Interactive Developer</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><A href="http://marcgrabanski.com">http://marcgrabanski.com</A></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Minnesota, US</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV> </BLOCKQUOTE></DIV><BR></DIV></DIV></BODY></HTML>
Leave a comment on kswedberg's reply
hi,
beginners question :-)
how do i set monday as first day in week (for germany)
Best regards,
Stefan Kilp
Leave a comment on kilp.jquery's reply
Marc,
One thing I noticed is that in FF 2.0.0.8 there's a little "resize" jump
when the datepicker opens. As the open animation is occurring, it does some
kind of weird little "snap back" at the end of the animation.
-Dan
Leave a comment on dswitzer's reply
@Stefan: datepicker({ firstDay: 1 });
For a complete list of customization options go here and click the
options tab:
http://docs.jquery.com/UI/Datepicker/datepicker#options
@Dan: That happens when you render multiple months datepicker and
only one month in the next datepicker. Typically you would only have
one type of datepicker on the page and you wouldn't ever see the
animation "snap back".
Leave a comment on grabanski's reply
Is there a way to apply a style it so that it looks a bit "better"? Perhaps
like this calendar I've been using on my sites for ~6yrs:
http://www.ssw.com.au/ssw/Standards/DeveloperGeneral/Images/popupCalendar.gi
f
http://www.peterbe.com/plog/blogitem-20031017-1526/popwincal
I like the jquery calendar, but feel it doesn't look as good as it could...
Graeme
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Dan G. Switzer, II
Sent: Thursday, November 01, 2007 9:46 AM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: jQuery UI Datepicker v3.0 Released! (Previously named
jQuery Calendar)
Marc,
One thing I noticed is that in FF 2.0.0.8 there's a little "resize" jump
when the datepicker opens. As the open animation is occurring, it does some
kind of weird little "snap back" at the end of the animation.
-Dan
Leave a comment on graeme.davis's reply
Graeme B. Davis schrieb:
Leave a comment on michael.stuhr's reply
@Stefan: datepicker({ firstDay: 1 });
http://docs.jquery.com/UI/Datepicker/datepicker#options
Click the options tab here to see the 30+ customization option:
@Dan: The animation snap back occurs when you have drastically
different datepickers on the same page. Typically this wouldn't
happen because you would only use one type of datepicker on most
applications.
@Graeme: Click the stylesheet tab on the demo - the datepicker is easy
to style with CSS.
Leave a comment on grabanski's reply
@Micha - If you look closer at popwincal & the differences, I think
it's a bit more complicated than that. I agree with Graeme - the thing
I like best about popwincal is the simpler/slicker header area, mainly
the fact that popwincal fits the important date controls onto one,
clean thin control area. Granted some changes like the colors, images
for next/prev & removing the calendar borders is easy via CSS like you
mentioned, and a few of the the other differences like 3-letter day
abbreviations can be accomplished through Datepicker config options.
However Popwincal does not use select boxes for the month & year
dropdowns which would make styling those items a lot more flexible.
Also the way the Datepicker html is coded, there's a container div
wrapped around the month/year section that also includes the calendar
table, which makes it nearly impossible to cleanly arrange the prev/
next controls in the same horizontal area as the month/year control,
like popwincal has.
Some feature requests & other comments:
- a few config options for the positioning behavior would be great, to
control: 1) where the calendar flys out (i.e. to the side of the
trigger element rather than below) & 2) enable/disable the auto-
reposition based on available screen area.
- a config option to turn off the day-of-the-week links. Neat feature
but it seems to me like a lot of users would click on a day header by
accident & find the reorganized calendar confusing.
Thanks for the plugin, awesome job.
Leave a comment on wick.jquery's reply
I was just looking through the code & noticed my "a config option to
turn off the day-of-the-week links" feature request is already
implemented. Nice! I missed it in the option documentation.
Leave a comment on wick.jquery's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to grabanski's discussion