我需要更改日期选择器值的类型,它应该返回日期类型的值而不是字符串 https://prnt.sc/r6vr3g 。但我不知道怎样才能做到。 有人可以帮助我吗?
这里是代码:
<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>
这是日期选择器组件的代码,之后是使用该组件的示例。
我编辑了代码,因为我更改了组件。现在我有另一个错误,在输入字段中显示消息“无效日期”,在控制台中我收到此错误“ Prop “值”失败。预期字符串值为“无效日期”,得到日期”
最佳答案
在发射之前格式化发射对象
<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>
根据您的需要在 formatDate 函数中格式化您的日期。 希望这对您有帮助,
关于vue.js - VueJS 将日期值设置为 Date 而不是 String,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60375978/