首页写一个html活动时间的界面。开始时间用vant时间，结束时间可输入。开始时间要大于发布时间 2天

写一个html活动时间的界面。开始时间用vant时间，结束时间可输入。开始时间要大于发布时间 2天

时间: 2023-05-11 17:01:48 浏览: 114

好的，以下是一个简单的HTML活动时间界面的代码，其中使用了Vant时间组件和JavaScript代码来实现开始时间大于发布时间2天的限制： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>活动时间界面</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.23/index.css"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.23/index.js"></script> </head> <body> <div id="app"> <van-datetime-picker v-model="startTime" type="datetime" title="选择开始时间" :min-date="minDate" :max-date="maxDate" :formatter="formatter" ></van-datetime-picker> <br> <van-field v-model="endTime" label="结束时间" type="datetime" placeholder="请选择结束时间" :picker-options="{ start: '08:30', step: '00:30', end: '18:30' }" ></van-field> <br> <van-button type="primary" @click="submit">提交</van-button> </div> <script> new Vue({ el: '#app', data: { startTime: '', endTime: '', minDate: new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000), // 开始时间最小值为发布时间2天后 maxDate: new Date(2099, 12, 31), formatter(type, value) { if (type === 'year') { return `${value}年`; } else if (type === 'month') { return `${value}月`; } else if (type === 'day') { return `${value}日`; } else if (type === 'hour') { return `${value}时`; } else if (type === 'minute') { return `${value}分`; } return value; } }, methods: { submit() { if (this.startTime && this.endTime) { alert(`开始时间：${this.startTime}\n结束时间：${this.endTime}`); } else { alert('请选择开始时间和结束时间'); } } } }); </script> </body> </html> ``` 希望这个代码能够帮到你！

阅读全文