如何使用 jquery 显示 mothly/yearly 重复日期？

Question

我想设置按年或按月提醒。

数据库table我有这些列

recu_dt reminder_set_days   period_frequ   recur_every  Active project
2021-01-01   30               yearly          10         Yes     a
2021-01-01   30                Monthly         6          Yes    b
2021-02-09   30               Monthly          3          No     c

预期输出

select from date  select to date
2021-01-01         2040-12-30

the search result will be
project name    reminder date
a                2030-12-02 /*Recur every 10 years from 30days before of  recu_dt 2021-01-01 */
a                2040-12-02
b                2021-06-02 /*Recur every 6 months from 30days before of recu_dt 2021-01-01 */
b                2021-12-02
b                2022-06-02
this "b" project will continue up to (selected to date =2040-12-30 including 6 months gap)
c                2021-04-08
c                2021-07-08
this "c" project will continue up to (selected to date =2040-12-30 including 3 months gap)

如果项目状态为活动=否。无需显示重复日期如果项目状态为 Active=Yes。重复日期需要显示

Json

[
   {
      "parent":{
         "project_ID":"1",
         "project_title":"abc",
         "particulars":"",
         "project_amount":"20000.00",
         "period_type":"Yearly",
         "recurrence_date":"2021-06-01",
         "reminder_set_days":"30",
         "recur_every":"10"
      },
      "child":[
         {
            "recur1":"02-05-2024",
            "recur2":"02-05-2026",
            "recur3":"02-05-2028",
            "recur4":"02-05-2030"
         }
      ]
   }
   
   {
      "parent":{
         "project_ID":"2",
         "project_title":"xyz",
         "particulars":"",
         "project_amount":"1000.00",
         "period_type":"Monthly",
         "recurrence_date":"01-02-2023 ",
         "reminder_set_days":"30",
         "recur_every":"3"
      },
      "child":[
         {
            "recur1":" 02-04-2023",
            "recur2":"02-07-2023",
            "recur3":"02-10-2023"
         }
      ]
   }
]

HTML TABLE 显示提醒日期和开始日期

<div id="detailsreminder">
                     <div class="container-fluid">
                     
                     <div class="form-row">
                                 <div class="form-group col-md-3">
                                    <label for="" class="col-form-label">From Date</label>
                                     <input class="form-control" id="fromdate_recu_view" placeholder="Date" name="fromdate_recu_view"  type="text" readonly />
                                 </div>
                                 <div class="form-group col-md-3">
                                    <label for="inputZip">To Date</label>
                                     <input class="form-control" id="todate_recu_view" placeholder="Date" name="todate_recu_view"  type="text" readonly />
                                 </div>
                              </div>
                              
                               <div class="form-group col-md-3" style="margin-top: 28px;">
                              <label for=""></label>
                              <button type="button" class="btn btn-primary" id="find_recurrence" class="find_recurrence">SEARCH </button>
                           </div>
                           
                           
                             
                              <div class="form-row">
                               <div class="form-group col-md-12">
                        <section id="body-contentreminder" class="continer" style="padding-top: 12px;">
                           <div id="aspnet-placeholder-contentallreminder" style="padding:0 10px">
                           
 
                              <div class="table-responsive">
                        <table class="table table-condensed tableinvoicelist_all" id="tableinvoicelist_all" style="border-collapse:collapse;">
                            <thead style="background-color: darkgray;">
                                <tr>
                                    
                                         <th> Project Title</th>
                                          <th>Recurrence Date</th>
                                          
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                              </div>
                           </div>
                        </section>
                     </div>
                     </div>
                     </div>
                  </div>

Answer 1

我为此创建了一个特殊函数。输入是包含所需详细信息的对象：

  {
       id: 2,
       name: "abc",
       date: new Date("2021-07-01"), 
       date2: new Date("2027-12-31"), 
       daysBefore: 30, 
       period: "yearly", 
       skip: 2
  }

输出全部如下：

{
  info: {
    end_date: "2027-12-31",
    particulars: "",
    period_type: "yearly",
    project_amount: "20000.00",
    project_ID: 2,
    project_title: "abc",
    recur_every: 2,
    recurrence_date: "2021-07-01",
    reminder_set_days: 30,
    start_date: "2021-06-01"
  },
  recurrenceList: ["2021-06-01", "2023-06-01", "2025-06-01", "2027-06-01"]
}

代码如下：

// ('2021-04-11", '2026-04-11", 30_days, 'yearly' every_2_year)

const getPaymentPlan = ({id, name, 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 = {
      "info":{
         "project_ID":id,
         "project_title":name,
         "particulars":"",
         "project_amount":"20000.00",
         "period_type":period,
         "recurrence_date":date.toISOString().split('T')[0],
         "start_date": startDate.toISOString().split('T')[0],
         "end_date": date2.toISOString().split('T')[0],
         "reminder_set_days":daysBefore,
         "recur_every":skip
      },
      "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 single = getPaymentPlan({
   id: 2,
   name: "abc",
   date: new Date("2021-07-01"), 
   date2: new Date("2033-12-31"), 
   daysBefore: 22, 
   period: "yearly", 
   skip: 4
})
console.log("single")
console.log(single)





const inputList = [
  {

       date: new Date("2021-07-01"), 
       date2: new Date("2027-12-31"), 
       daysBefore: 15, 
       period: "monthly", 
       skip: 3
  },
  {
       date: new Date("2021-07-01"), 
       date2: new Date("2027-12-31"), 
       daysBefore: 30, 
       period: "yearly", 
       skip: 2
  },
  {
       date: new Date("2021-07-01"), 
       date2: new Date("2033-12-31"), 
       daysBefore: 22, 
       period: "yearly", 
       skip: 4
  },
]

// multiple
const frequencyList = inputList.map((el, index) => {
  el.id = index
  el.name = 'proj'+index
  return getPaymentPlan(el)
})
console.log("multiple")
console.log(frequencyList)

如何使用 jquery 显示 mothly/yearly 重复日期？

How to show mothly/yearly recurrence date using jquery?

javascript

jquery

recurrence