如何使用jquery设置提醒?



在数据库中,有project_details表。我正在从数据库中获取数据,结果像json下面给出的;

复发开始日期在数据库表中,但我没有在数据库中保存结束日期。结束日期取决于用户对字段的选择(from date和to date)

{
"projectremindshow":[
{
"project_ID":"8",
"project_title":"abc",
"period_type":"Yearly",
"recurrence_date":"2021-10-28",
"reminder_set_days":"12",
"recur_every":"2",
"start_date":"2021-09-28"
},
{
"project_ID":"10",
"project_title":"xyz",
"period_type":"Yearly",
"recurrence_date":"2021-10-05",
"reminder_set_days":"13",
"recur_every":"4",
"start_date":"2021-09-05"
},
{
"project_ID":"11",
"project_title":"mno",
"period_type":"Monthly",
"recurrence_date":"2021-10-01",
"reminder_set_days":"10",
"recur_every":"8",
"start_date":"2021-09-21"
}
]
}

const inputList = [
{
date: new Date("2021-01-01"), 
date2: new Date(todate_recu_view), 
daysBefore: reminder_set_days, 
period: period_type, 
skip: recur_every
}]
const frequencyList = inputList.map((el, index) => {
return getPaymentPlan(el)
})

如何传递每个for循环值到inputList?

从这些项目列表,我想找出提醒日期一个月或一周,每一年的用户选择和日期选项选择日期。

基于上面的JSON,我想显示一个包含所有提醒日期的HTML表。

我有两个字段从和到日期和搜索按钮。一旦点击搜索按钮,结果表将显示。

期望输出example1是如果用户选择了from-date= 2021-01-01和to_date=2026-01-30,结果显示如下Html表看起来有两个列,如下所示:

project Title reminderdate
abc           2021-09-28 /*show from start_date value from json and recur every 2 years (count upto to_date=2026-01-30) */
abc           2023-09-28 /*recur every 2 years*/
abc           2025-09-28 /*recur every 2 years*/
xyz           2021-09-05 /*recur every 4 years*/
xyz           2025-09-05 /*recur every 4 years*/
mno           2021-09-21 /*recur every 8 months*/
mno           2022-05-21 /*recur every 8 months*/
mno           2023-01-21 /*recur every 8 months*/
mno           2023-09-21 /*recur every 8 months*/
mno           2024-05-21 /*recur every 8 months*/
mno           2025-01-21 /*recur every 8 months*/ 
mno           2025-09-21 /*recur every 8 months becoz user select to_date=2026-01-30*/

期望输出example2是

如果用户选择from-date= 2025-01-01和to_date=2026-01-30,并显示如下结果

project Title reminderdate
abc           2025-09-28 /*recur every 2 years*/
xyz           2025-09-05 /*recur every 4 years*/
mno           2025-01-21 /*recur every 8 months*/ 
mno           2025-09-21 /*recur every 8 months*/

有人能帮我做这件事吗?code I tried:

$('#find_recurrence').click(function(event) {
var getID_comp = $('#getID_comp').val();
var fromdate_recu_view = $('#fromdate_recu_view').val(); //2025-01-01
var todate_recu_view = $('#todate_recu_view').val(); //2026-01-30

$.ajax({
url: base_url + "index.php/welcome/list_all_projects_reminder/",
type: "POST",
data: {
"company_id": getID_comp
},
success: function(data) {
var new_data = JSON.parse(data);
console.log(new_data) //above mentioned JSON result

for (var i = 0; i < new_data.projectremindshow.length; i++) {
var sl = i + 1;
var project_ID = new_data.projectremindshow[i].project_ID;
var project_title = new_data.projectremindshow[i].project_title;
var recur_every = new_data.projectremindshow[i].recur_every;
var period_type = new_data.projectremindshow[i].period_type;
var reminder_set_days = new_data.projectremindshow[i].reminder_set_days;

const getPaymentPlan = ({
date,
date2,
daysBefore,
period,
skip
}) => {
const originalDate = new Date(date.getTime()); // original copy before mutating
const startDate = new Date(date.setDate(date.getDate() - daysBefore))
// date has been mutated. giving it previous value
date = new Date(originalDate.getTime())
const recurObj = {
"recurrenceList": []
}
while (startDate.getTime() <= date2.getTime()) {
recurObj.recurrenceList.push(startDate.toISOString().split('T')[0])
switch (period) {
case 'monthly':
startDate.setMonth(startDate.getMonth() + skip)
break;
case 'yearly':
startDate.setFullYear(startDate.getFullYear() + skip)
break;
default:
recurObj.recurrenceList.push("wrong period type is given")
break;
}
}
return recurObj
}
const inputList = [{
date: new Date("2021-01-01"),
date2: new Date(todate_recu_view),
daysBefore: reminder_set_days,
period: period_type,
skip: recur_every
}]
const frequencyList = inputList.map((el, index) => {
return getPaymentPlan(el)
})
console.log(frequencyList)
}
}
});
});

