2

Schema.org recommends specifying dates and times using the time element with the datetime attribute - see docs e.g.

<time datetime="SOMEISODATETIME">3 April 1955</time>

However Angular 2 only allows binding to properties and it seems that datetime is only an attribute and not a property. Trying to bind as follows ...

<time datetime="{{ myDate | date:'y-MM-dd' }}">{{ myDate | date:'YYYY MM DD' }}</time>

therefore causes errors ...

Unhandled Promise rejection: Template parse errors:
Can't bind to 'datetime' since it isn't a known property of 'time'. ("prop="headline" itemprop="name">{{ newsItem.title }}</h2>
            <time class="published-date" [ERROR ->]

How should I get around this?

Brendan
  • 18,771
  • 17
  • 83
  • 114
  • 2
    Have you tried `[attr.datetime]="..."`? – jonrsharpe Dec 02 '16 at 19:04
  • 3
    Possible duplicate of [How to use Angular 2 extrapolation in html element attributes?](http://stackoverflow.com/questions/36099392/how-to-use-angular-2-extrapolation-in-html-element-attributes) – jonrsharpe Dec 02 '16 at 19:05
  • @jonrsharpe that worked - had completely forgotton about the `attr.XXX` binding syntax. Thanks! – Brendan Dec 02 '16 at 19:15
  • I'm not sure they are duplicates ... they have the same answer but are different questions. If they are too similar however I can accept the duplicate. By this do you mean close, delete or something else? – Brendan Dec 02 '16 at 20:44
  • If they have the same answer, that's what people who find this question will be looking for, surely? Note **your question may already have an answer here**. – jonrsharpe Dec 02 '16 at 20:50
  • Right, my point is though I did my due diligence and searched for an answer (using the error message) and came up empty hence me asking this question - the referred question did not have any error messages and reads like a completely different problem. If I delete this question then someone searching via an error message, like I did, won't find the answer! If this is SO policy then I'll delete but it seems weird since so many varied, distinct questions do have the same ultimate solution ... – Brendan Dec 11 '16 at 22:27
  • I'm not saying you should delete it, I'm saying you should accept the duplicate. It's useful as a signpost, *if that signpost points to the canonical resources*. See https://stackoverflow.blog/2010/11/dr-strangedupe-or-how-i-learned-to-stop-worrying-and-love-duplication/ I find it surprising that someone with 10k rep is unfamiliar with this process. – jonrsharpe Dec 11 '16 at 22:42
  • There is no clear 'accept duplicate' button, just a close button and delete button – Brendan Dec 11 '16 at 22:47
  • Should look like this: http://meta.stackexchange.com/a/250930/248731 – jonrsharpe Dec 11 '16 at 23:29
  • Hmm that did appear at one point but I edited, now it doesn't appear (as spec'ed in the meta post) - I just voted to close myself citing duplicate but the 'accept duplicate' UI hasn't re-appeared - can someone else vote to close citing duplicate? – Brendan Dec 11 '16 at 23:36
  • Yep, that'll have to be it - only one more vote needed. I assumed the OP's vote would be binding even if not via that dialog. – jonrsharpe Dec 11 '16 at 23:44
  • Not sure why peeps are so excited about marking this duplicate. It's a distinct question, even if the answer is similar to or the same as another, different question. For me, the real answer was actually pointed out in the question itself: it's an attribute. Had marking this question duplicate lowered its search rank, it might have taken me longer to be reminded of that fact. I hope people mark this question up, because it was a well-phrased, valuable question that is NOT directly answered elsewhere on SO. The author deserves the points. – ggranum May 19 '17 at 14:11

1 Answers1

3

You should use [attr.datetime]

<time [attr.datetime]="date:'y-MM-dd'">{{ date | date:'dd MMM yyyy' }}</time>

You had the format wrong for the displayed date too. DatePipe docs

Brendan
  • 18,771
  • 17
  • 83
  • 114
J J B
  • 8,540
  • 1
  • 28
  • 42