VueJS set date value as Date instead of String - vue.js

Question

I need to change type of datepicker value and it should return value as type Date instead of String https://prnt.sc/r6vr3g. But i don't know how can i make it.
Can anyone pls help me?
Here is code:
<template>
<q-input
#focusin="onFocusIn"
:value="value"
#input="e => $emit('input', e.toString())"
#click="alert = true"
>
<q-dialog v-model="alert">
<q-date
:value="value" #input="onInput"
:mask="mask"
/>
</q-dialog>
<script>
import _ from 'lodash'
export default {
props: {
..props
},
data () {
return {
alert: false,
sValue: ''
}
},
..computed
methods: {
onInput (e) {
let dateObj = new Date(e)
this.$emit('input', dateObj)
this.alert = false
},
onFocusIn (e) {
e.target.blur()
}
}
}
</script>
<style type="text/css">
</style>
<div class="col">
<s-datetime-picker v-model="data.dateStart" label="Date Start" required />
{{ data.dateStart }}
</div>
Here is code for datepicker component and after that there si example of using this component.
I've edited code, because i changed component. Now i have another error, in input field it shows message 'Invalid Date' and in console i got this error "failed for prop "value". Expected String with value "Invalid Date", got Date"

Answer 1

Format your emitting object before emit
<template>
<q-datetime-picker
..more properties
:value="value"
#input="formatDate(e)"
/>
</template>
<script>
import _ from 'lodash'
export default {
props: {
...all properties
},
computed: {
sLabel () {
if (!this.required || _.isUndefined(this.label)) return this.label
return this.label + ' *'
},
sRules () {
if (!this.required) return this.rules
let rule = val => { if (val.length === 0) return 'This field is Required' }
if (_.isUndefined(this.rules)) return [ rule ]
return (_.cloneDeep(this.rules)).push(rule)
}
},
formatDate(val){
let dateObj = new Date(val);
this.$emit('input', dateObj);
}
}
</script>
<style type="text/css">
</style>
<div class="col">
<s-datetime-picker v-model="data.dateStart" label="Date Start" required />
{{ data.dateStart }}
</div>
Format your date according to your need in formatDate function.
Hope this helps you,

Answer 2

Just pass the value you are getting as string to new Date it will return a date object.
var dt = "2020-02-13T00:00"; // <-- this is the value you get from date picker
var dtObj = new Date(dt); // <-- this one is date type
Full Vue Code
<template>
<div id="app">
<input type="date" v-model="dateFromField">
<button :click="showDate()">Submit</button>
</div>
</template>
<script>
export default {
name: "App",
data: function() {
return {
dateFromField: Date
};
},
methods: {
showDate() {
console.log(this.dateFromField);
console.log(typeof this.dateFromField);
let newDate = new Date(this.dateFromField);
console.log("conversion");
console.log(newDate);
console.log(typeof newDate);
}
}
};
</script>