微信小程序做一个有开始日期和结束日期并且有总计天数表格完整代码
时间: 2024-03-08 13:51:06 浏览: 224
微信商城小程序 完整实例源代码
5星 · 资源好评率100%
以下是一个完整的微信小程序代码,包含开始日期、结束日期和总计天数表格:
wxml文件:
```
<view class="container">
<form bindsubmit="submitForm">
<view class="form-group">
<text>开始日期:</text>
<picker mode="date" name="startDate" value="{{startDate}}" bindchange="onDateChange" end="{{endDate}}">
<view class="picker">{{startDate}}</view>
</picker>
</view>
<view class="form-group">
<text>结束日期:</text>
<picker mode="date" name="endDate" value="{{endDate}}" bindchange="onDateChange" start="{{startDate}}" end="{{maxDate}}">
<view class="picker">{{endDate}}</view>
</picker>
</view>
<view class="form-group">
<text>总计天数:</text>
<text class="total-days">{{totalDays}}</text>
</view>
<button form-type="submit">提交</button>
</form>
</view>
```
在 `js` 文件中,我们需要定义一些变量来保存开始日期、结束日期和总计天数,并定义一些函数来计算总计天数和处理日期选择器的变化:
```
Page({
data: {
startDate: '',
endDate: '',
totalDays: 0,
maxDate: ''
},
onLoad: function() {
const now = new Date()
const maxDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`
this.setData({
maxDate: maxDate
})
},
onDateChange: function(e) {
const name = e.currentTarget.dataset.name
const value = e.detail.value
this.setData({
[name]: value
})
if (this.data.startDate && this.data.endDate) {
this.updateTotalDays()
}
},
updateTotalDays: function() {
const startDate = new Date(this.data.startDate).getTime()
const endDate = new Date(this.data.endDate).getTime()
const totalDays = Math.round((endDate - startDate) / (1000 * 60 * 60 * 24))
this.setData({
totalDays: totalDays
})
},
submitForm: function(e) {
e.preventDefault()
// do something with the form data
}
})
```
在 `wxss` 文件中,我们可以定义一些样式来美化表格:
```
.container {
padding: 20rpx;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.picker {
flex: 1;
text-align: right;
color: #666;
}
.total-days {
color: #f00;
font-weight: bold;
}
```
以上代码仅作参考,具体实现可以根据需求进行调整和修改。
阅读全文