How can I display value of input type date when edit data on vue component?

Question

My vue component like this :

<template>
    <section>
        ...
        <form-input id="total-sold" name="total-sold" :value="products.total_sold">Total Sold</form-input>
        <form-input id="created-at" type="date" name="created-at" :value="products.created_at">Created At</form-input>
    </section>
</template>

<script>
    export default {
        props: ['products'],
        mounted() {
            console.log(this.products.total_sold) // The result : 46
            console.log(this.products.created_at) // The result : 2018-02-26 09:03:03
        },
    }
</script>

My form-input component vue like this :

<template>
    <div class="form-group">
        <label :for="id" class="control-label" :class="classLabel"><slot></slot></label>
        <input :type="type" :name="name" :id="id" class="form-control" :placeholder="dataPlaceholder" :disabled="disabled" :value="value">
    </div>
</template>

<script>
    export default {
        name: "form-input",
        props: {
            'id': String,
            'name': String,
            'type': {
                type: String,
                default: 'text'
            },
            'disabled': String,
            'dataPlaceholder': {
                type: String,
                default() {
                    return this.$slots.default ? this.$slots.default[0].text : ''
                }
            },
            'value': {
                type: [String, Number]
            }
        },
        data(){
            return {
                classLabel: {'sr-only': !this.$slots.default}
            }
        }
    }
</script>

So on the my first component vue, it will call form-input component vue. I make the component like that. So later that component can be used repeatedly

If the component executed, the input text from total sold display data. The result is 46. But the input text from created at is not display data. Seems it because the type is date

How can I solve this problem?

Answer 1

<input type="date"> expects a value in the form of YYYY-MM-DD, see MDN <input type="date">. You are trying to give it a value of the wrong format: 2018-02-26 09:03:03 which includes a timestamp.

You will need to create a wrapper input component or try an <input> that supports a time timestamp like <input type="datetime-local"> which expects a value in the format: yyyy-MM-ddThh:mm.