DatePicker improvements

[jack.slocum]

Devol and others,

I implemented the requested feature of limiting selections to dates within the min/max dates specified for the DateEditor. I think it works well and looks pretty good too.

While I was at it I also added highlight for the selected date and today.

You may need to refresh your browser to pick up the files.

Jack

[devol]

The only feature missing now for me at least, is the ability to restrict days. For instance, I only want folks to be able to select start dates on a monday and end dates on a sunday to match up with commercial work weeks.

[Animal]

A great feature to add to the DatePicker, would be to enable it to optionally set a time of day too.

A lot of applications require a Datetime to be input to represent the actual point in time at which an event ocurred. For example, in our app domain, flight departure.

Rather than have 2 inputs, I'd like it to be wrapped up, and have the displayed data formatted according to locale.

ie DD-MMM-YY hh:mm[:ss] for us.

[jack.slocum]

Animal,

DateTime in the same field is a common problem. I haven't found any definitive pattern for the best implementation. Have you seen a nice DatePicker with a time selector built-in? I have seen one or two but they were hideous.

The usual way I have seen this implemented is with two fields like Microsoft Outlook. I do have a TimePicker editor in the works that looks almost identical to Microsoft's but also supports real-time validation and other features like the rest of the editors.

Don't take this the wrong way, a Date+Time editor is great idea, I just need to see a good implementation that I can copy. I don't have any of my own ideas for one, if you know what I mean.

[Animal]

I know what you mean. Whats the best way to go about presenting an inuitive, convenient user experience?

One way would be with seperate, typeable input fields for hours, minutes and optionally seconds, but that then required you to tab between them.

I think the best is one input field into which you can type the time, possibly without a colon, so

"1315" means 13:15

Some would be ambiguous, but you'd have to make assumptions, so

"101" would be 1:01.

Onchange would parse the value, and re-fill the field with a formatted time, and set the Date object in the DateTimePicker accordingly.

Possibly, you could add small arrow buttons "<<" for hours and "<" for minutes to the left, and ">" and ">>" buttons to the right to allow mouse-only field manipulation. Or perhaps those buttons should be lined up above the input field.

[jack.slocum]

Exactly. The solution I use for this at work looks like this.

http://www.jackslocum.com/blog/images/datetime.gif

Two fields in the same column. This isn't an overlay editor though, it's fields rendered into the grid on the server and then client-side code which displays the list and parses any manually input time. The two fields operate completely independent of each other and then are put back together on the server.

Something like this would be possible by extending the DateEditor and adding in a time picker field. But the two pickers/text fields would operate independently and combine to a date when both are set. It's hard to explain. It would be really tricky though, and probably time consuming.

I think for the first release of editing there will be two separate editors for Date and Time and then after I hit the remote dataset code I will come back and we can revisit. Sound good?

[Animal]

http://www.jackslocum.com/blog/images/datetime.gif


That might not be granular enough for a logistics app, we'd probably need 5 minute increments which means a select/combobox would be too cumbersome.

Something like this would be possible by extending the DateEditor and adding in a time picker field. But the two pickers/text fields would operate independently and combine to a date when both are set. It's hard to explain. It would be really tricky though, and probably time consuming.


This is the kind of thing I had in mind. Any change to any field in the DateTimePicker would update the DateTimePicker's result Date object.

I think for the first release of editing there will be two separate editors for Date and Time and then after I hit the remote dataset code I will come back and we can revisit. Sound good?

Sound good. I'll be interested to see how you solve remote datasets.

I have my AspicioDataModel which is a combined ColumnModel/DataModel. It subscribes to the GridView's onScroll, and when the list is reaching the end, pulls new data from the server as needed using DWR to communicate with an EntityLister object stored in the HttpSession.

The onScroll handler just calls fireRowsInserted() to inform the Grid that it needs to update itself.

This EntityLister basically just wraps a Hibernate ScrollableList (which itself wraps a JDBC ResultSet), and returns the info needed by the Grid.

[jack.slocum]

It's actually not a select box. It's an editable textfield with a floating select box picker when the arrow is clicked. That means it has the text editor you suggested, and a picker as well. The increment of the picker would be configurable and since it's shared by all cells in the column instead of repeating, performance isn't really an issue. If I had to do 5 minute intervals I'd probably set the picker at 15 min intervals so it doesn't get too many options and times more granular they'd have to type it in.