虽然您还没有越过将AJAX的结果分配到数组中的点(因为您在for循环之外有inputList,其中的值没有定义或循环),但最终代码中有许多其他小错误,特别是在getPaymentPlan函数中,因此不可能在这里列出它们。相反,我只是提供一个工作版本供您研究和学习。

同样,你在问题中所陈述的预期结果是不正确的——你要求它显示提醒日期,但你列出的是递归日期。所有的提醒日期都提前了几天(由reminder_set_days属性控制)。

我的演示生成的结果显示的是实际的提醒日期:

$('#find_recurrence').click(function(event) {
var fromdate_recu_view = $('#fromdate_recu_view').val(); //2025-01-01
var todate_recu_view = $('#todate_recu_view').val(); //2026-01-30
//hard-code data instead of AJAX, for this demo:
let new_data = {
"projectremindshow": [{
"project_ID": "8",
"project_title": "abc",
"period_type": "Yearly",
"recurrence_date": "2021-10-28",
"reminder_set_days": "12",
"recur_every": "2",
"start_date": "2021-09-28"
},
{
"project_ID": "10",
"project_title": "xyz",
"period_type": "Yearly",
"recurrence_date": "2021-10-05",
"reminder_set_days": "13",
"recur_every": "4",
"start_date": "2021-09-05"
},
{
"project_ID": "11",
"project_title": "mno",
"period_type": "Monthly",
"recurrence_date": "2021-10-01",
"reminder_set_days": "10",
"recur_every": "8",
"start_date": "2021-09-21"
}
]
};
let inputList = [];
for (var i = 0; i < new_data.projectremindshow.length; i++) {
var proj = new_data.projectremindshow[i];
//add a new entry to inputList for each entry returned from the AJAX call
inputList.push({
dateFrom: new Date(fromdate_recu_view),
dateTo: new Date(todate_recu_view),
daysBefore: proj.reminder_set_days,
recurrenceDate: new Date(proj.start_date),
period: proj.period_type,
skip: proj.recur_every,
title: proj.project_title
});
}
const frequencyList = inputList.map((el, index) => {
return getPaymentPlan(el)
});
console.log(frequencyList);
});
/* the getPaymentPlan function is standalone, it should not be within a loop or within any other callback functions! */
const getPaymentPlan = ({
dateFrom,
dateTo,
recurrenceDate,
daysBefore,
period,
skip,
title
}) => {
//start from either the recurrence start date, or the start date in the form - whichever is later
let startDate = (recurrenceDate.getTime() > dateFrom.getTime() ? recurrenceDate : dateFrom);
//reminders go out several days before the actual recurrence start date
startDate = startDate.subtractDays(daysBefore);
let recurObj = {
"project": title,
"recurrenceList": []
}
while (startDate.getTime() <= dateTo.getTime()) {
recurObj.recurrenceList.push(startDate.toISOString().split('T')[0]);
switch (period) {
case 'Monthly':
startDate = startDate.addMonths(parseInt(skip));
break;
case 'Yearly':
startDate.setFullYear(startDate.getFullYear() + parseInt(skip));
break;
default:
recurObj.recurrenceList.push("wrong period type is given")
break;
}
}
return recurObj;
}
/* below are some functions to correctly add / subtract days and months from a Date, accounting for leap years, differing month lengths, etc */
Date.prototype.addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
}
Date.prototype.subtractDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() - days);
return date;
}
Date.prototype.addMonths = function(months) {
var date = new Date(this.valueOf());
var d = date.getDate();
date.setMonth(date.getMonth() + months);
if (date.getDate() != d) {
date.setDate(0);
}
return date;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
From date: <input type="date" id="fromdate_recu_view" /><br/> To date: <input type="date" id="todate_recu_view"><br/>
<button id="find_recurrence">Find Recurrence</button>

下面是getPaymentPlan函数的另一个版本,它将以一种更容易排序的格式输出数据,并在以后根据您想要的HTML格式输出数据:

const getPaymentPlan = ({
dateFrom,
dateTo,
recurrenceDate,
daysBefore,
period,
skip,
title
}) => {
//start from either the recurrence start date, or the start date in the form - whichever is later
let startDate = (recurrenceDate.getTime() > dateFrom.getTime() ? recurrenceDate : dateFrom);
//reminders go out several days before the actual recurrence start date
startDate = startDate.subtractDays(daysBefore);
let recurrenceList = [];
while (startDate.getTime() <= dateTo.getTime()) {
recurrenceList.push({ "project": title, "reminderDate": startDate.toISOString().split('T')[0] });
switch (period) {
case 'Monthly':
startDate = startDate.addMonths(parseInt(skip));
break;
case 'Yearly':
startDate.setFullYear(startDate.getFullYear() + parseInt(skip));
break;
default:
recurrenceList.push({ "project": "wrong period type is given", "reminderDate": null })
break;
}
}
return recurrenceList;
}

最新更新