DateChooser Digg this entry Add this entry to del.icio.us bookmarks Add this entry to Slashdot bookmarks

DateChooser Screenshot

After searching in vain for an unobtrusive, lightweight javascript datepicker, I decided to write my own. It's flexible enough to do what I need, and doesn't take much effort to get it working.

So far I've tested it using IE 5, IE 5.5, IE 6, IE 7 beta 2, Firefox 1.0, Firefox 1.5, Opera 8, Opera 9, and Safari. Let me know if there are any issues with other browsers.

To get started with DateChooser, download it here. The included readme.html file contains a few helpful examples. If you're in a hurry and looking for an idea of what it can do, I've posted the readme file.

There are a few advantages to using DateChooser over other javascript datepickers:

  • The HTML for the calendar is standards-compliant.
  • The calendar appears in the same window as the input field(s). It doesn't annoyingly pop up in a new window.
  • It has no hard-coded styles; apply your own .css file to customize DateChooser's appearance.
  • Return values are flexible, using patterns borrowed from PHP's date() function.
  • It doesn't pollute the global namespace.
  • It uses unobtrusive, warning/error-free javascript.

Finally, and unlike some datepickers I've found, it's free (CC Attribution 2.0 License). Feel free to use it wherever, and for whatever purposes you like.

Changelog

Version 2.11 (released Jun. 28, 2010)

  • Replaced <th> with <td> to work around an IE6/7 bug

Version 2.10 (released Jun. 2, 2008)

  • Fixed bug in inline calls

Version 2.9 (released Feb. 13, 2008)

  • Fixed bug in setSelectedDate method (Thanks to Mark Olsen for the alert)
  • Fixed bug in RefreshDisplay method (Thanks to Fabian Pena for the alert/fix)

Version 2.8 (released Jan. 31, 2008)

  • Fixed bug in switching dates to shorter months (Thanks to Stephen Rocliffe for the alert/fix)

Version 2.7 (released Jan. 15, 2008)

  • Fixed IE7-only bug in drawing the calendar

Version 2.6 (released Oct. 10, 2007)

  • Fixed bug in private RefreshDisplay method introduced in 2.5

Version 2.5 (released Oct. 8, 2007)

  • Fixed bug in private RefreshDisplay method (Thanks to David Lynch for the alert)

Version 2.4 (released May 2, 2007)

  • Fixed bug in setSelectedDate method (Thanks to janine for the heads-up)

Version 2.3 (released Apr. 4, 2007)

  • Fixed dc-dateformat bug using markup interface

Version 2.2 (released Apr. 3, 2007)

  • Minor code optimizations

Version 2.0 (released Mar. 23, 2007)

  • Added setSelectedDate() method
  • Added updateFields() method
  • Provided a way to call DateChooser without needing to use your own javascript code
    • Specify class="datechooser" on any input field, along with optional parameters
    • see examples 5 and 6 on the example page
  • Changed license to CC Attribution 2.0

Version 1.9.3 (released Mar. 9, 2007)

  • Included better algorithm for determining DateChooser positioning (Thanks: Adam Seabridge)
  • Fixed secure/insecure items warning in IE6 (SSL pages only)

Version 1.9.2 (released Dec. 19, 2006)

  • Added td.invalidday class for all dates out of range
  • Updated datechooser.css to show user allowed dates

Version 1.9.1 (released Dec. 6, 2006)

  • Added setWeekStartDay() method (Defaults to 0 - Sunday)

Version 1.9 (released Oct. 24, 2006)

  • Fixed javascript errors in Safari (thanks to Jason Read for testing/debugging help)
  • Changed license to CC NoDerivs

Version 1.8 (released Oct. 2, 2006)

  • Made several fixes for XHTML compatibility
  • Fixed javascript errors in IE5 and IE5.5

Version 1.7 (released Sept. 12, 2006)

  • Fixed onmousedown bug introduced in 1.6
  • Added setEarliestDate(), setLatestDate(), and setAllowedDays() methods
  • Added capability for setUpdateField() method to also accept an object as its only parameter
  • displayPosition() no longer forces pixels as the unit. Unit should now be specified at call time
  • Some minor code cleanup

