uniapp 获取本机当日日期直接填好并且可选择的表单
时间: 2023-09-09 14:14:07 浏览: 57
以下是一个示例代码,可以在uniapp中获取本机当日日期,并将其填写到表单中。同时,表单的日期选择器可以选择任意日期。
```
<template>
<view class="container">
<form>
<view class="form-item">
<view class="form-label">日期</view>
<view class="form-input">
<picker mode="date" :value="date" @change="onChangeDate"></picker>
</view>
</view>
<view class="form-item">
<view class="form-label">姓名</view>
<view class="form-input">
<input type="text" v-model="name" />
</view>
</view>
<view class="form-item">
<view class="form-label">电话</view>
<view class="form-input">
<input type="text" v-model="phone" />
</view>
</view>
<view class="form-item">
<button type="submit" class="submit-button" @click.prevent="onSubmit">提交</button>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
phone: '',
date: '',
}
},
mounted() {
this.setDate()
},
methods: {
setDate() {
const now = new Date()
const year = now.getFullYear()
const month = (now.getMonth() + 1).toString().padStart(2, '0')
const day = now.getDate().toString().padStart(2, '0')
this.date = `${year}-${month}-${day}`
},
onChangeDate(e) {
this.date = e.detail.value
},
onSubmit() {
console.log(`姓名:${this.name},电话:${this.phone},日期:${this.date}`)
},
},
}
</script>
<style>
.container {
padding: 20px;
}
.form-item {
margin-bottom: 20px;
}
.form-label {
display: inline-block;
width: 80px;
text-align: right;
}
.form-input {
display: inline-block;
margin-left: 20px;
}
.submit-button {
width: 100%;
height: 40px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 4px;
}
</style>
```