kelvinluck.com

Hi ted,

Thanks for the feedback. Unfortunatly at this time I’m not planning to add a time picker to the date picker simply because most use cases I can think of for a date picker don’t also need a time picker. I feel it would be better implemented as a seperate plugin…

Cheers,

Kelvin :)

Hi,

Glad you like it :)

It isn’t possible to show the days outside the current month without modifying the core code. I’m busy with other stuff at the moment but will put this on the “todo” list,

Cheers,

Kelvin :)

thanks for contributing this great plugin to the community, and thanks for not bloating it up with unneccessary features!

Cool plugin. I have my input box to the right of the screen, when I click the calendar icon the calendar opens to the outside of the window’s viewport. How can I reposition the calendar so it is to the left of the input box.

Yes it does work on the demo page!? I’m using Safari and Firefox. Any ideas?

– matt

Hi Kelvin,

Cheers for that, it works better if you take line 197 out and then feed IE6 a specific style for the ‘right’ (as opposed to left) position using conditional comments :)

Its looking great.

Also, it may be a good idea to allow for year switching as well.

Hi,

You should be able to preselect any date but if you want the date to be in the past you need to make sure you have passed in a startDate in the past when you initialise the date selector,

Hope that helps,

Hi Adrian,

Thanks for the feedback. It’s a common misconception that the date picker doesn’t let you pick dates in the past but you easily can by passing in a suitable ‘startDate’. I need to update the demo pages when I get a second so there is one that makes this more explicit.

I’ll get in touch with you re. seeing your changes for the year increments and will think about integrating them when I get a second (very busy at the moment!),

Glad you like the date picker,

Cheers,

Any chance you could extend the plugin to be able to disable days? For instance, disable all saturdays and sundays, or disable the first wednesday of each month? I think that would really help make it more customizeable.

Hi guys,

@Jon – At the moment it doesn’t work like that but I’ll consider it when I next get a chance to do some work on the plugin (which won’t be for a couple of weeks at least!)

@refactored – Good suggestion but unfortunately the same answer as to Jon – I’m too busy at the moment to implement it but will try to ASAP.

@john – Another good suggestion and one that’s already on the TODO list. The IE no select hack should be added in with JS rather than being in the stylesheet and this will be done when I next work on the plugin…

Thanks for the feedback everyone, sorry I don’t have the time right now to integrate the ideas…

BTW, I can access the field using “onchange” but only if I type the date in. I would like to know what the event call is after choosing a value from the datePicker.

Thanks!

Heh. Basically, I’m trying to use an AJAX call to update a text area field w/ database content. That DB content requires a date parameter and so I wanted to use the datePicker. :)

Right now, if a user types in the date (11/14/2006), then the “onchange” event calls the JS function which makes the AJAx request to the db and then displays it in the text area.

This then allows the user to proofread or edit the text for that chosen date. Once approved or changed, then they hit submit and updates the DB.

So, really I guess what I need to know is if there is an event handler for the datePicker.

Thanks for any help! :)

Fantastic! Thank you so very much for going out of your way to do this!

I’m sure there are other devs who’re going to love this!

Hi :)

It doesn’t matter where the calendar image is, you just need to make sure it is referenced correctly in the CSS . Bear in mind that the path to the image in the CSS is relative to the CSS file, NOT the HTML file.

Hope that helps,

Hmmmm – I’m afraid I’ve got no ideas. It sounds like something in your CSS is clashing with something in the calendar CSS… Is your calendar field in a table cell? Someone else had some issues with that – does that help you at all?

Cheers,

Hi Kevin,

great plugin, ive included in a open sourec app im working on (www.simpleinvoices.org), just wondering are there any plans to add an option to move forwared/backwards by years as well as months

Cheers

Justin
justin@kelly.org.au

Hi guys – thanks for the feedback…

I’m hoping to do some work on the plugin at some point soon and will definitely integrate the week start request. I’m still personally not sure if the jump by years functionality belongs in the plugin but it has been requested many times so I’ll try and add it in…

Cheers,

Hi Mike,

It’s not currently possible to do that with the date picker. It would be a nice feature though and I’ll stick it on the TODO list for when I next get a chance to work on it,

Cheers,

Here’s a vote for keeping the plugin lightweight and not adding too much features.

A bit related to lightweight: paging months is a bit “sluggish”. Any ideas on how to improve the speed of _getCalendarDiv()?