Version 1.6 (released Sept. 11, 2006)

  • Added iframe hacks to keep select boxes from "shining through" the calendar

Version 1.5 (released May 11, 2006)

  • Initial public release

New: HTML Markup Interface

DateChooser 2.0 and up will allow you to attach a DateChooser to any field without writing any of your own javascript code. There are two ways to accomplish this, but both require you to add the attribute pair class="datechooser" to a tag in your markup. One way is to include the attributes within the class attribute, as follows:

<input type="text" class="datechooser dc-dateformat='mdY'">

The other way is to use custom attributes, like so:

<input type="text" class="datechooser" dc-dateformat="mdY">

Use the first method if you are compulsive like me and you want your markup to validate. However, if publishing a page with invalid markup doesn't bother you, the second method avoids the obvious and shameless abuse of the class attribute.

Here is the list of options available to you using markup to instantiate a DateChooser:

Attribute Name Description Example Value Default Value
dc-dateformat The PHP date-style format for your DateChooser output. n-j-Y n/a
dc-iconlink The file name of the image to use as your clickable DateChooser icon. datechooser.png n/a
dc-textlink The text to display within your DateChooser link. DateChooser n/a
dc-offset-x The number of pixels to the left/right of the clicked icon/text that the DateChooser will show. Use negative numbers to move the DateChooser to the left. 10 0
dc-offset-y The number of pixels above/below the clicked icon/text that the DateChooser will show. Use negative numbers to move the DateChooser higher. -20 0
dc-closetime The number of milliseconds to wait before closing the DateChooser when the mouse leaves it. 300 Will not close until the mouse is clicked
dc-onupdate The name of the function to call after the DateChooser is updated. Do not include parentheses or parameters. fnUpdate n/a
dc-startdate The date (mmddyyyy) to initialize the DateChooser when it is first opened. 04191978 Today's date
dc-earliestdate The earliest possible date (mmddyyyy) that can be selected by the user. 05241979 n/a
dc-latestdate The latest possible date (mmddyyyy) that can be selected by the user. 11231979 n/a
dc-alloweddays A comma-separated list of days of the week (0-6) to allow the user to select. 0 is Sunday by default. 1,3,5 (only allows Mondays, Wednesdays and Fridays to be chosen) All days are allowed by default
dc-weekstartday The first day of each week. 0 is Sunday, 1 is Monday, etc. 2 0
dc-linkposition Determines where to place the DateChooser icon/text link. If your DateChooser updates multiple fields, use this in only one of the fields to place the icon to the left or right of it. left right

Please view the HTML markup in examples 5 and 6 in the example page for guidance.

Properties and Methods

