PDA

View Full Version : DatePicker Refactored - Less code - more features!



jack.slocum
3 Feb 2007, 7:59 AM
Sorry for more screenshots and still no code! It's getting closer though!! Everytime I think I am there I find yet another thing to tackle. My main goal is anything that will not be completely backwards compatible.... do it now. This way there's only 1 upgrade required.

Anyway, here is the newly refactored DatePicker. Key features:

- Full Keyboard Navigation/selection
- Month menu
- Can be embedded anywhere (including in a menu like in the screenshots)
- Significantly faster moving through months
- Arrows are ClickRepeater (cycle through months while mouse down on arrow, thanks Nige)
- Disabled dates logic is included (not dependent on grid editor)
- Customizable start day (defaults to sunday, but is monday in the screenshots)
- Can be set up with a field automatically/unobtrusively (e.g. new Ext.form.DateField('some-input') converts a standard input to validated date field with picker).

There's more, but I can't remember. I need to sleep. ;)

http://www.jackslocum.com/blog/images/screenshots/date1.gif

http://www.jackslocum.com/blog/images/screenshots/date2.gif

vajra
3 Feb 2007, 9:04 AM
Sweet calendar, elegant implementation, Jack strikes again!


:D :D :D

Animal
3 Feb 2007, 9:20 AM
Yep! That looks very nice. Clean features and not overwrought like the work produced by some script fiddlers!

brian.moeskau
3 Feb 2007, 10:29 AM
In looking at the current datepicker, I see that you can easily override month/day names and date format, which is great. But I don't see the ability to specify which day the week begins on -- this is the other basic requirement for properly localizing a calendar -- any chance this made it into the new version?

Thanks for all the hard work -- this is going to be outstanding!

JeffHowden
3 Feb 2007, 11:27 AM
In looking at the current datepicker, I see that you can easily override month/day names and date format, which is great. But I don't see the ability to specify which day the week begins on -- this is the other basic requirement for properly localizing a calendar -- any chance this made it into the new version?


- Customizable start day (defaults to sunday, but is monday in the screenshots)

brian.moeskau
3 Feb 2007, 1:39 PM
duh :) I'll get this reading thing eventually.

manugoel2003
4 Feb 2007, 8:46 AM
nice clean interface.... cool features.... nice work jack!!!

seno
5 Feb 2007, 6:35 PM
support i18n?

jack.slocum
5 Feb 2007, 11:07 PM
Of course. It did before as well.

HarryC
6 Feb 2007, 3:36 AM
Like everything else on the site, this looks lovely.

I hate to suggest anything that will delay the release but is there any chance of optionally including a time picker within the calendar?

mmcmahon
6 Feb 2007, 7:30 AM
I think the Today button would be fine without quoting what Today's date is. That being said, could be room for adding a 'clear date' button? I lock out users from my date fields and have them use my dhtml calendar where there's a Today and Clear Date button. If I were to switch, having the ability for clearing the date from the calendar would help.

I'll second the request for a time control. Something like http://www-128.ibm.com/developerworks/lotus/library/ls-Notes_Date-Time_Values/index.html would be great.

JeffHowden
6 Feb 2007, 10:18 AM
I lock out users from my date fields and have them use my dhtml calendar where there's a Today and Clear Date button.

When I've been a user on systems like that, everytime I go to interact with the field I get frustrated. Why not let your advanced users hand-enter the date? Surely that'd be faster for them than taking their hand from the keyboard to click (possibly numerous times to get month and year set right) the date they want.


I'll second the request for a time control. Something like http://www-128.ibm.com/developerworks/lotus/library/ls-Notes_Date-Time_Values/index.html would be great.

I'd like to weigh in on a time control as well, but not entirely sure about the lotus example you looked to. I've built one in the past that's IE-only, but with some sassy SVG bits, it could work in Firefox, Opera, and Safari too.

http://dev.jeffhowden.com/clock/

A control like that, while "pretty" isn't an effective tool for selecting time ranges (should that need exist), unless you were to put two of them side-by-side in a single "popup" control. A possible alternative could be something more along the lines of this (pardon the shoddy graphic):

http://dev.jeffhowden.com/images/time-range.gif

mmcmahon
6 Feb 2007, 10:35 AM
I lock out users from my date fields and have them use my dhtml calendar where there's a Today and Clear Date button.


When I've been a user on systems like that, everytime I go to interact with the field I get frustrated. Why not let your advanced users hand-enter the date? Surely that'd be faster for them than taking their hand from the keyboard to click (possibly numerous times to get month and year set right) the date they want.

But we're discussing a calendar control, that's why I responded with a request (I should have posted it in the other forum, apologies). I'd say a fair number of users are not aware of date format conventions which is why I lock them out of date fields and have them use the control. '5/7/2007' means May 7th to some and July 5th for others. By locking them out, I get better date values using the calendar control. I just need a little more functionality with the calendar control to make it complete. There would be room if Today's date wasn't shown. It could be shown using highlighted color which should be enough or add tooltip for the Today button if the user must see today's date.



I'll second the request for a time control. Something like http://www-128.ibm.com/developerworks/lotus/library/ls-Notes_Date-Time_Values/index.html would be great.

