Time

Time notation in EU

The European Committee for Standardization (CEN) and CENELEC have approved ISO 8601 as EN 28601, now known as EN ISO 8601. This standard is mandatory for all member states of CEN and CENELEC to adopt as their national standard without making any changes to it.

                                                        
                                                        
                                                            hh   = two digits of hour (00 through 23) (am/pm NOT allowed)
                                                        mm   = two digits of minute (00 through 59)
                                                        ss   = two digits of second (00 through 59)
                                                        s    = one or more digits representing a decimal fraction of a second
                                                        TZD  = time zone designator (Z or +hh:mm or -hh:mm)
                                                        
                                                            

Time format

Display time in a 24-hour format without seconds or milliseconds for unnecessary precision. Scandinavian countries use this input and output format.

A few recommended test cases to try on time inputs

• 9 -> 09:00
• 09 -> 09:00
• 915 -> 09:15
• 0915 -> 09:15
• 1234 -> 12:34
• 12345 -> error
• 9:15 -> 09:15
• 91:5 -> error
• 1915 -> 19:15
• 9115 -> error
• 19:15 -> 19:15
• 1:915 -> error
• 191:5 -> error
• 19:59 -> 19:59
• 19:60 -> error
• 23:01 -> 23:01
• 24:01 -> error
• (empty) -> error
• a -> error
• 9a -> error
• a9 -> error
• 9am -> error
• 9pm -> error
• 09:00Z -> error
• 09:00 UTC -> error
• +9 -> error
• +09:00 -> error
• 9h59 -> error
• 9h59m -> error

Repeat the test cases above with "." as separator as well.

The following time inputs should result in an error

• hh > 24
• mm > 59
• Any input < 0
• Any input > 4 ciphers or > 5 characters
• Any input with non-numeric characters, except for the optional separators ":" and "."
• Empty input

Time zone

Display dates and times in the user's time zone and use the HTML "time" tag to specify a specific timezone, for example, UTC.

Including the "datetime" attribute in your code allows you to add detailed time and timezone information. Moreover, you can customise the "title" attribute to make it more user-friendly, such as "2023-12-25 00:00 GMT" or "Midnight, Christmas day". When users hover over or tap on this information, it will be visible to them.

Example

                                                        
                                                        
                                                            <p>Santa Claus will arrive on <time datetime="2023-12-25 00:00Z" title="2023-12-25">Christmas Day</time>.</p>
                                                        
                                                            

Relative time and dates

Displaying date and time in a relative format is more useful to users. For instance, showing "Tomorrow" instead of "23-04-25" makes it easier for users to understand that an invoice is due tomorrow.

This technique can be combined with increased details such as "May 1st" or "January 1st, 2018" for dates further in the future.

Another option is to show the relative time until the event, like "1 day left" or "30 days left". Both techniques can combine with the HTML time tag for date information on mouseover or tap.

Related content