Date getSelectedDate()
Returns the currently selected date as a javascript Date object. If no date has been selected, returns null.
setSelectedDate(Date objDate)
Sets the DateChooser's selected date. This method automatically calls updateFields() after the date is changed.
updateFields()
Updates any attached form inputs with the selected date information.
setLink(String sLinkText, String sPlacementID, Boolean bPlaceRight = true, String sTitleText = 'Click to choose a date')
Places a link with text sLinkText and title sTitleText next to element with id sPlacementID. The date picker will open when this link is clicked. bPlaceRight determines whether the link is placed to the left or the right of the element. bPlaceRight and sTitleText are optional.
setIcon(String sIconFile, String sPlacementID, Boolean bPlaceRight = true, String sTitleText = 'Click to choose a date')
Places an icon with path sIconFile and title sTitleText next to element with id sPlacementID. The date picker will open when this icon is clicked. bPlaceRight determines whether the icon is placed to the left or the right of the element. bPlaceRight and sTitleText are optional.
setXOffset(Number nOffset)
Determines the number of pixels left or right of the mouse click that the date picker is displayed. This method will be ignored if date picker is shown using displayPosition.
setYOffset(Number nOffset)
Determines the number of pixels above or below the mouse click that the date picker is displayed. This method will be ignored if date picker is shown using displayPosition.
setCloseTime(Number nTime)
Determines the amount of time in milliseconds to hide the date picker after mouseout.
setUpdateField(String sFieldID, String sFormattedPHPDate)
Ties an input/select field with id sFieldID to the date picker. Sets the value of the field to sFormattedPHPDate, using the same format as PHP's date function.
setUpdateField(Array aFieldIDs, Array aFormattedPHPDates)
Ties a group of input/select fields with ids contained in aFieldIDs to the date picker. Sets values of the fields to expressions contained in aFormattedPHPDates, using the same format as PHP's date function.
setUpdateField(Object objUpdateFields)
Ties an input/select field to the date picker. Sets the value of the field using the same format as PHP's date function. The object member names are the Field IDs, and the member values are the date expressions.
setUpdateFunction(Function fnFunction)
Determines the function to call after a date has been selected by the user.
setStartDate(Date objDateObject)
Determines the initial date shown on the date picker.
setEarliestDate(Date objDateObject)
Determines the earliest date that can be selected by the user.
setLatestDate(Date objDateObject)
Determines the latest date that can be selected by the user.
setAllowedDays(Array aAllowedDays)
Determines which days of the week can be chosen. 0 is Sunday, 1 is Monday, etc.
setWeekStartDay(Number nDay = 0)
Determines which day of the week starts each calendar week. 0 is Sunday, 1 is Monday, etc.
display()
Shows the date picker. This function is designed to attach to an event only.
displayPosition(String sXPosition, String sYPosition)
Shows the date picker at the given position.

View the demo or download DateChooser.


76 CommentsRSS

1 Matt wrote: [8:56am on September 11 2006]

This looks good. I've got a new project and have been looking for a decent JS datepicker - I'll be trying this one ahead of others simply because it doesn't pop up another window. Very useful so far and thanks very much.

2 lauri wrote: [9:57pm on September 11 2006]

yes, it is nice but i miss 2 feature:

time selection + limits where is possible to choose these (for example: since 2006-09-11 14:00:00 until 2006-09-13 19:00:00)


cheers

3 y5 wrote: [2:21am on September 12 2006]

Lauri:


Time selection is probably best suited for a separate project. However, I'm considering adding the option of providing date limits. Thanks for your suggestions!

4 logan wrote: [8:33pm on October 3 2006]

Would be perfect to provide functionality to disable certain days and disable certain range of days as well

5 s3v3ndeuce wrote: [12:05am on October 17 2006]

I love this script, but is it just me or does the calendar pop up at the wrong position every once in a while? I tried finding FAQ's or discussion on this script, but can't. Was wondering if I could get some input? (IE7)

6 y5 wrote: [3:42pm on October 17 2006]

s3v3ndeuce:


Could you post a link to an example script with this behavior? I tested the calendar in IE7 and didn't notice any positioning issues. Thanks!

7 Jason Read wrote: [3:55pm on October 23 2006]

thanks for the great date chooser. I am incorporating this into an internal project for our university library. however, we have quite a few mac users (myself included) and I wasn't able to get it to work with safari. after reviewing the code, I found the following 2 problems:


Line 207: Safari does not recognize the property ndClicked.className

Line 269: Safari does not recognize the property ndClicked.innerHTML


I can email the changes to anyone that is interested.

8 y5 wrote: [10:44pm on October 23 2006]

Jason,

I'll ask for the changes via e-mail.. Thanks!

9 swampy wrote: [3:00am on October 29 2006]

How can I call the js picker when the link doesnt exist on the page yet?


I need the link to create the object like:


a id=date href=# onClick=var objDateChooser = new DateChooser(); objDateChooser.setUpdateFunction(jsDate); objDateChooser.display -- Date /a


input id=date type=text value= /


any ideas? (quotes & html removed manually)

10 Maxime Delorme wrote: [11:48am on November 6 2006]

