CODEWITHSUNDEEP
typescriptvue.jsv-model
SNO
SNO

Reputation: 866

VueJs working with date (typescript) and v-model

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).

Upvotes: 2

Views: 5416

Answers (3)

SNO
SNO

Reputation: 866

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;
});

Upvotes: 0

Scornwell
Scornwell

Reputation: 605

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;
    }

Upvotes: 0

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3147

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>

Upvotes: 1

Related Questions