I used the brand new Firebug 1 beta “Profile” feature, which showed that both changeMoth and _getCalendarDív averaged around 150ms. I’m not sure if you add them or not to get the “real” value. Anyhow, when clicking fast through the months, I can clearly feel a lack of responsiveness, it’s not huge, but still there. I compared that with the google calendar version which feels more responsive, and it seems to average around 30ms (not so obvious there which functions are being called).

I’ll try and take a look into speeding up _getCalendarDiv when I next get a chance to work on the datePicker and I’ll take a look at how the google calendar one does it (btw – where can I see that?),

Cheers,

Kelvin :)

Cheers :)

Hi,

I guess you mean the Dynarch Calendar (not menu)?

There are a number of improvements I have planned for the date picker but to be honest I think multiple date selection will be at the bottom of the list…

The problem is that it is quite a fundamental change as a date picker is currently by definition attached to one INPUT field and it would be an issue adding multiple dates to one field…

If there are enough requests for it (and I get enough time!) then I will consider adding it though…

Glad you like the plugin,

Kelvin :)

A superb date picker and easy to customise. It saved me a large javascript headache with some legacy code. If you want to style the inactive table cells further you may have to change the empty string to a non-breaking space so IE renders it properly.

I’ve ben using jscalendar, and then I recently discovered jquery and would love to consolidate all of my disparate js effects and tools into the framework. Is there any chance that there will be an update to datePicker in the near future? I’m looking specifically for a couple of features that have already been mentioned:
-move by year (via dropdown for distant year values)
-optional time selection

jscalendar has a boatload of additional features, but the ones that I’d be hoping for are:
-more configuration options for returned date/time format
-allow user to move the DIV

datePicker appears not to work against jquery 1.1.

Is it compatible with jQuery 1.1?

you can’t chain methods on the datepicker after setup, since its not following JQuery conventions. a ‘return this’ fixes this:

diff—git a/s/jd.js b/s/jd.js
index ec3ecab..d5b163f 100644—- a/s/jd.js
+++ b/s/jd.js
@ -407,7 +407,7 @ jQuery.fn.datePicker = function(a)

jQuery.datePicker.setInited(this);
}
}); – +return this;
};

Thank you for the new version!
You forgot to update the LastChangedDate field in the source:
$LastChangedDate: 2006-11-26 17:52:59 +0000 (Sun, 26 Nov 2006) $

Hi Kelvin,

i would too love the “multiple dates” functionality: it’s very useful for theatres and cultural places, where content administrator needs to enter all the dates for one show. in fact, you would use the calendar to fill in the value for a hidden input field, returning a string with all dates separated by, say, a semicolumn.

Hi Kelvin,

Great plugin. I ran across an issue with setting the start date:

$(’#date_chooser_date’).datePicker({startDate:’11/11/2006’});

For whatever reason, the start date is ignored, and any start date is selectable

thanks,

Mike

Hi guys – thanks for the feedback.

@ Alexandre – maybe this is a problem that could/ should be solved in the page. So once a date is selected an extra input field with datePicker is dynamically added to the page. Rather than adding code to deal with this directly into the plugin (which I want to keep lightweight)?

@Jacques – this is probably because the calendar elements are created via jQuery which uses innerHtml which isn’t allowed in true XHTML. There was an interesting discussion about that on the jQuery mailing list today – the conclusion seems to be that the world isn’t yet ready for pages served as true XHTML.

@Mike – I can’t replicate your problem. startDate sets the first selectable date. So the user should be able to select any date between that and endDate. Is this different to what you are seeing?

@Fei Yang – I’m not sure what you are trying to do. That is an internal private method. If you want a different date to be selected in the pop up calendar simply put that date into the input field and it will automatically be selected in the calendar when the calendar pops up,

Hope that all helps!

Hi Alexandre,

Why not use:

$.datePicker.setDateFormat(‘ymd’,’-’);

(example from the “usage” section of the plugins page)?

Hope that helps,

Hi Mark,

I really like the idea of an optional custom callback function which could be run for each date output. This would allow a great deal of extensibility without making the plugin too heavy… It could simplify the plugin itself as well by abstracting out some of the logic which is stuck in the dates loop. I’ll look into this when I next get a little bit of spare time…

Cheers,

Hi Mike,

This is a normal use of the date picker and I would like to add some code to make it easier… At the moment I’m totally snowed under though :(

In the meantime, you can listen for the “change” event on the first textfield and can use this event to copy the value from the first field into the second field. Then the second calendar will have the first chosen date selected when it’s first popped up…

Hope that helps,

Kelvin :)

Hi Celsius, ummm, I mean Kelvin! :)