You can find another one here https://www.tennaxia.net/ujf/examples/form_widgets/calendar.html

11 Gabriel Svennerberg wrote: [1:20pm on November 29 2006]

Very nice datepicker. Just what I'm looking for. The only problem is that in sweden where I live, the first day of the week is monday. Is there an easy way to adjust the script to have Monday as the first day of the week?

12 y5 wrote: [7:41pm on November 30 2006]

Is there an easy way to adjust the script to have Monday as the first day of the week?


Not yet, but it's in the list of items I'll add in the next version.

13 y5 wrote: [3:48pm on December 6 2006]

Gabriel,

I added the setWeekStartDay() method. See the changelog and above documentation for details. Thanks for the suggestion.

14 Gabriel Svennerberg wrote: [7:07am on December 7 2006]

y5,

That's absolutely brilliant. Thanks a lot!

15 Stan wrote: [1:57pm on December 20 2006]

Excellent script Mr. y5!


nice features & small size.

Just something to add, please consider putting a note here on the page about the exact license you're using (CC By-ND).

Because I thought there is no license at all, but I saw it later when I opened the js file to look around (great code!).

16 Brian wrote: [3:06pm on December 30 2006]

One of the best date pickers I've come across. Well done. any plans to implement the use of css classes to create a calendar. i.e. making it as easy as having class="datechooser" and variations. Makes it easier for users to just link to the js file and not bother writing their own js code.

17 y5 wrote: [6:17pm on December 30 2006]

Stan: done!

Brian: That's a very nice idea; I'll see what I can do.

18 Jacques wrote: [2:13pm on January 11 2007]

I tried to use your calendar script on Linux (Ubuntu 6.06 and Firefox 1.5 / 2.0) and when i select a "october" months the calendar show two days "14" on year 2006...


Jacques/Brasil

19 y5 wrote: [1:41am on January 19 2007]

Jacques,

Unfortunately I have no way to reproduce this error, even though I'm dying to see what's going on. If you turn on strict javascript and error reporting in about:config, does the datechooser throw any errors or warnings when selecting October 2006?

20 Ralf wrote: [12:43pm on January 20 2007]

Brilliant, very fast way to pick a date. Thanks for that!


But is there a way to easily make this datepicker output localized dates? For example instead of "Sat., Jan 20 2007" I'd like to have the german format "Sa, 20.01.2007".

21 Ralf wrote: [4:24am on January 22 2007]

Never mind, got it working. I oversaw the comments in the readme.html source.

22 y5 wrote: [3:32pm on January 22 2007]

Sorry for not responding right away, but I'm glad you got it figured out.

23 thusitha wrote: [4:27am on January 24 2007]

Nice work!


I ran into a problem with IE 6.0 (80004004) when i tried to instantiate DateChoosers inside a form. I think this was because of DateChooser trying to modify DOM before page is fully loaded. Was able to workaround it by instantiating and attaching input fields during window.onload. Same thing worked fine in FF 1.5.


Another thing I noticed in FF is, if you resize the FF window so there's not enough width for the datechooser, the currentdate link will wrap around.


Also, I feel that selected month should be changed only if a date is clicked. Right now it changes when the prev/next year/month is clicked as well.


See if you can do something about these.

24 Cominging wrote: [9:18pm on January 31 2007]

Excellent scripts!

Thanks of sharing it!

25 Melv Ng wrote: [10:07pm on February 15 2007]

