# Handlebar Bound Helper : setter

**URL:** <https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065>\
**Category:** Uncategorized\
**Created:** [February 4, 2014, 6:40pm UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065 "2014-02-04T18:40:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 4, 2014, 6:40pm UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065/1 "2014-02-04T18:40:02Z")

</div>

I made a very basic helper to render a `<input type="date" />` with a formatted date.

It renders fine, but when I change the date, the supposedly bound value is not updated.

Here’s a [fiddle](http://jsfiddle.net/Manumie/W9DVf/1/) to demonstrate my problem.

---

<div class="post-metadata">

**Author:** ![midd](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/midd/32/196_2.png) [@midd](https://discuss.emberjs.com/u/midd)\
**Post date:** [February 4, 2014, 9:43pm UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065/2 "2014-02-04T21:43:21Z")

</div>

I think, you just created markup whithout any bindings. But you’re on the right way. You can use custom components or views. See this article [http://emberjs.com/guides/components/wrapping-content-in-a-component](http://emberjs.com/guides/components/wrapping-content-in-a-component).

---

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 5, 2014, 11:14am UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065/3 "2014-02-05T11:14:20Z")

</div>

Thanks @midd for your answer. So I’m trying with a component (see [Fiddle](http://jsfiddle.net/Manumie/uRwp6/)).

The value of the input is set correctly, but it can’t figure how to make it work the other way around, that is update the bound date when you select another date in the datepicker

Here’s my component :

```nohighlight
// Template
<script type="text/x-handlebars" data-template-name="components/date-picker">
    <input type="date" class="form-control" {{bind-attr value=value}}/>
</script>

// JS
App.DatePickerComponent = Em.Component.extend({
    attributeBindings: ['value'],
    
    value: function(key, value) {
        var date = this.get('date'),
            format = this.get('format') || 'YYYY-MM-DD';
        
        if ( value ) {
            this.set('date', moment(value).toISOString());
            return value;
        } else {
            return moment(date).format(format);
        }
    }.property('date')
});

```

From what I understand, the `attributeBindings` indicates that the component’s `value` property is bound to the template’s `value` attribute.  
Is that correct ?  
And then is the `{{bind-attr value=value}}` necessary ?  
Should I have an observer on `value` in order to update `date` when `value` changes ?

---

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 5, 2014, 1:46pm UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065/4 "2014-02-05T13:46:13Z")

</div>

I solved my problem !

I ended up with a view that renders the input date (no need for a template) :  
`{{view 'date_picker' dateBinding=myDate}}`

Here’s a [working Fiddle](http://jsfiddle.net/Manumie/376zW/) !

I had a hard time with the binding, because it appears that `MyView.value` is not bound to the input `value` attribute, although I set `attributeBindings` in my view.

Therefore, it is useless to set an observer on `value`. Or to use the `value` computed property as a setter.

I had to fetch the input’s actual value with jQuery `$().val()` and handle the `change` event in my view, so it would update my `date` property which is bound to the controller’s `myDate` property.

Edit: this was probably the issue with the component… Guess I’ll have to try that.

Maybe there’s a better way ?

---

<div class="post-metadata">

**Author:** ![Manumie](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@Manumie](https://discuss.emberjs.com/u/Manumie)\
**Post date:** [February 5, 2014, 3:10pm UTC](https://discuss.emberjs.com/t/handlebar-bound-helper-setter/4065/5 "2014-02-05T15:10:41Z")

</div>

> [@Manumie](#):
>
> Edit: this was probably the issue with the component… Guess I’ll have to try that.

That was it. Here’s a [working Fiddle](http://jsfiddle.net/Manumie/uRwp6/1/) for the Date Picker Component.

Hope it helps.