# How to bind a date to an element attribute in template

**URL:** <https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507>\
**Category:** Uncategorized\
**Created:** [October 16, 2014, 2:16pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507 "2014-10-16T14:16:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hourback](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hourback/32/18025_2.png) [@hourback](https://discuss.emberjs.com/u/hourback)\
**Post date:** [October 16, 2014, 2:16pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507/1 "2014-10-16T14:16:09Z")

</div>

(Maybe this is an Ember.data issue.)

I’m trying this:

```
<dt>Downtime Begin</dt><dd {{bind-attr title=downtime_date_begin}}>{{format-date downtime_date_begin}}</dd>

```

And I’m getting this:

```
Uncaught Error: Assertion Failed: Attributes must be numbers, strings or booleans, not Tue Dec 31 2013 18:00:00 GMT-0600 (Central Standard Time) 

```

I think I understand the explanation, that the value I’m trying to bind to the attribute is ineligible for such a use. However, I don’t know what the alternative is. Maybe create a computed property in the controller and then bind that computed property to the element?

TIA!

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 16, 2014, 2:32pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507/2 "2014-10-16T14:32:20Z")

</div>

Perhaps use a handlebars helper. Just like `{{format-date date}}`

[https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs](https://github.com/broerse/ember-cli-blog/blob/master/app/templates/post.hbs)

> <https://github.com/broerse/ember-cli-blog/blob/master/app/helpers/format-date.js>

---

<div class="post-metadata">

**Author:** ![hourback](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hourback/32/18025_2.png) [@hourback](https://discuss.emberjs.com/u/hourback)\
**Post date:** [October 16, 2014, 3:20pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507/3 "2014-10-16T15:20:05Z")

</div>

Thank you, @broerse !

I was trying to modify an attribute of an element (in this case the `title` attribute of the DD element). It doesn’t appear that your code does that, but maybe I’m missing something. Is there a way to apply arbitrary values (i.e., regardless of data type) to an element’s attribute without using a custom helper to create the element?

---

<div class="post-metadata">

**Author:** ![rainerfrey](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@rainerfrey](https://discuss.emberjs.com/u/rainerfrey)\
**Post date:** [October 16, 2014, 3:51pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507/4 "2014-10-16T15:51:45Z")

</div>

As HTML attributes need to be valid syntax, it seems like the bind-attr helper doesn’t attempt to sanitize the rendering of arbitrary data, but expects to receive only simple data types. You could use a computed property that renders the original date property as string, e.g. with moment.js

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [October 16, 2014, 5:29pm UTC](https://discuss.emberjs.com/t/how-to-bind-a-date-to-an-element-attribute-in-template/6507/5 "2014-10-16T17:29:52Z")

</div>

I overlooked but yes @rainerfrey is right bind-attr attributes must be numbers, strings or booleans.

See also:

> <https://stackoverflow.com/questions/18780802/apply-function-inside-bindattr>