Really cool date picker! It works great :) I do have some probs in IE7, maybe due to some stylesheet positioning stuff (the picker doesn't scroll with the page). Anyway, thanks for the script!

26 Melv Ng wrote: [11:12pm on February 15 2007]

Just wanted to let you know that I solved my positioning prob using technique from http://www.quirksmode.org/js/findpos.html. I have to attach the position of the picker to an element in IE(7). Not as elegant as using the mouse pos, but at least it worked :) Thanks again for this date picker gem ;)

27 Melv Ng wrote: [11:24pm on February 15 2007]

Oh, hope it is ok that I had to modify your code a bit for working around the position problem. If otherwise, send me a mail, or post here and I'll wait for your official fix. (sorry for spamming this page :P) Cheers!

28 y5 wrote: [11:39pm on February 15 2007]

It's not a problem at all, Melv.. I'll email you tonight to see what you fixed so I can possibly add it to the next version. Thanks!

29 Paul Duey wrote: [7:28pm on February 17 2007]

Nicely done.


I added an optional onclick event to the input element in the setUpdateField function.


[snip]

this.setUpdateField = function()

{

objUpdateFields = {};

if ((typeof(arguments[0]) == 'string') && (typeof(arguments[1]) == 'string') && document.getElementById(arguments[0]))

{

objUpdateFields[arguments[0]] = arguments[1];

// optionally show date chooser if user clicks input field

if ((typeof(arguments[2]) == 'boolean' && arguments[2]) == true) {

document.getElementById(arguments[0]).onclick = this.display;

}

}

[/snip]

30 Adam Seabridge wrote: [2:06pm on February 20 2007]

Hi, Great Script but instead of onload of the page creating the link for the calendar and binding it to a dropdown i have a static link with an calendar icon and i only want the calendar object to be created and shown when the user clicks the link. Is there a way to do this?. My attempted implementation is below but i end up with two links and then have to click the second link to show the calendar.


I would be greatful for some help on this. Thanks in advance.


function ShowCalendar(){

/*Create Instance of calendar with dd/mm/yyyy format for date*/

var objDateChooser = new DateChooser();

objDateChooser.setUpdateField({'startdate_m':'m', 'startdate_d':'d', 'startdate_y':'Y'});

objDateChooser.setIcon('/images/calendar_ico.gif', 'startdate_y');

objDateChooser.setXOffset(65);

objDateChooser.setYOffset(0);

objDateChooser.setCloseTime(200);

//return true;

}

31 Adam Seabridge wrote: [2:10pm on February 20 2007]

Just to expand on the above:


I have 3 dropdown lists; startdate_d , startdate_m, startdate_y


and the a link next to them which calls ShowCalendar();


when the link is clicked i want to create and show the calendar straight away.

32 Adam Seabridge wrote: [7:51am on February 21 2007]

I also had some positional problems experienced by a few others to get around this i modified the display function slightly and added to extra functions i found:


this.display = function(e)

{

e = e || window.event;

var sPositionX = 'auto';

var sPositionY = 'auto';

if (e)

{

if (e.pageX || e.pageY)

{

sPositionX = e.pageX + nXOffset + 'px';

sPositionY = e.pageY + nYOffset + 'px';

}

else if (e.clientX || e.clientY)

{

sPositionX = e.clientX + ndBodyElement.scrollLeft + nXOffset + 'px';

sPositionY = e.clientY + ndBodyElement.scrollTop + nYOffset + 'px';

}

if (e.preventDefault) e.preventDefault();

if (e.stopPropagation) e.stopPropagation();

e.returnValue = false;

e.cancelBubble = true;

}

// Mod By A.Seabridge to workaround positional problems in i.e 7

// This overwrites the above values using a better function to determine position

sPositionX = findPos(findTarget(e),"x")+nXOffset+'px'

sPositionY = findPos(findTarget(e),"y")+nYOffset+'px'

//alert('x=' + sPositionX +' y=' + sPositionY)

DisplayDateChooser(sPositionX, sPositionY);

return false;

};

33 Adam Seabridge wrote: [7:53am on February 21 2007]

The two functions used above to find the position and targert modified from http://www.quirksmode.org/js/events_properties.html:


function findPos(obj,axis) {

var curleft = curtop = 0;

if (obj.offsetParent) {

curleft = obj.offsetLeft

curtop = obj.offsetTop

while (obj = obj.offsetParent) {

curleft += obj.offsetLeft

curtop += obj.offsetTop

}

}

if(axis=='x'){

return curleft

}

else if(axis=='y'){

return curtop

}

}


function findTarget(e) {

var targ;

if (!e) var e = window.event;

if (e.target) targ = e.target;

else if (e.srcElement) targ = e.srcElement;

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode;

return targ

}

34 y5 wrote: [11:19am on February 21 2007]

Thanks for the great feedback, Adam. It may be a few days, but I'll eventually update the datechooser script with your modifications (or variation thereof).


As for your question, you'll want to create the datechooser in the global scope and not the ShowCalendar() function. Otherwise the script won't save the user's date after it's picked. In the ShowCalendar(), call findPos(this, 'x') or findPos(findTarget(e), 'x'), depending on how you're calling ShowCalendar. Finally, call DateChooser.displayPosition(x, y) to show it.


I hope I understood your question..

35 Mihail wrote: [4:14pm on February 27 2007]

Hi,


first of all, thank you for this great date picker.


I want to use 2 date picker instances on one page and in the second date picker I need to disallow dates before the date wich was chosen in the first date picker. Is this possible? Thanks in advance!

36 y5 wrote: [4:45am on March 24 2007]

Mihail,


See the new examples in my readme file for a way to do this. Setting a date in example 6 will control the earliest date to be selected in example 5.

37 John wrote: [11:36pm on April 16 2007]

This is probably a newbie mistake so I apologize in advance.


I have a form that is long and thus scrolls the browser. The date picker is near the bottom and after picking a date causes the page to scroll back to the top. There are still more fields to fill so I don't want them to have to scroll back down to the next control.


Thanks in advance for any insight you can shed on this.

38 y5 wrote: [12:59am on April 17 2007]

Hi John,


Could you post a link to an example page? I've been trying to reproduce the issue and I haven't been able to do so.


Thanks =)

39 Greg wrote: [1:30am on April 17 2007]

Thanks for an excellent date chooser. I've modified it slightly for my own purposes, and in the process gained huge respect both for your skill and the depth of javascript.

40 Nex wrote: [6:27pm on April 29 2007]

how do i use the setselecteddate parameter to onload update the select fields in a form... please an example

41 scott tallarida wrote: [3:18pm on May 1 2007]

I ran into a problem in ie7/ie6. Due to the structure of our pages I cannot utilize window.onLoad for the picker so I wrote a little newCal function that is called inline. Everything is fine until the calls to newCal are nested inside a table or div - then I get an ie "OperationAborted" pop-up. I have read up on this nasty bug and it seems that datechooser exposes it. I am wondering if anyone else has experienced this? I love this date picker but will not be able to use it with this problem.

42 janine wrote: [4:26pm on May 1 2007]

hi john,


this date picker is so slick - i love the clean coding. thanks for releasing it.


i just can't get a date to be initially selected in my dropdowns. i have a day, month and year dropdown like example 4 on your readme file. i have tried using the setSelectedDate method, feeding it a date as follows:

ndExample4.DateChooser.setSelectedDate(initialDate);

but i get an error objSelectedDate is null or not an object.


I must be doing something stupid. Can anyone shed any light? Thanks

43 y5 wrote: [12:19pm on May 2 2007]

Scott,


Have you tried using the HTML markup interface (http://yellow5.us/projects/datechooser/#new)? I'm curious if the same problem occurs.


Janine,


I sent a beta version of the script to your email address. If it works I'll post it here as a new minor revision.

44 Janine wrote: [3:45pm on May 4 2007]

Hi John,


Thanks a million for getting the initial date selection working.


Also, just in case you don't know, your datepicker works fine on Safari 1.3.2 and the latest version of Camino on a mac.

45 inversarium wrote: [9:12am on May 15 2007]

Just though I'd also like to let you know that the script run fine on Netscape 8 as well!

46 danep wrote: [12:03am on May 18 2007]

This is a great function, however when used on an XHTML page the "calendar" icon (datechooser.png) doesn't appear at all. Any ideas why?

47 y5 wrote: [11:06am on May 18 2007]

Danep: No, not yet, but I'll look into it as soon as possible.

48 eldapone wrote: [2:07am on June 19 2007]

Datechooser Tested on Opera, IE...

Examples 2 and 6 don't work in Firefox

My version:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

49 eldapone wrote: [2:10am on June 19 2007]

Would appreciate more elaborate examples.

A nice function would be to update the select or text fields automaticaly when the script loads.

50 y5 wrote: [3:13am on June 19 2007]

Examples 2 and 6 work for me on Firefox. Could you elaborate on your testing info? (installed extensions, settings, etc.)


Can anyone else confirm them not working?


For your script loading function, see setStartDate() or setSelectedDate(). But IMO it would be better to do that sort of thing server-side if possible.

51 eldapone wrote: [1:33pm on June 19 2007]

I've just retested it again.

Everything is ok when I run the examples page locally from my machine, everything shows up like it should.

When I run the example page from your site, none of the datechoosers icons/links show up.

On the other side, the datechooser on my site:

http://www.dubrovnikcity.com/accommodation.htm runs just fine... icons show up normally...

... but the one on the

http://www.dubrovnikcity.com/accommoddation/dubrovnik/apartment_stradun.htm doesn't.

The weirdest thing is that everything is working fine in IE and Opera.

Have any idea ?

No special settings..

Extensions: AJAX Yahoo Mail, Colorful Tabs, Dog Ears, Dom inspector, Download statusbar, firefor, fireftp, spamreport, webdeveloper (latest versions)

I also use kerio firewall

52 eldapone wrote: [1:34pm on June 19 2007]

sorry, wrong address, find below the actual one:


http://www.dubrovnikcity.com/accommodation/dubrovnik/apartment_stradun.htm

53 y5 wrote: [1:40pm on June 19 2007]

Both links work on my machine, but I'll e-mail you with a few questions shortly.

54 Bernard Choi wrote: [4:13am on June 21 2007]

Greetings,


I loved your datechooser lots and thanks for the CC license. I was wondering if you would be open to some changes I made in my own version that customised ?


1. .to have the link image inside the field itself ;


datechooser {

background:transparent url(datechooser.png) no-repeat scroll right center;

} ..


2. to detect clicks from within the field


events.add(ndDateChooser, 'click', ndDateChooser.DateChooser.display);

55 Vernon wrote: [5:58pm on July 12 2007]

Hi,


I was wondering if you were aware of a collision between your date chooser script and Simon Willison's addLoadEvent function (http://simonwillison.net/2004/May/26/addLoadEvent/)?


The error occurs with Firefox:


event is not defined

e = e || events.fix(event);


on line 889.


The thing is, it works fine in Safari, so it would seem that preventing a collision is possible. Is it at all possible for the function and your script to leave peacefully? Any suggestions? Thanks!

56 Jonathan wrote: [2:13am on July 14 2007]

I *really* like the design of your site, it's very pleasing on the eyes. This looks like a nice script, but there's no demo?

57 Jonathan wrote: [2:14am on July 14 2007]

I see the demo link now... it would help if you moved it up top where you also have a link to download it.

58 Pingback: giancarlo.dimassa.ne wrote: [12:15am on July 16 2007]
[...]DateChooser | yellow5.us (tags: javascript calendar date opensource picker reference[...]
59 Christian wrote: [5:24pm on July 18 2007]

This is beautiful. Thanks a lot. I wasn't able to get it working with just the class attribute, but the javascript to set it up is really short. Thanks.

60 salameh wrote: [3:16am on July 22 2007]

Hello , thank you for a great Calender Project ,


But there is a Bug in the calender when choose the Year backword going to 1999 , and go down , just one day entry displayed .


Hope to solve this bug in future versions .


Thank You .

61 y5 wrote: [11:53am on July 22 2007]

I am unable to reproduce the problem you're describing. I'll send you an e-mail shortly.


Thanks =)

62 Dano wrote: [11:37am on August 7 2007]

This may be out of scope...


I notice that when you select February from the drop-downs, then the day, it is possible to select the 31st. is there a way to prevent user selection (from the drop-downs) for dates that aren't applicable to certain months?


Thanks so much for your wonderful date picker script.

63 y5 wrote: [3:45pm on August 7 2007]

I was going to say you're right; it is out of scope... But I will look into this and see if there's a quick fix that doesn't bloat the code too much =) Give me a little time though, things have been extremely busy but are finally calming down.

64 kumpri wrote: [7:30am on August 30 2007]

Hi and thanx for providing this great widget and for great support i can notice from this threads..


One thing though is that it seems the setEarliestDate(dateObj) won't accept February as earliest month, so when i call dateObj.setMonth(1) the result is the same as as dateObj.setMonth(2), and the March is displayed as earliest month.


Right now i use a workaround to set January 31st as earliest date but would be nice to have this fixed.


I tested on OSX with Safari 3 and Firefox 2.

65 y5 wrote: [9:36am on August 30 2007]

Kumpri,

The problem isn't with the DateChooser code, but with the example.. Since February only has 28/29 days, and we're on the 30th, it's placing the start date into March. Here's a way you can fix that:


var objEarlyDate = new Date();

objEarlyDate.setMonth(1);

while (objEarlyDate.getMonth() != 1)

{

objEarlyDate.setDate(objEarlyDate.getDate() - 1);

}


Naturally, you may want to create a function to handle this for more months than just February, but this should get you started. =)

66 Ferhat Cerit wrote: [9:48am on September 13 2007]

First, I want to thank you for this datepicker which saved my much time.


Although relatively insignificant, I experienced problem with link icon location. It works well on example (aligned top, although I'd prefer center) but when used with input fields with less height it still stands top with same height before. I looked through js but couldn't find anything. So I'd be pleased if anyone can help me to set align of link icon as I wish.


Best regards,

67 Ferhat Cerit wrote: [9:51am on September 13 2007]

It seems that it is a natural result of HTML code, so it seems that it must be put inside a table or something similar but I will still appreaciate help.

68 Ferhat Cerit wrote: [5:05am on September 14 2007]

I would also if it is possible for picker to be disabled preferably by disabling input. picker is still working even if container input is disabled.

69 jt wrote: [7:07pm on September 29 2007]

thank you very much, like you i have been looking for a free good date picker and yours is that.


thank you!

70 kumpri wrote: [5:37am on October 1 2007]

hey y5,

i didnt look here since 1 month, and now i find that you answered my question immediatelly =)

in the meantime i discovered that if i use inline code dc-earliestdate it works as expected.. and from your explanation it seems that i was lucky to have experimented on days lesser than 29 thats why it worked =)

