VueJs working with date (typescript) and v-model

Question

In my project I have the following VueJs-Typescript component:

<template>
    <form>
        <input type="text" v-model="myModel.myDate" />
    </form>
</template>
<script lang="ts">
     import { Component, Vue, Prop } from 'vue-property-decorator';

    @Component
    export default class MyComponent extends Vue {
        public myModel : Model = new Model();
        //myModel.myDate is of type Date
    }
</script>

The problem now is, that obvisiously the v-model is not able to bind the value dynamically. Does someone can give me an idea how I can solve the rendering? The target is that to the frontend the date gets rendered as string (for input field) and backwards it gets rendered as date (for object).

Saniya syed qureshi · Accepted Answer · 2019-09-18 09:56:40Z

1

Try initialising it as shown below, Hope it will work.

<template>
    <form>
        <input type="text" v-model="myModel.myDate" />
        {{myModel.myDate}}
    </form>
</template>    

<script lang="ts">
         import { Component, Vue, Prop } from 'vue-property-decorator';

        @Component
        export default class MyComponent extends Vue {
            public myModel =  {
               myDate : new Date()
            }
           created() {
              console.log(this.myModel.myDate)
           }
        }
    </script>

answered Sep 18, 2019 at 9:56

Saniya syed qureshi

3,1973 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scornwell · Accepted Answer · 2019-09-18 21:23:42Z

0

You could just add a computed property which returns the filtered date for you. V-bind to the computed property, this will also fix the initialization problem.

Computed properties in Typescript and Vue is pretty easy just type get before the function name as such

    // this is a computed property
    get totalRows() {
        return this.SearchResultItems.length;
    }

answered Sep 18, 2019 at 21:23

Scornwell

6057 silver badges19 bronze badges

Comments

SNO · Accepted Answer · 2019-09-19 05:42:39Z

Ok, I think I found a working solution..., not sure if it will solve all problems..

<template>
    <form>
         <input type="text" 
                 :value="myModel.myDate | datetime('Q.YYYY')" 
                 @blur="myModel.myDate = parseDate($event, 'Q.YYYY', myModel.myDate);"
                 pattern="^([1-4].[1-9][0-9][0-9][0-9])" />
    </form>
</template>
<script lang="ts">
    import { Component, Vue, Prop } from 'vue-property-decorator';
    import moment from 'moment';

    @Component
    export default class MyComponent extends Vue {
        public myModel : Model = new Model();
        //myModel.myDate is of type Date

        parseDate(event:any, format: string, field : any) : Date |undefined {
            field = moment(event.target.value, format).toDate();
            this.$forceUpdate();
            if (field == "Invalid Date") {
                return undefined;
            }
            return moment(event.target.value, format).toDate();
        }
    }
</script>

and then I set up the following filter:

Vue.filter('datetime', function (date: Date, format: string = "DD.MM.YYYY") {
    if (!date) {
        return undefined;
    }
    if (!moment.isDate(date)) {
        return undefined;
    }
    var parsedDate = moment(date);
    var stringDate: string | undefined = parsedDate.format(format);
    if (!stringDate) {
        stringDate = "";
    }
    return stringDate;
});

Collectives™ on Stack Overflow

VueJs working with date (typescript) and v-model

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related