Need to calculate days (add days to date)

[joshwilliam]

I have three fields (2 date fields and a numeric integer field) I need to be able to use a change event on 1 date field and the integer field so that any time either changes it will recalculate the date of the 3rd field. I need to be able to add days to the first date field from the numeric (it is always considered a number of days)

Something like this. Set a property on change event for the first date and the numeric fields with a condition that those fields are not null.

DATEADD(days, "numericFieldOfDays", "StartingDateField")

What would the syntax be for the change event in Radzen to accomplish this?

Thanks,

Josh

[korchev]

This can be done in the following way:

1. Create a property for the first date and the numeric interval (e.g. startDate and days)
   
   
   
   
   
2. Create another helper property (getEndDate) which will calculate the endDate value which is startDate + days. Note that it is a "lambda" function. We are doing this to avoid duplication later.
   
   
   
   Here is the Code implementation of the getEndDate property:

   () => {
    return new Date(${startDate.getFullYear()}, 
      ${startDate.getMonth()}, 
      ${startDate.getDate()} + ${days})
   }
   

   We are using the standard Date methods to implement the calculations.
3. Create the actual endDate property and set it to this.getEndDate()
   
   
4. Set the Value of the first DatePicker to ${startDate}, the Value of the Numeric to ${days} and finally the Value of the second DatePicker to ${endDate}.
5. Handle the Change event of the first DatePicker and set the endDate property to this.getEndDate().
   
   
6. Do the same in the Change event handler of the Numeric.

Here is a sample application: add-dates.zip

[joshwilliam]

Thanks this worked great for my Add form but when I modified it on the edit it hangs up. I modified the startdate and days to pull the value from the stored data.

[korchev]

Are there any JS errors? Not sure what could be happening.

[joshwilliam]

Here is what it shows. Not sure how it could be undefined. This record is one I just created and has data filled in for each of those 3 fields. All I'm trying to do is make sure if they change either field in the edit window the same calculation takes place in case an error was made during entry.

[korchev]

It is initially undefined until it is retrieved from your data source. Put the actions related to setting those properties in the Then event of your getXXXById method (after setting formData).

[joshwilliam]

I will check that out but I did find that it is not saving the data to my database on the add form. I went to look at the record I just created (that I was loading in the edit form) and the data from my 3 fields was not stored. Is that because I changed the value field from ${formData.BLDate} to ${startDate} and likewise for the other 2 fields.

[joshwilliam]

I have the Add form working now. Had to add some steps to the change events to store the new value. Still having an issue with the Edit form though. I've attached the Javascript errors I have captured. Tried several things but can't seem to get past this.

[korchev]

I think BL_Date is not a JavaScript date hence it is missing the getFullYear method. The reason is that Dates are serialized as strings in JSON format. You can change the definition of getEndDate() to the following:

() => {
 var date = new Date(${startDate});
 date.setDate(date.getDate() + ${days});
 return date;
}

The first line var date = new Date(${startDate}); will convert the string to a Date instance. Then we can just update the day of month via the setDate method.