I am using HTML <time> element to display the date.I have to display only date-part.From back-end I am getting date "13/07/2016 00:00:00" with HH MM SS.
I used below line to convert date-time to date.
<time class="meta" datetime="DD/MM/YYYY">13/07/2016 00:00:00</time>
But still output is same "13/07/2016 00:00:00".
I was referring :-
HTML time tag - correct date format
I think there is some confusion regarding tag.
According to MDN:
This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar.
In your code, <time class="meta" datetime="DD/MM/YYYY">13/07/2016 00:00:00</time>, the output will not change by format you specify by datetime attribute, because it is meant for machine reading, but the text part of this tag that is 13/07/2016 00:00:00 will be visible on page to humans.
If you want to change format of output of this. I think you should use some sort of javascript to format this value, or for a hackish way, you can just split it by space and use first index for just date.
You are using the <time> tag incorrectly. The datetime attribute should be a valid date with an optional time string and it has no effect on the content of the tag.
A valid usage example:
<p>The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.</p>
What you want to achieve is not possible with HTML only. You either format the date on the backend, or use Javascript.
Related
I have been searching and I saw different ways to use the time tag. For instance:
Last update: <time itemprop="dateModified" datetime="2016-08-15">August 15, 2016</time>
<time itemprop="dateModified" datetime="2016-08-15">Last update: August 15, 2016</time>
I understand that I should use the datetime attribute in a standard way to help machines read it. No doubts about that. But all the information related to time should be inside the tags or only the dates?. In this example, Last update should be inside or outside the time tag?
Although the documentation does not address this question directly, the examples hold only the date related info (in a human readable format) inside the <time> tag.
Also, according to this blog post they point out that although you can put whatever you want inside the tags, it is more common just for it to be a textual human readable representation of what you've got in the datetime attribute.
It's probably a bit more common for the human-readable version to be just a textual representation of the datetime
Following the examples I would update your markup to:
<p>Last update: <time itemprop="dateModified" datetime="2016-08-15">August 15, 2016</time><p>
See the specification:
The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations, as described below.
The datetime attribute may be present. If present, its value must be a representation of the element's contents in a machine-readable format.
2016-08-15 is the machine readable expression of August 15, 2016. It does not express the information Last update:.
Only the human readable version of the time information should be inside the element.
You should be able to use the content of the element and the content of the datetime attribute interchangeably.
I have a list of events, each of which has a start date and an end date and I would like to use the html5 <time> element to make the list semantically richer.
I have found that I can use the datetime attribute to provide a machine-readable time like so:
<time datetime="2015-02-21">my birthday</time>
I have also found that the attribute supports durations like so:
<time datetime="P2D">two days</time>
However, I haven't been able to find what is the correct way to combine the two in a single <time> element to, for example, display an event that begins on the 21st of February and lasts two days.
Can I simply use a date and a duration separated by a space:
<time datetime="2015-02-21 P2D">21.-23. February</time>
Or would the correct way be to use two <time> elements?
<div>
<time datetime="2015-02-21">21.</time>
-
<time datetime="2015-02-23">23.</time>
February
</div>
There does not appear to be a way to combine specific date strings or time strings with a duration string in a single <time> element. The spec suggests using two <time> elements instead:
Code Example:
The time element can be used to encode dates, for example in microformats. The following shows a hypothetical way of encoding an event using a variant on hCalendar that uses the time element:
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2005-10-05">October 5</time> -
<time class="dtend" datetime="2005-10-07">7</time>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
which closely matches the example that you have.
do you want something like this?
<input type="date" min="2015-02-21" max="2015-02-23"/>
<input type="date" min="2015-02-21" max="2015-02-23"/>
February
however, it is not compatible with ie and firefox at presents. You'e better use a js dateSelector plug-in instead.
I ran my html through the w3.org validator. There it mostly complained about bad values for the attribute datetime. But honestly i am uncertain where the problem is. I've followed the lead from this article http://www.brucelawson.co.uk/2012/best-of-time/ . A html line which was marked as an error due to the faulty datetime for the time-zone offset:
<time class="workshops__date" datetime="2014-06-27">27.06.2014 (Fr)</time><time datetime="19:00+2:00">19:00</time>-<time datetime="23:00+2:00">23:00</time>
What would be the semantic correct way which would be accepted by the w3.org validator?
According to the MDN reference:
datetime
This attribute indicates the time and date of the element and must be a valid date with an optional time string.
It also links to a w3.org page that describes the value as being compliant with RFC 3339.
Therefore, I would suggest:
<time datetime="2014-06-27T19:00:00+02:00">19:00</time>
I'm supposed to mark up the opening hours of a company with HTML5 microdata.
After searching on Google and schema.org for a bit i wrote the following code:
<time itemprop="openingHours" datetime="Mo 13:00-17:30"><span class="day">Maandag:</span> <span class="hours">13:00-17:30</span></time>
<time itemprop="openingHours" datetime="Tu 09:00-17:30"><span class="day">Dinsdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="We 09:00-17:30"><span class="day">Woensdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Th 09:00-17:30"><span class="day">Donderdag:</span> <span class="hours">09:00-17:30</span></time>
<time itemprop="openingHours" datetime="Fr 09:00-21:00"><span class="day">Vrijdag:</span> <span class="hours">09:00-21:00</span></time>
<time itemprop="openingHours" datetime="Sa 08:30-15:00"><span class="day">Zaterag:</span> <span class="hours">08:30-15:00</span></time>
When i check the website in with Google's structured data testing tool i see that the structured data is recognized correctly.
The problem is that one of the requirements of this assignment is that it conforms to W3C's HTML validator. For eacht time element i get the following error.
Bad value Mo 13:00-17:30 for attribute datetime on element time: The literal did not satisfy the time-datetime format.
I get why i get this error, what i don't get is how i can specify my opening-hours in a way that they are marked up with HTML5 Microdata and that they are also valid HTML according to the HTML5 validator.
Hope you guys can help me out on this one. :)
Maintainer of the W3C HTML Checker (aka validator) here. I wrote the code that does that check. The value Mo 13:00-17:30 in the question doesn’t conform to the rules in the HTML spec giving the allowed values of datetime.
The value Mo 13:00-17:30 seems to be trying to specify a special time range: A day of the week plus a time range.
But the HTML spec doesn’t allow the value to be in that format. The closest format that it does allow is a ISO8601-format duration string.
A duration string that would be valid: datetime="4h 30m".
That’s about as close as you can get, because in the HTML spec, the rules for specifying a duration are that it must be a single expression of a number of hours+minutes+seconds. So:
an duration expression that specifies a pair of times (as the question has) is not valid
as expression of a duration that specifies a day of the week is not valid
I used data instead of time - works for validator.w3.org as well as for www.google.com/webmasters/tools/richsnippets:
<data itemprop="openingHours" value="Mo-Su 07:00-22:00">7 days a week, 7 am to 22 pm</data>
Thanks to Hixie on freenode#whatwg.
If the datetime format is causing the validation to fail, you could place the hours of operations in the meta tag element:
<meta itemprop="openingHours" content="Mo,Tu 11..." />
<meta itemprop="openingHours" content="We,Th 12..." />
...
According to the specs, the meta element will be valid there if it has the itemprop attribute.
Is it correct this code for displaying a date?
<time class="entry-date" datetime="2010-09-27T10:50:15+00:00" pubdate>27/09/2010</time>
Yup - that's correct. Have a look at this draft spec to see the valid date time strings: http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#global-dates-and-times.
Your time represents 27th September 2010, 3:00pm UTC.
Yes, that is the one you should use according to:
http://www.w3schools.com/html5/html5_reference.asp
The tag defines a time or a
date, or both.
Yes, it's both syntactically and semantically correct:
The time tag should be used to define a date and/or time
The syntax of the datetime attribute is correct and passes W3C:s HTML5 validator
The pubdate attribute is also fine, assuming that the time tag is inside an article tag and that the time tag actually specifies the publication time of the article