thanx again for this wonderful piece of code!

71 Pingback: www.ajaxbestiary.com wrote: [4:23pm on October 6 2007]
[...]http://yellow5.us/projects/datechooser   Share This Sphere: Related Content Filed under Widgets[...]
72 David Lynch wrote: [6:21pm on October 8 2007]

Firstly, I am quite fond of this datepicker.


Now, on to the inevitable complaint! When I use setSelectedDate it doesn't seem to update the highlighted day on the calendar, though it does move the calendar page to the appropriate year/month.


Here's an example: http://www.davidlynch.org/date/


Am I doing something wrong?

73 y5 wrote: [7:28pm on October 8 2007]

@David: Check your mail when you get a chance =)

74 George C wrote: [11:41am on October 10 2007]

Very nice piece of code you've build here, thanks.


Any chance you'll include time selection in the near future?


Thanks again!

75 y5 wrote: [8:48am on October 17 2007]

Thank you, sir. No, no plans to build time selection, immediate or otherwise. Life is just too busy at the moment, and I'm not sure I'd use one anyway.


Sorry =(

76 y5 wrote: [8:49am on October 17 2007]

I'm closing comments for this topic. If you want to get in touch with me, please use my Contact page (http://yellow5.us/contact/). Thanks!

Comments are disabled for this entry.