Great date picker! Only one small problem: I can’t get a label text to appear in front of the input box. I must be missing something. Any ideas what?

Thanks and regards from Slovenia

Hi Guys,

@Nando – nice idea – I’ll add this in.

@Mark – not sure I understand your problem… You mean you can’t figure out the CSS to get a label sitting infront of the input? Maybe because the input gets wrapped in a div class “date-picker-holder”?

@Tom – Hmmm – you shouldn’t be having this problem. There is code in the plugin to prevent this happening. Do you see it on my demo page?

Cheers,

Kelvin :)

Hi Kelvin, thanks for the quick response, i checked on the demo page and in IE your calendar is also being covered up by the text box, i think someone mentioned the problem before but dont think you answered it, its a problem which might not actually be fixable with the current setup on the page but if you can help it would be much appreciated, thanks, Tom.

Isn’t anyone else having this IE7 problem where the input text field shows through the calendar? Here it shows through for everyone.

yes… custom callback sounds good. then we can create one for ISO8601 date format

Hello Kelvin,

great work on the plugin, it won’t render properly in IE 6.0 on linux (IE4linux), it works great on firefox though…

I am also having the issue in IE 6 and 7 where the calendar displays behind all other elements (in my case, behind select boxes, input elements, horizontal rules, EVERYTHING). Have tried mucking with z-indices, and nothing works. If necessary i can send over a reduced test case.

Adrienne

Hi guys,

I can’t replicate any problems in IE6 on my test page on multiple machines here. Do you have a standalone version of IE6 running alongside IE7? I’m afraid I know nothing about IE6 on linux but I’d probably use firefox on linux anyway!
Re. the style changes used alongside YUI fonts, resets and grids, I’m afraid I have no idea. I guess the CSS must be clashing in some way – if you have an example page I can take a quick look?

Cheers,

Hi Chag,

Both of those issues are on the TODO list but it’s a question of finding time to do them! I’ll post here when I get round to it…

Cheers,

Hi Santy,

You are one of a number of people reporting the problem in IE6 but I can’t replicate it on any of the computers I’ve tried. What exact build of IE6 is it? Have you done a windows update recently or something? Is it happening on my demo page?
Thanks for any help tracking this down,

jon : look at the source, there’s a line a the beginning :
dateSeparator = ”/”;
try to remplace with
dateSeparator = “”;

Dear Kelvin,
I’ve a problem with your plugin when try to use it with niceJform plugin. When used together the small calendar link-image is on the right of textinput, but then the text input style is messed up. I figure out, that when I change in calendar css this:

div.date-picker-holder input {float:left;}

into this:

div.date-picker-holder input {float:none;}

the textinput looks fine. But the small image-link jumping down, below the textinput. Any help would be great!
Best regards

Hi again…

I fixed the problem with IE taking the position:relative out, eventually.

But in the former question (about using datePicker as a calendar), I can’t get by on showing the pop-calendar without throwing any event! Is it jQuery.datepicker.show(this)? this.datepicker.show()?... :(

Actually, on kelvin’s test page, when i open the Date 1 calendar, i can see Date 2 input and image through it…

I’m using IE7

Can it be modified to allow and start date in the past?

What I mean is that I’d like to not have to pass end a start date the way you don’t have to pass an end date to allow it to go on forever. I’m not sure how far back my users might need to enter information for (their birthday for instance). I suppose at worst I can go back 100 years.

Dear Kelvin,

I have the same showthrough issue with IE 6/Win and the current and previous datePicker version (datePicker laps over TinyMCE toolbar buttons), z-index didn’t work either.

My feature requests:

1) setChooseDateStr(newTitle).

2) Hooks after _closeDatePicker() and before show().

Best regards, greetings from Germany,
René

Hi,

@René – thanks for the feedback. I’m currently specifying a new version of the date picker with the help of Jörn Zaefferer, Paul McLanahan and Brandon Aaron and will take these observations into account. It will be started from scratch and should hopefully add new functionality and clear any old bugs :)

@Oleg – thanks for the report. I don’t currently have access to a https server so can’t test – could you edit line 198 of datePicker_source.js to read:

if (false && jQuery.browser.msie)

and let me know if you still get the error? (this will allow selects to shine through the date picker but I’d like to know if this block is causing the problems so I can take it into account for the new version),

Thanks,

Kelvin :)

Hi Donovan,