I'd like to weigh in on a time control as well, but not entirely sure about the lotus example you looked to. I've built one in the past that's IE-only, but with some sassy SVG bits, it could work in Firefox, Opera, and Safari too.

http://dev.jeffhowden.com/clock/

A control like that, while "pretty" isn't an effective tool for selecting time ranges (should that need exist), unless you were to put two of them side-by-side in a single "popup" control. A possible alternative could be something more along the lines of this (pardon the shoddy graphic):

http://dev.jeffhowden.com/images/time-range.gif

JeffHowden
6 Feb 2007, 10:47 AM
I lock out users from my date fields and have them use my dhtml calendar where there's a Today and Clear Date button.


When I've been a user on systems like that, everytime I go to interact with the field I get frustrated. Why not let your advanced users hand-enter the date? Surely that'd be faster for them than taking their hand from the keyboard to click (possibly numerous times to get month and year set right) the date they want.

But we're discussing a calendar control, that's why I responded with a request (I should have posted it in the other forum, apologies). I'd say a fair number of users are not aware of date format conventions which is why I lock them out of date fields and have them use the control. '5/7/2007' means May 7th to some and July 5th for others. By locking them out, I get better date values using the calendar control. I just need a little more functionality with the calendar control to make it complete. There would be room if Today's date wasn't shown. It could be shown using highlighted color which should be enough or add tooltip for the Today button if the user must see today's date.

In a website environment, I'd agree that date conventions are an issue. However, in a web application environment, users either know which format the system expects or the system allows them to select the format they prefer to enter dates in. With that in place, there's no reason whatsoever to negatively impact the user by forcing them to use their mouse to select a date they could just as easily enter in the proper format or even in plain english. Please see the following thread for more information about what I'm referring to:

http://www.yui-ext.com/forum/viewtopic.php?t=2329

mmcmahon
6 Feb 2007, 11:44 AM
It's a calendar control. If the keyboard polling/replacement with the date field was sufficient then you wouldn't need the control, so I'm not sure why the problem over the locked date field. If you have to know, my current system has the focus moving to the adjacent date control icon which can be activated with the space bar and then the control's keystroke monitoring takes over anyways <no mouse>. So I don't see why having the date field 'locked out' is an issue. Plus the app is bilingual and I don't have time to coin the French counterpart for 'nm' (which is non-intuitive). That's the beauty of a control, it's about simplicity.





I lock out users from my date fields and have them use my dhtml calendar where there's a Today and Clear Date button.


When I've been a user on systems like that, everytime I go to interact with the field I get frustrated. Why not let your advanced users hand-enter the date? Surely that'd be faster for them than taking their hand from the keyboard to click (possibly numerous times to get month and year set right) the date they want.

But we're discussing a calendar control, that's why I responded with a request (I should have posted it in the other forum, apologies). I'd say a fair number of users are not aware of date format conventions which is why I lock them out of date fields and have them use the control. '5/7/2007' means May 7th to some and July 5th for others. By locking them out, I get better date values using the calendar control. I just need a little more functionality with the calendar control to make it complete. There would be room if Today's date wasn't shown. It could be shown using highlighted color which should be enough or add tooltip for the Today button if the user must see today's date.

In a website environment, I'd agree that date conventions are an issue. However, in a web application environment, users either know which format the system expects or the system allows them to select the format they prefer to enter dates in. With that in place, there's no reason whatsoever to negatively impact the user by forcing them to use their mouse to select a date they could just as easily enter in the proper format or even in plain english. Please see the following thread for more information about what I'm referring to:

http://www.yui-ext.com/forum/viewtopic.php?t=2329

JeffHowden
6 Feb 2007, 12:22 PM
@mmcmahon: sure it's a calendar control. But, a calendar control by itself doesn't make a complete user interface for working with dates. What if I have copied a date from somewhere else and want to paste it into a date field because that's faster that navigating to the date by hand or by mouse? With a locked field, I can't do that.

For the record, I'm not implying in any way that a calendar isn't needed. I agree wholeheartedly that a calendar control is important for some tasks as it gives context to the date you're selecting. However, when it comes to entering dates, it's not the whole solution. Rather, a combination of a calendar control and some plain language parsing makes for the best user experience.

I can appreciate that there is more time in implementing what I'm suggesting. I understand that locking the field and implementing a calendar that everyone must use makes *your* life easier. However, the user shouldn't be forced to interact with a system that makes the developer's life easier. No, it should be the other way around everytime the choice comes up.

mmcmahon
6 Feb 2007, 12:56 PM
Different strokes, different folks. I wasn't trolling in suggesting that the current date be removed from the control's Today button allowing space for a 'Clear' button. Somehow you fixated on my locked field feature, which wasn't the purpose of my request.

You wouldn't type in mil or bil in a numeric field, so why use mnemonics for a date field? Yes to navigation keys to mod the date, but letter combos,.. sorry I don't buy that. I'll agree to disagree and leave it at that.


@mmcmahon: sure it's a calendar control. But, a calendar control by itself doesn't make a complete user interface for working with dates. What if I have copied a date from somewhere else and want to paste it into a date field because that's faster that navigating to the date by hand or by mouse? With a locked field, I can't do that.

For the record, I'm not implying in any way that a calendar isn't needed. I agree wholeheartedly that a calendar control is important for some tasks as it gives context to the date you're selecting. However, when it comes to entering dates, it's not the whole solution. Rather, a combination of a calendar control and some plain language parsing makes for the best user experience.

I can appreciate that there is more time in implementing what I'm suggesting. I understand that locking the field and implementing a calendar that everyone must use makes *your* life easier. However, the user shouldn't be forced to interact with a system that makes the developer's life easier. No, it should be the other way around everytime the choice comes up.

JeffHowden
6 Feb 2007, 1:17 PM
Different strokes, different folks. I wasn't trolling in suggesting that the current date be removed from the control's Today button allowing space for a 'Clear' button. Somehow you fixated on my locked field feature, which wasn't the purpose of my request.

You're absolutely right. I apologize for steering the conversation away from your original request. I personally don't have an opinion on whether a clear button is a good or bad idea. If it were configurable, I probably wouldn't enable it in my implementations.


You wouldn't type in mil or bil in a numeric field, so why use mnemonics for a date field?

That's correct, I wouldn't type things like that in a numeric field because spelled out numbers or number units isn't the primary mode of thought and therefore less efficient. More importantly, in almost every case, entering numeric values would require fewer keystrokes.


Yes to navigation keys to mod the date, but letter combos,.. sorry I don't buy that. I'll agree to disagree and leave it at that.

Why not be able to tab into a text input for a date and key in "today", "tomorrow", "mar 1", etc. and have the value updated to the proper date? That's all I'm suggesting.

jack.slocum
8 Feb 2007, 12:51 AM
The today button text is configurable, either globally via the prototype or individually via the config object.

It defaults to 'Today {0}' where {0} will be replaced with the todays date in your configured format.

yogurtearl
8 Feb 2007, 8:09 AM
Can I customize how the days of the month are rendered?

e.g.
If I want Julian days instead of the day of the month, can I make it display "32" instead of a "1" for the first day of febuary?

Michael

gfraser
8 Feb 2007, 5:48 PM
Having an optional "week number" column would be really useful in environments where projects are scheduled by week number...

On the calendar control is it possible to select the year from a drop-down as well?

coltsfan2k
25 Apr 2007, 11:10 AM
I really like the date picker, very elegant and intuitive. As far as usability goes, it seems to me to have one shortcoming...changing the year.

In the header it shows 'June 2007 (down arrow)' in the middle. Clicking on this button shows a list of the months. It seems to me that there should be two buttons instead of just one. Perhaps the header could show '(down arrow) June 2007 (down arrow)' Clicking the left down arrow and/or month will allow the user to select a month, and clicking the right down arrow and/or year will allow the user to select a year.

I know that changing the year is possible via ctl+up/down, but think about this scenario. A form has a date field, the user clicks the little calendar icon which brings up the date picker. Their hand was on the mouse, then to change the year they have to go to the keyboard and ctl+down to select the year, then possibly back to mouse to select a specific date. It seems like it could be a lot of transition if you have a form with a lot of date fields on it.

This could really be a usability improvement if the user must enter their birth date as it would require a lot of ctl+down arrows to go back several years.

RobbyRacoon
25 Apr 2007, 11:49 AM
Is there a way around the problem where, when clicking the next/previous month buttons, a page that has been scrolled will jump back to the top?

You can see this in action on the live dynamic forms example from the doc pages at http://www.extjs.com/deploy/ext/examples/form/dynamic.html#, just scroll the page down and try to use the calendar control. It's pretty painful.

[Edit] Oh. Apparently this only manifests in Firefox....

mystix
25 Apr 2007, 7:06 PM
yeah it's a firefox thing.. i've been ignoring that for quite a long time though... anyone with any reason why this might be happening?

Animal
25 Apr 2007, 11:58 PM
It's because the button is an <a href="#">

DatePicker.js lines 188-189 should be



new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {handler: this.showPrevMonth, scope: this, preventDefault: true, stopDefault: true});
new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {handler: this.showNextMonth, scope: this, preventDefault: true, stopDefault: true});

mystix
26 Apr 2007, 12:49 AM
neat one Animal. thanks for the tip :)

RobbyRacoon
26 Apr 2007, 9:15 PM
It's because the button is an <a href="#">

DatePicker.js lines 188-189 should be



new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {handler: this.showPrevMonth, scope: this, preventDefault: true, stopDefault: true});
new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {handler: this.showNextMonth, scope: this, preventDefault: true, stopDefault: true});


Yes indeed, thank you for that tip!

mystix
1 May 2007, 4:07 AM
[bump]
Animal's fix seems to be missing from 1.0.1 final

Animal
1 May 2007, 5:25 AM
I didn't report it. I don't think Jack has time to keep watch on all the suggestions posted here...

Anyone want to post it as a bug with the attached fix?

mystix
1 May 2007, 6:37 AM
ok @Animal, i've reported it here (http://extjs.com/forum/showthread.php?t=5556).