255668 - Time picker only displays hours in 24 hours time format

Status: RESOLVED FIXED

(Calendar :: General, defect)

Description

[Mark Carson]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040803
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.2) Gecko/20040803

Windows 2000, 12 hour (AM/PM) local time format on client PC.
Sunbird time picker only displays hours in 24 hour format.
Also display should have minutes displayed in cross tabulated order. See
attachments for recommended format changes.

Reproducible: Always
Steps to Reproduce:
1. Select "New Event"
2. Click clock icon (time picker)
3. Popup time picker always displays hours in 24 hour format. 
4. After time selection, the field in the New Event dialog displays the selected
time in 12 hour format. The popup time picker has an inconsistent format from
the dialog which invokes it.

Actual Results:  
Time, in the correct format (12 hour AM/PM), is filled into the specified field
in the New Event dialog.

Expected Results:  
Display hours in the time picker popup in the same format as the invoking
dialog. If Sunbird can not determine the local time format preference on the
client machine, then there should be a General Option to allow users to specify
12 or 24 hour time format and then apply the selected format throughout the
application.

Refer to the following screenshots of the current time picker and recommended
enhancements in both collapsed (5 minute) and expanded (1 minute) selection
intervals.

<img src="http://markcarson.com/images/Minutes-Less-Current.png">
<img src="http://markcarson.com/images/Minutes-More-Current.png">
<img src="http://markcarson.com/images/Minutes-Less-12.png">
<img src="http://markcarson.com/images/Minutes-Less-24.png">
<img src="http://markcarson.com/images/Minutes-More-12.png">
<img src="http://markcarson.com/images/Minutes-More-24.png">

Comment 1

[Mark Carson]

Attachment: Existing 24 hour only time picker

Comment 2

[Mark Carson]

Attachment: Recommended 12 hour format time picker

Comment 3

[Mark Carson]

Attachment: Recommended 24 hour format time picker

Comment 4

[Martin Bagge / brother]

Are the terms AM and PM really used in 24hour-countries? 
(here in sweden we don't use them and those labels might confuse swedes, but
it's not that many swedes around, if other countries make use of them I think
the enhancement could be worth it)

Comment 5

[Simon Paquet [:sipaq]]

This is no enhancement. It is a valid bug.

Even though I don't like the approach of putting the AM and PM into the
24-hour-timepicker. Just leave that out.

Comment 6

[Mark Carson]

I have no strong feeling regarding "AM" and "PM" when 24 hour format is
displayed. It if is inappropriate to show AM/PM in the mode, fine, don't display
it. The purpose of this bug report is that currently, only 24 hour displays is
supported. There is no support for 12 hour with AM/PM notation when that is the
localization time format. The attached image files were only suggestions for
improvement.

Comment 7

[gekacheka]

*** Bug 260571 has been marked as a duplicate of this bug. ***

Comment 8

[Matthew (lilmatt) Willis]

Reassigning all automatically assigned bugs from Mostafa to nobody@m.o

Bugspam filter: TorontoMostafaMove

Comment 9

[Pete]

Shouldn't the time picker be modeled after every single other application time picker out there?  Usually it's a list from 12am to 12 midnight....how does something like Outlook work in a 24 hour locale?  Could this be set up as an application option?  I don't like either of the mockups for the AM/PM, either.  Selecting an hour, and then selecting a minute in a grid format is awkward.  It should be a drop down list style I think.  

Comment 10

[Bas van den Bosch]

Pete, in 24-hour countries no AM/PM is used to answer your first question. Apart from that I agree, it would be nice to have AM/PM like comment 3 or have this as an option. 

Comment 11

[Pete]

I agree, it should respect 24-hour countries which wouldn't have a use for the AM/PM method.  It just seemed when I use the calendar plugin, that the time picking interface is completely different than every other app I've used before.  How do things like Outlook or Palm's Desktop software handle selecting times for 12-hour countries vs. 24-hour countries?

Comment 12

[Kyle K.]

Attachment: Outlook date/time picker collapsed

This is a snapshot of the date/time picker from the calendar app in Outlook 2007.

Comment 13

[Kyle K.]

Attachment: Outlook date/time picker "Start" expanded

Outlook 2007 date/time picker with the time select box expanded

Comment 14

[Kyle K.]

Attachment: Outlook date/time picker "End" expanded

Comment 15

[Kyle K.]

Attachment: Outlook date/time picker 24-hour expanded

There was not an Outlook specific setting for 12/24 hour formatting of times.  I had to change the setting on my computer via "Control Panel -> Regional and Language Options -> Customize -> Time" to see this in Outlook.

Comment 16

[Gary Kwong [:gkw] [:nth10sd] (NOT official MoCo now)]

Attachment: current status

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13pre) Gecko/20080224 Calendar/0.8pre

Here is a screenshot of the timepicker in the 20080224 0.8pre nightly.

Comment 17

[Mark Carson]

Regarding comment #16 from Gary Kwong,

It's still wrong. Read the initial report. The dialog shows AM/PM but the picker shows 24 hour time. This is inconsistent. 

Once again, we need (via whatever means) the two displays to be consistent. The best solution would be for 24 hours display in both if configured that way and 12 hour with AM/PM if configured that way.

Whether the configuration is via an operating system preference or via a Sunbird option is not the point. We should support localization whenever possible and even if we don't do that we should have consistency between displays.

Comment 18

[Decathlon]

Attachment: patch - v1

This patch changes the timepicker's hours grid to the 12 hours format when the time is displayed in that format in Lightning.

For the UI (see the next screenshot) I've changed the labels for the hours and added a column with the strings AM/PM in the locale time settings.
Does it needs UI review?

Comment 19

[Decathlon]

Attachment: patch - v1

I've attached the wrong file, sorry.

This is the right one ;)

Comment 20

[Decathlon]

Attachment: timepicker with different AM/PM locales

Comment 21

[Philipp Kewisch [:Fallen][📱📆]]

Comment on attachment 822825 [details]
timepicker with different AM/PM locales

Yes, this should get UI review of some form. Personally, I think it would be a good idea to make the horizontal border between the AM row and PM row a little more obvious, either by making it thicker or adding some padding/margin. I would only do this for the AM/PM case though.

I also think the vertical border between the timeslots and the AM/PM should be more obvious (in the same manner, margin/padding/border). I could also imagine using another color to make it clear that AM/PM is selected.

I haven't tried the patch, but when 10am is selected, does clicking on PM change the selection to 10pm? Also, any specific reason you put 12 at the beginning?

Comment 22

[Philipp Kewisch [:Fallen][📱📆]]

Thanks for looking into this one, I think its very important for 12hr locales!

Comment 23

[Richard Marti (:Paenglab)]

Comment on attachment 822825 [details]
timepicker with different AM/PM locales

I like how it is looking. ui-r+ with two things Philipp proposed:

(In reply to Philipp Kewisch [:Fallen] from comment #21)
> Comment on attachment 822825 [details]
> timepicker with different AM/PM locales
> 
> Yes, this should get UI review of some form. Personally, I think it would be
> a good idea to make the horizontal border between the AM row and PM row a
> little more obvious, either by making it thicker or adding some
> padding/margin. I would only do this for the AM/PM case though.

Adding a 2px border between the rows sounds and looks (see my attachment in next comment) good. A 1px padding (or more) would the two rows to much separate, almost like the separation between the hours and minutes.

> I also think the vertical border between the timeslots and the AM/PM should
> be more obvious (in the same manner, margin/padding/border). I could also
> imagine using another color to make it clear that AM/PM is selected.

Again a 2px border between looks good and shows together with the different background color it's only a label. I think a additional color could make the picker anxious and the user could also be irritated about the changing color.

> I haven't tried the patch, but when 10am is selected, does clicking on PM
> change the selection to 10pm? Also, any specific reason you put 12 at the
> beginning?

I think making the AM/PM clickable isn't needed as the picker is small enough to click in the other row. The 12 is at the beginning because midnight is 12 AM and put it at the end of the AM row would be strange when the following hour (1 AM) is at the beginning.

Comment 24

[Richard Marti (:Paenglab)]

Attachment: time picker

This is how the picker would look with the 2px borders.

Comment 25

[Decathlon]

Attachment: some slightly different look for the daypicker

(In reply to Philipp Kewisch [:Fallen] from comment #21)

> I haven't tried the patch, but when 10am is selected, does clicking on PM
> change the selection to 10pm? Also, any specific reason you put 12 at the
> beginning?

AM and PM are simply labels and are not clickable (I've chosen a different background color compared to the clickable hours for this reason) otherwise it would need more click to select the time compared to the 24 hours format, one click for the hour and another for the AM/PM prefix/suffix.

I put 12 at the beginning because 12 is equivalent to 0 in the 24-hours format, that is the beginning of the day, the time when the day starts and the time when the second half-day starts by switching form AM to PM.
The first minute of the day is 12:01 AM and 1:01 AM is the 61st minute so it seems to me that 12 should be placed before 1 but I have to admit that I'm not used to use such format, an opinion by someone who uses it would be well-accepted.

I was doing some mock-up while Richard posted (see the attachment).

Comment 26

[Philipp Kewisch [:Fallen][📱📆]]

(In reply to Decathlon from comment #25)
> Created attachment 823485 [details]
> some slightly different look for the daypicker
> 
> (In reply to Philipp Kewisch [:Fallen] from comment #21)
> 
> > I haven't tried the patch, but when 10am is selected, does clicking on PM
> > change the selection to 10pm? Also, any specific reason you put 12 at the
> > beginning?
> 
> AM and PM are simply labels and are not clickable (I've chosen a different
> background color compared to the clickable hours for this reason) otherwise
> it would need more click to select the time compared to the 24 hours format,
> one click for the hour and another for the AM/PM prefix/suffix.

I agree, the normal way to handle it would be to just click the time. I just fear it might look clickable and the user might be surprised it doesn't work when he is coming from the situation "lets see...10am...oh no wait, its 10 *pm* <click on PM>". I don't mind though, whatever you think is best :)


> 
> I put 12 at the beginning because 12 is equivalent to 0 in the 24-hours
> format, that is the beginning of the day, the time when the day starts and
> the time when the second half-day starts by switching form AM to PM.
> The first minute of the day is 12:01 AM and 1:01 AM is the 61st minute so it
> seems to me that 12 should be placed before 1 but I have to admit that I'm
> not used to use such format, an opinion by someone who uses it would be
> well-accepted.
Yes, someone that uses it would be nice. I'm used to 24hrs, so I'm not very helpful there.


> 
> I was doing some mock-up while Richard posted (see the attachment).

I like the double-line border between the numbers and AM/PM. What about this?

Horizontal: single-line, 2px border like in Richard's mockup
Vertical: double-line border like in Decathlon's mockup between AM/PM

Comment 27

[Richard Marti (:Paenglab)]

Attachment: Philipp's proposal from comment 25

(In reply to Philipp Kewisch [:Fallen] from comment #26)
> (In reply to Decathlon from comment #25)
> > Created attachment 823485 [details]
> > I was doing some mock-up while Richard posted (see the attachment).
> 
> I like the double-line border between the numbers and AM/PM. What about this?
> 
> Horizontal: single-line, 2px border like in Richard's mockup
> Vertical: double-line border like in Decathlon's mockup between AM/PM

I'm not 100% comfortable with this proposal, but I'm Swiss and so okay for a compromise when Decathlon likes this ;)

Comment 28

[John C. Vernaleo]

The lat attachment there (some slightly different look for the daypicker) with the 12 as the first number seems a bit unnautral for someone who has always used 12 hour timekeeping.  It makes sense logically, but still looks odd.

Comment 29

[Matthew Mecca [:mmecca]]

Comment on attachment 822824 [details] [diff] [review]
patch - v1

Review of attachment 822824 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good to me, I think it makes the most sense to start with 12 first as it marks the start of the day. r=mmecca

::: calendar/resources/content/datetimepickers/datetimepickers.xml
@@ +589,5 @@
> +            let amLabel = this.parseTimeRegExp.exec(amTime)[this.ampmIndex] || "AM";
> +            let pmLabel = this.parseTimeRegExp.exec(pmTime)[this.ampmIndex] || "PM";
> +
> +            document.getAnonymousElementByAttribute(this, "anonid", "timepickerGrids")
> +              .changeTo12HoursFormat(amLabel, pmLabel);

minor nit: the second line should indent to align with the dot on the first line.

Comment 30

[Decathlon]

Attachment: patch - v2

I've done changes in order to get the look proposed in comment 26 (attachment 823503 [details]).
Matthew, if you agree I will push this one.

(In reply to John C. Vernaleo from comment #28)
> The lat attachment there (some slightly different look for the daypicker)
> with the 12 as the first number seems a bit unnautral for someone who has
> always used 12 hour timekeeping.  It makes sense logically, but still looks
> odd.

I've also tried a version with the 12 in last position. It looks better, but it also gives strange behaviour, for example clicking on any hour on the right of a given starting hour for the event, you always get a valid ending hour, but when you click on the last right hour (the "12") you get the message of "end date occurs before start date" that gives the impression of an hour placed in a wrong position keeping in count that the flow of the time increase in the direction of the right side.

Comment 31

[Matthew Mecca [:mmecca]]

Comment on attachment 824364 [details] [diff] [review]
patch - v2

Looks good. r=mmecca

Comment 32

[Decathlon]

Pushed to comm-central
https://hg.mozilla.org/comm-central/rev/fd245059ac57