# How to bind dates

**URL:** <https://discourse.aurelia.io/t/how-to-bind-dates/1512>\
**Category:** Help Requests\
**Created:** [August 8, 2018, 12:30pm UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512 "2018-08-08T12:30:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [August 8, 2018, 12:30pm UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/1 "2018-08-08T12:30:39Z")

</div>

I have a typescript class where one attribute is of type “date”. Now I’m searching for a clean solution to bind the date.

```
export class MyTestClass{
    @bindable mydate: Date;
}

```

Following the template:

```
<template>
    ${typeof(mydate)}
    <input type="text" value.bind="mydate | dateFormat: 'YYYY.Q' />
<template>

```

Referring to the example, the "${typeof(mydate)} always displays “string”. Is there any clever trick to bind that attribute so that the class directly converts the string to “Date” or do I need to do that in seperated steps?

Currently I need to parse all date-Attributes before saving:

`this.MyTestClass.mydate = moment(this.MyTestClass.mydate).toDate();`

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [August 9, 2018, 1:53am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/2 "2018-08-09T01:53:27Z")

</div>

You can use [https://github.com/aurelia-contrib/aurelia-typed-observable-plugin](https://github.com/aurelia-contrib/aurelia-typed-observable-plugin)  
It has a custom `observable` decorator which does automatic conversion.  
Be careful with it though as two-way binding and update on change will not work correctly. You will need to use update on blur.

Or keep doing what you are currently…

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [August 9, 2018, 5:23am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/3 "2018-08-09T05:23:55Z")

</div>

Try [AU+](http://aurelia.plus/) or just [steal the code](https://github.com/Foursails/aurelia-plus/blob/master/src/date-time-value-converter.js).

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [August 9, 2018, 7:20am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/4 "2018-08-09T07:20:11Z")

</div>

@davismj I think you need to extend that into two-way value converter to meet @SNO’s need.

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [August 9, 2018, 8:48am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/5 "2018-08-09T08:48:27Z")

</div>

I’m accepting commissions and PRs.

---

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [August 9, 2018, 8:57am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/6 "2018-08-09T08:57:34Z")

</div>

@davismj  
I guess this doesn’t solve the issue. I already have the following value-converter:

```
export class DateFormatValueConverter {
  toView(value, format) {
    var formatted: string;
    
    if (value == "" || value == undefined) {
      return value;
    }

    formatted = moment(value, ["YYYY.Q", "MM.DD.YYYY", "YYYY.MM.DD", "YYYY.MM", "YYYY.M", "YYYYM"]).format(format);
    if (formatted == "Invalid date") formatted = value;
   
    return formatted;
  }
} 

```

But all the value-converter does is to format the value to a date string. Adding following snippet it does the same:

```
if (!(value instanceof Date)) {
      value = new Date(value);
    }
...
 return date.toLocaleDateString();

```

The binded attribute type is still “string” instead of date. Or am I doing something wrong here?

---

<div class="post-metadata">

**Author:** ![davismj](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davismj/32/267_2.png) [@davismj](https://discourse.aurelia.io/u/davismj)\
**Post date:** [August 9, 2018, 9:14am UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/7 "2018-08-09T09:14:44Z")

</div>

Ah, I see. As CP said, you’ll need a `fromView(dateString, format)` function on the value converter class that converts it back to a `Date`.

---

<div class="post-metadata">

**Author:** ![Malexion](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/malexion/32/188_2.png) [@Malexion](https://discourse.aurelia.io/u/Malexion)\
**Post date:** [August 9, 2018, 4:18pm UTC](https://discourse.aurelia.io/t/how-to-bind-dates/1512/8 "2018-08-09T16:18:16Z")

</div>

Your from view would be pretty simple I’d think.

```javascript
const formats = ["YYYY.Q", "MM.DD.YYYY", "YYYY.MM.DD", "YYYY.MM", "YYYY.M", "YYYYM"];

export class DateFormatValueConverter {

    toView(value, format) {
        // [... stuff and things ...]
    }

    fromView(value, format) {
        return moment(value, formats).toDate();
    }

} 

```