Glad you like the date picker :)

There is already a (undocumented) option to have the calendar popup when an input is clicked on rather than the calendar – just pass inputClick:true in when you initialise your date picker. e.g.

$(’#input-id’).datePicker({inputClick:true});

Hope that helps,

Kelvin :)

By the way, I’m just about to go on holiday for a week – when I get back I will be finishing up the rewrite of datePicker.

For those of you needing year selection…go here:
http://codetale.com/2007/02/23/javascript-calendar-widget

I would rather use a jquery plugin but this will do the job for now.

Hi again!

Kelvin, let me propose a solution of “IFrame vs. SSL” issue to you.
“The warning message occurs because Microsoft Internet Explorer is unable to determine if the SRC attribute of the IFRAME is secure or unsecure.” (http://support.microsoft.com/kb/261188)
So I just added the SRC attribute to IFrame (Line 201 of datePicker_source.js):

iframe src=”javascript:false;”

Construction like

iframe src=”//0”

doesn’t solve the problem, because in such case the security alert occurs on clicking “Next” button on calendar.

Thank you for your great work. Best regards,
Oleg

Hi Kelvin!
One more bug in datePicker :)
SELECT displays through the BORDER of calendar. For example, change the background color of the example page and you’ll see.

Hi,

@Chris – or if you can wait for a little while then hold out because year selection will be available in datePicker v2 which is currently being worked on…

@Seth – thanks for the headsup. I’d left some debugging code in there. Although the problem wouldn’t have effected most people because if you are running firebug or window.console == undefined (e.g. as it normally would be) then there would be no problem – it must have been conflicting with some other logging solution you are using on your page?

@Oleg – thanks for the further investigations. I’ve updated the plugin to set the src for the iframe to a blank.html page I’ve created as suggested by Tony – does that help?

@Luke – this isn’t an issue that I’ve run into before. In fact, I can’t replicate it on IE6 – do you have the problem on this page?

@Oleg (again!) – thanks for the headsup re. the border. I’ll see if there is anything I can do about this in v2 of the datePicker.

Thanks for all the feedback guys,

Kelvin :)

Hi Oleg,

1) Do you still get the security error on clicking the “Next” button with the iframe src=”blank.html”?

2) No solution for the border problem I’m afraid. Are the borders essential to your design? You could just remove the borders…

As for a release date for v2, I’d hope to have a beta version publically available in the next few days.

Thanks,

Kelvin :)

Kelvin,
Yes that is what I thought about your debugging code. The problem happened in IE6 and Firefox (w/ Firebug). I am working within the BEA WebLogic console, so BEA may have something else that is going on causing the conflict? I am not using any logging directly, but that is a problem with this portal development, I never know what is affecting my portion of the page, my code or all the other BEA code I cannot control. I am also having trouble with inputClick:true in IE6 and a readonly (yes I am aware that there are other potential usability issues), input but again the problem may be BEA and if so I do not think the benefit of a solution would justify the work.
Typing of work, thanks for all you have and continue to put into this.
-Seth

@Sylvain –
Hmmm – this is a new request but I can see how it might be useful. I’ll see if I can allow for it in v2 which I’m currently developing.

@Seth –
Very strange. If a console.log call was stopping it from running even in Firefox with firebug the the BEA thing must be doing something very weird! I don’t envy you debugging with weird things like that going on! Good luck :)

@Oleg –

1) Cool :)
2) Hopefully v2 of the plugin will avoid this problem…

Thanks for the feedback guys,

Kelvin :)

Hi Tony,

v2 of the plugin is very nearly ready and allows you to control exactly where the calendar appears (whilst still providing sensible defaults).

Look out for a beta in the next day or so…

Cheers,

Kelvin :)

Hi,

You can judge for yourself how good v2 is – I announced the beta on the jQuery list this morning…

Re. the disabled property, that’s a good idea. If the date picker is associated with an input and that input is disabled then the date picker should also become disabled. I’ll look into implementing that,

Thanks,

Kelvin :)

Hi MySchizoBuddy,

That is the default behaviour of both the original date picker and the v2 beta – if no startDate is passed then it defaults to today, otherwise you can set the startDate to whatever you like…

Cheers,

Kelvin :)

Hi Jose,

Which version of the plugin are you using? In fact, it shouldn’t matter…

In either version you can simply put a value into the input field and this will become the selected date in the date picker. So on page load use your database to write the date into the “value” attribute of the input field…

Hope that helps,

Kelvin :)