<time [dateTime]="'2019-08-09 16:22:20'">8/9/2019</time>
So had to use the html time element today in an Angular component template and ran into this error:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'datetime' since it isn't a known property of 'time'.
Here’s what my template looked like:
<time [datetime]="comment.updated_at">
{{ comment.updated_at }}
</time>
I was baffled, I confirmed on Mozilla Developer Network that the time element has a datetime attribute. Further investigation brought me to this issue in the Angular repository.
There Alexey Zuev explains:
I would say that Angular properly uses time tag.
<time>
tag with datetime attribute should look like:
<time [attr.datetime]="'2019-08-09 16:22:20'">4:22:20 PM</time>
while
<time [dateTime]="'2019-08-09 16:22:20'">4:22:20 PM</time>
So the take-way point here is the difference between the attribute name and the property name as illustrated by Pawel Kozlowski (a comment on the issue mentioned above):
- attribute name is
datetime
: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time - property name (default binding in Angular) is
dateTime
: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTimeElement
So here’s how my template ended up looking:
<time [dateTime]="comment.updated_at">
{{ comment.updated_at }}
</time>
Top comments (0)