Vuejs是否能够将数据字段合并为一个字段

Question

我目前在vue应用程序中有一个日期时间字段。我想把它拆分，但这意味着必须把它也拆分到我的数据库中，我对此不感兴趣。我仍然想在数据库表中保留datetime列。

所以我的想法是让它像3个独立的字段：日期时间，日期和时间。当用户输入了日期和时间时，这些可以合并到日期时间字段中。在Python中，您可以执行以下操作：datetime.datetime.combine( date, time )

Vue中有类似的方法吗？或者有更好的方法来解决这个问题吗？

<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('check in time')">
<time-picker v-model="guest.checkInDateTime"  />
</b-form-group>
</b-col>
</b-form-row>
<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('check in date')">
<date-picker v-model="guest.checkInDateTime"  />
</b-form-group>
</b-col>
</b-form-row>
<b-form-row>
<b-col lg="6">
<b-form-group :label="$t('check in time and date')">
<date-time-picker v-model="guest.checkInDateTime"
:format="format"
:show-second="false"
type="datetime"/>
</b-form-group>
</b-col>
</b-form-row>

Answer 1

在Javascript中处理日期可能会有细微差别。在Javascript中，假设您同时具有date值和time值，您可以很容易地将它们组合为html日期选择器使用的日期字符串，如下所示：

const date = '2022-08-10' // string returned from date input
const time = '15:00:00' // string returned form time input
const checkInDateTime = date + 'T' + time // ISO String

如果您从Date开始，并希望将其分解为date值和time值，那么使用字符串操作几乎比使用Date obj更容易，除非您使用的是像dayjs这样的辅助库。

示例：

// Assuming we have a date in ISO String format YYYY-MM-DDTHH:mm:ss
const dateFromString = dateValueFromDB.split('T')[0]
const timeFromString = dateValueFromDB.split('T')[1]

// using Date obj
const d = new Date(dateValueFromDB);
const dateFromObj = `${d.getFullYear()}-${('' + (d.getMonth() + 1)).padStart(2, '0')}-${('' + date.getDate()).padStart(2, '0')}`
const timeFromObj = `${d.getHours()}:${('' + d.getMinutes()).padStart(2,'0')}:${('' + d.getSeconds()).padStart(2,'0')}`
// using dayjs library
const dateFromDayjs = dayjs(dateValueFromDB).format('YYYY-MM-DD')
const timeFromDayjs = dayjs(dateValueFromDB).format('HH:mm:ss')

现在回答你最初的问题。一旦我们知道如何在Vue.js中获得正确的值，我们就可以使用计算属性和自定义setter轻松地获取和设置这些日期值。

<script>
export default {
data() {
return {
guest: {
checkInDateTime: '2022-09-10 15:00:00' // timestamp returned from database
}
}
},
computed: {
time: {
get() {
return dayjs( this.guest.checkInDateTime ).format('HH:mm:ss')
},
set(val) {
this.guest.checkInDateTime = this.date + 'T' + val
}
},
date: {
get() {
return dayjs(this.guest.checkInDateTime).format('YYYY-MM-DD')
},
set(val) {
this.guest.checkInDateTime = val + 'T' + this.time
}
}
}
}
</script>

这是html:

<template>
<div class="datetime-pickers">
<p>date: <input type="date" v-model="date" /></p>
<p>time: <input type="time" v-model="time" /></p>
<p>checkInDateTime: <input type="datetime-local" v-model="guest.checkInDateTime" /></p>
</div>
</template>

当设置了这三个值中的任何一个时，其他两个值将相应地更新。这里有一个CodePen显示了这一点：

https://codepen.io/ryanhightower/pen/ExLPobY?editors=1010