如何使用日期选择器创建每周重复



我想用日期选择器和<v-text-field>创建一个事件重复,用户可以在其中选择事件重复的周数示例:

我选择10月18日星期一,我想重复两次活动,所以我必须在10月25日进行18+7,然后在10月32日进行25+7,所以在11月1日进行

我不知道如何在我的脚本中计算:

<v-col cols="12" sm="6">
<VueCtkDateTimePicker
v-model="create_event.start"
format="YYYY-MM-DD HH:mm"
formatted="YYYY-MM-DD HH:mm"
label="Date et heure de début"
minuteInterval="10"
/>
<br />
<VueCtkDateTimePicker
v-model="create_event.end"
format="YYYY-MM-DD HH:mm"
formatted="YYYY-MM-DD HH:mm"
label="Date et heure de fin"
minuteInterval="10"
/>
</v-col>
<v-col cols="12">
<v-text-field
label="Nombre de répétition"
v-model="create_event.nb"
></v-text-field>
</v-col>

您可以使用浏览器日期功能设置日期

比方说,文本字段输入重复=7

new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7)

从当前日期起7天后返回

下面是上面代码的示例:

var startDate = new Date(2019, 9, 25); // 10/25/2019 (MM/DD/YYYY)
var repetetion = 7;
var endDate  = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + repetetion);
console.log(endDate);

这是我的脚本:

async validate(){
var url = "https://sportmanagementsystemapi.herokuapp.com/api/event/" + localStorage.id;
var bodyFormData = new FormData();
bodyFormData.set("titre", this.create_event.name);
bodyFormData.set("nom_coach", this.create_event.nom_coach);
bodyFormData.set("details", this.create_event.details);
bodyFormData.set("date_debut", this.create_event.start);
bodyFormData.set("date_fin", this.create_event.end);
bodyFormData.set("role", this.create_event.role);
bodyFormData.set("facture_client", this.create_event.facture_client);
bodyFormData.set("facture_coach", this.create_event.facture_coach);
await axios.post(url, bodyFormData, {
headers: {
token: localStorage.token
}
});
var i;
if(this.create_event.nb != 0) {
for(i = 0; i < this.create_event.nb; i++) {
var oldTime = this.create_event.start.split(' ')[1]; 
var start = new Date(this.create_event.start); 
var [date, month, year] = new Date(start.getFullYear(), start.getMonth(), start.getDate()+7).toLocaleDateString().split('/'); 
this.create_event.start = year + '-' + month + '-' + date + ' ' + oldTime;
var oldTimeend = this.create_event.end.split(' ')[1]; 
var end = new Date(this.create_event.end); 
var [date, month, year] = new Date(end.getFullYear(), end.getMonth(), end.getDate()+7).toLocaleDateString().split('/'); 
this.create_event.end = year + '-' + month + '-' + date + ' ' + oldTimeend;
bodyFormData.set("titre", this.create_event.name);
bodyFormData.set("nom_coach", this.create_event.nom_coach);
bodyFormData.set("details", this.create_event.details);
bodyFormData.set("date_debut", this.create_event.start);
bodyFormData.set("date_fin", this.create_event.end);
bodyFormData.set("role", this.create_event.role);
bodyFormData.set("facture_client", this.create_event.facture_client);
bodyFormData.set("facture_coach", this.create_event.facture_coach);
await axios.post(url, bodyFormData, {
headers: {
token: localStorage.token
}
});
}
}
this.dialog = false;
window.location.reload();
},

最新更新