I am thinking about adding keyboard support to the date field and this time field as well. For example, without launching the picker, shift+left/right keys would increment/decrement the time by minutes and shift+up/down would do hours. The mouse wheel would quickly increment/decrement the time or date. What do you think of that? The shift key is required since the grid already uses the arrow keys to navigate cells.

My idea for the remote datasets requires an overall record count be available. I will extend the GridView with a RemoteGridView that will auto size the scrollable panel based on the full record count. This way the scrollbar reflects the number of records. The rows in the RemoteGridView will be positioned absolute, this way some can be there and some can be missing. I will also create a controller to attach to the onScroll and use the YAHOO.ext.util.DelayedTask object to buffer the scroll events until they slow down or stop and then call to the data model to load data. I will be adding a standard footer to the RemoteGridView that will display current position in the recordset and status of loading. In standard paging mode it will provide the links for navigating the dataset.

What do you think of those ideas?

What about overriding the datamodel to support datetime entries? You could virtualize your datetime column into two columns and squeeze it back together on update. It seems like that would be the easiest way to go. Just hook update to write back to a single sell from both rows.

[jack.slocum]

That's not a bad idea. A bit of work, but it would solve the problem. You could also assign the same data entry to 2 columns, and use a format function so one displays the date and one displays the time. Then add a post processor function (dataModel.addPostProcessor) on the time column so it updates the date cell as well and vice-versa.

There's a bunch of ways to work around it but they all take a bit of coding.

[devol]

Thanks! Stupid logging me out website...

[Animal]

It's actually not a select box. It's an editable textfield with a floating select box picker when the arrow is clicked. That means it has the text editor you suggested, and a picker as well. The increment of the picker would be configurable and since it's shared by all cells in the column instead of repeating, performance isn't really an issue. If I had to do 5 minute intervals I'd probably set the picker at 15 min intervals so it doesn't get too many options and times more granular they'd have to type it in.

I am thinking about adding keyboard support to the date field and this time field as well. For example, without launching the picker, shift+left/right keys would increment/decrement the time by minutes and shift+up/down would do hours. The mouse wheel would quickly increment/decrement the time or date. What do you think of that? The shift key is required since the grid already uses the arrow keys to navigate cells.

My idea for the remote datasets requires an overall record count be available. I will extend the GridView with a RemoteGridView that will auto size the scrollable panel based on the full record count. This way the scrollbar reflects the number of records. The rows in the RemoteGridView will be positioned absolute, this way some can be there and some can be missing. I will also create a controller to attach to the onScroll and use the YAHOO.ext.util.DelayedTask object to buffer the scroll events until they slow down or stop and then call to the data model to load data. I will be adding a standard footer to the RemoteGridView that will display current position in the recordset and status of loading. In standard paging mode it will provide the links for navigating the dataset.

What do you think of those ideas?

So, I can still keep my AspicioDataModel, but just in the Grid constrructor, specify that it's remote data, and the view will monitor scrolling and call my DataModel as and when it needs to?

Good, apart from when my dataset is 45000 rows. That would create an ENORMOUS ygrid-body, and then sparsely populate it as I drag the thumbwheel quickly down to the bottom.

I guess though, if the user specifies search criteria that return 45000 rows then their mileage may vary! It's up to them to ask for data in a controlled way!

[mcrusty]

Or any suggestions on customizing the 1.0 date picker to include the ability to set Time as well?

thanks,
Mike

[cage]

This was something I used a year or two ago for this very thing:

http://www.calendarxp.net/tt_pop.shtml

(Click in the input field of the DateTime Demo example item)

Worked quite well and you can set the time increment via a config variable.

[johnbauer]

We have put this SWT widget in a couple of apps and it was one of the controls that all the users liked.

http://www.eclipse.org/nebula/widgets/cdatetime/images/CDateTime_simple_gtk.png

http://www.eclipse.org/nebula/widgets/cdatetime/cdatetime.php

[JorisA]

I'm also looking for this feature, the clock looks nice, but a think the one cage mentioned would be more practical. I think best would be to have an option on the datepicker that will show the time fields.

btw jack, ext 2.0 rules :)