Question 245140 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to automatically calculate and display next due date based on user selected options and input

I created a form using antd proform with 4 fields. The first field is an input number named interval, the second is a select field with 2 options: "day(s)" and "month(s)", the third and fourth are datepicker fields. For example, if the user enters 30 as an interval, selects "days", and selects 2023-08-10 as the last due date, the next due date should be calculated automatically and displayed (2023-09-09) in the fourth field. How can I do this?

Here is my code:

<ProForm.Group>
                  <ProFormDigit onChange={(value) => setIntervalDays(value)} name="interval" label="Interval" width="sm" />
                  <ProFormSelect
                    onChange={(value) => setKindOfDate(value)}
                    name="kindOfDate"
                    label=""
                    width="md"
                    options={[
                      {
                        value: "1",
                        label: "Day(s)",
                      },
                      {
                        value: "2",
                        label: "Month(s)",
                      },
                    ]}
                  />
                </ProForm.Group>
                <ProForm.Group>
                  <ProFormDatePicker onChange={(value) => setLastDueDate(value)} name="lastDueDate" label="Last Due Date" />
                  <ProFormDatePicker onChange={(value) => setNextDueDate(value)} name="nextDueDate" label="Next Due Date" />
                </ProForm.Group>
Tags:

2

Answers


  1. 0

    First of all, the Date object of javascript isn’t the best (in my opinion), you have better libraries that can do the work in such a great way.

    Let’s say the form part is done (get user input values).

    You can do it with Date object like this :

    // Convert the lastDueDate to Date object
const date = new Date(lastDueDate)

// create your nextDueDate depending on which interval and unit you chose
if (unit === 'days') {
    date.setDate(date.getDate() + intervalValue)
} else if (unit === 'months') {
    date.setMonth(date.getMonth() + intervalValue)
}

const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')

console.log(`Next due date: ${year}-${month}-${day}`)

    Or, you can simply add "moment" library to your project and use this function :

    // import moment
import moment from 'moment'

const calculateDueDate = (interval, unit, dueDate) => {
   const nextDueDate = moment(dueDate).add(interval, unit);
   return nextDueDate.format('YYYY-MM-DD');
}

    Hope it helps, i can help you more if you need to fetch values and call the function correctly.

    Login or Signup to reply.
  2. 0

    The Date object built into Javascript is not too hard to use.

    There are libs out there for manipulating / formatting a bit easier. But if all your after is adding 30 days to another date, you can just use Date.setDate / getDate to achieve this.

    eg.

    const [date1, date2] = document.querySelectorAll('input');

date1.addEventListener('input', e => {
  if (e.target.value) {
    const dt = new Date(e.target.value);
    dt.setDate(dt.getDate() + 30);
    date2.value = dt.toISOString().slice(0, 10);
  } else {
    date2.value = '';
  }
});
    span {
  display: inline-block;
  width: 100px;
}

input {
  margin-top: 1em;
}
    <div>
  <span>Date:</span>
  <input type="date"/>
</div>

<div>
  <span>30 days later</span>
  <input type="date" readonly/>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search