vue 中 ele ui DateTimePicker 日期时间选择器给默认当前时间并且格式化传给后端,给出多个示例
时间: 2024-03-01 18:51:04 浏览: 113
好的,下面给出两个示例,分别是使用 `axios` 和 `fetch` 发送请求时,将格式化后的日期时间字符串作为参数传递给后端。
### 示例 1:使用 axios 发送请求
使用 axios 发送请求时,可以在 `params` 或 `data` 中传递格式化后的日期时间字符串。以下代码将默认值设置为当前时间,格式化后的日期时间字符串为 `YYYY-MM-DD HH:mm:ss`,并在提交表单时将其作为参数传递给后端。
```html
<template>
<div>
<el-form :model="form" ref="form" label-width="100px">
<el-form-item label="日期时间">
<el-date-picker
v-model="form.datetime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:default-value="new Date()"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
form: {
datetime: '',
},
};
},
methods: {
submitForm() {
const params = {
datetime: this.form.datetime,
};
axios.post('/api/submit', params);
},
},
};
</script>
```
在上述代码中,`submitForm` 方法通过 `axios.post` 方法向后端发送 POST 请求,并将格式化后的日期时间字符串作为参数传递给后端。
### 示例 2:使用 fetch 发送请求
使用 fetch 发送请求时,可以在 `FormData` 中添加格式化后的日期时间字符串。以下代码将默认值设置为当前时间,格式化后的日期时间字符串为 `YYYY-MM-DD HH:mm:ss`,并在提交表单时将其作为参数传递给后端。
```html
<template>
<div>
<el-form :model="form" ref="form" label-width="100px">
<el-form-item label="日期时间">
<el-date-picker
v-model="form.datetime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:default-value="new Date()"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
datetime: '',
},
};
},
methods: {
submitForm() {
const formData = new FormData();
formData.append('datetime', this.form.datetime);
fetch('/api/submit', {
method: 'POST',
body: formData,
});
},
},
};
</script>
```
在上述代码中,`submitForm` 方法通过 `fetch` 方法向后端发送 POST 请求,并将格式化后的日期时间字符串添加到 `FormData` 中作为参数传递给后端。
阅读全文