您的位置:首页 > 其它

遍历一段时间的每一天

2020-07-14 05:32 176 查看


事件:点击海外按钮,循环遍历上面选择的时间段的每一天

1.日历定义

<div>
<a-input-group compact>
<a-date-picker v-model="queryParam.startDateBegin" :placeholder="$t('disp.startDate')" />
<a-date-picker v-model="queryParam.startDateEnd" :placeholder="$t('disp.endDate')" />
</a-input-group>
</div>

2.休霞日定义

<a-form-item label="休暇日" v-show="checkBoxShow">
<!-- 这里是海外多选框的集合 -->
<div v-for="(item, index) in checkBoxList" :key="index">
<a-checkbox v-model="item.choose">{{ item.time }}</a-checkbox>
</div>
</a-form-item>

3.点击按钮定义

<a-checkbox @change="onChange_checkbox">
海外/個別
</a-checkbox>

4.checkBoxList定义在date return 中
5.实现方法

// =============================================
onChange_checkbox: function(value) {
// console.log('开始日期:' + moment(this.queryParam.startDateBegin)) //2020-07-01
// console.log('开始日期:' + moment(this.queryParam.startDateBegin).add(1, 'days')) //2020-07-01
// let new_time = moment(this.queryParam.startDateBegin)
//   .add(1, 'days')
//   .format('YYYY-MM-Ddd')
// console.log(new_time)

if (this.queryParam.startDateEnd != null && this.queryParam.startDateBegin != null) {
//清空数组
this.checkBoxList = []
// 转换日期格式 并循环遍历日期
let beginDate = moment(this.queryParam.startDateBegin)
let endDate = moment(this.queryParam.startDateEnd)
for (beginDate; beginDate <= endDate; ) {
let row = {
choose: false,
//将日期格式转换回去
time: beginDate.format('YYYY-MM-Ddd')
}
this.checkBoxList.push(row)
beginDate.add(1, 'days')
}

console.log(this.checkBoxList)
this.checkBoxShow = !this.checkBoxShow
}
},

//==============================================
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: